一、项目创建
(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:{
}
})