一、项目创建
（1）初始化项目
npm init vite@latest
（2）按照提示
输入项目名称： Project name —— admin-v3-ts
选择框架 ：Select a framework —— vue
选择语言: Select a variant ——TypeScript
（3）启动项目
npm install
npm run dev
二、项目基本配置
1.使用ui框架-ElementPlus
（1）安装ElementPlus
npm install element-plus --save
（2）使用按需引入(自动导入) 安装unplugin-vue-components 和 unplugin-auto-import这两款插件
npm install -D unplugin-vue-components unplugin-auto-import
（3）在vite.config.js文件中配置
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
// ...
plugins: [
// ...
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
})
2.使用sass
（1）安装sass：npm i sass -D
（2）在src/assets/styles文件下，创建common.scss文件，在main.ts里全局引入即可
3.路由配置
（1）安装vue-router：npm install vue-router
（2）创建router文件夹，并在该文件夹下创建index.ts文件,在views文件夹下创建所需的页面home/home.vue Main.vue
import {createRouter,createWebHistory} from 'vue-router'
const routes = [
{
path:'/',
component: ()=> import('../views/Main.vue'),
children:[
{
path:'/',
name:'home',
component:() => import('../views/home/index.vue')
}
]
}
]
const router = createRouter({
history:createWebHistory(),
routes
})
export default router
（3）在main.ts文件中引入
import router from './router'
app.use(router)
（4）在App.vue中出口
<router-view></router-view>
4.使用pinia做状态管理
（1）安装pinia:npm install pinia
（2）pinia的全局引入，在main.ts中引入 得到实例并挂载到vue根实例上
import { createPinia } from "pinia";
const store= createPinia();
app.use(store);
(3)创建store文件夹，并在该文件夹下创建index.ts文件
import { defineStore } from "pinia";
export const homeStore= defineStore('homeStore',{
state:()=>{
return {
count:0
}
},
actions:{
}
})