初始化项目
npm init -y
选择打包编译工具
webpack
vite(新项目个人推荐)
选择技术栈（推荐使用typescript）
vue 3 、vue-router 、axios/fetch 、pinia 、dayjs
安装依赖
npm install vue vue-router pinia dayjs
yarn add vue vue-router pinia dayjs
pnpm install vue vue-router pinia dayjs
# 安装 ts的依赖
npm install vite @vitejs/plugin-vue typescript vue-tsc
yarn add -D vite @vitejs/plugin-vue typescript vue-tsc
pnpm install vite @vitejs/plugin-vue typescript vue-tsc
html模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="vue-root-app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
main.ts
import {createApp, defineComponent} from 'vue';
const App = defineComponent({
template: `<h1>vue + vite</h1>`
})
const app = createApp(App)
app.mount('#vue-root-app')
package.json的配置
{
"name": "admin-fe",
"version": "1.0.0",
"description": "积分系统管理端",
"scripts": {
"start": "npm run dev",
"dev": "vite",
"build": "vue-tsc && vite build"
},
...
}
vite的配置
import vue from '@vitejs/plugin-vue'
export default {
// 必须配置vue插件
plugins: [vue()]
}