全局安装 yarn 包管理工具
npm i -g yarn
使用 yarn 来创建 vite 的 vue 项目
yarn create vite
初始引入pinia,pinia持久化插件,路由,element-plus
//安装pinia,pinia持久化插件,路由,element-plus库
/**
yarn add pinia
yarn add pinia-plugin-persist 或 npm i -S pinia-plugin-persist
yarn add vue-router
yarn add element-plus
*/
import { createApp } from 'vue'
import App from './App.vue'
// 引入pinia库
import { createPinia } from 'pinia'
// 引入持久化插件
import piniaPersist from 'pinia-plugin-persist'
// 路由
import router from './router'
// element-plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import locale from 'element-plus/lib/locale/lang/zh-cn'
const app = createApp(App)
const pinia = createPinia()
pinia.use(piniaPersist)
//引入elementplus中文版
app.use(ElementPlus, { locale });
app.use(pinia)
app.use(router)
app.use(ElementPlus)
app.mount('#app')
路由配置
router---index.js
import { createRouter, createWebHistory } from "vue-router";
import routes from './admin'
const router = createRouter({
history: createWebHistory(),
routes: routes
})
export default router
router---admin.js
export default [
{
path:'/login',
neme:'login',
component:() => import('@/views/login/index.vue'),
meta:{
login:false
}
},
{
path:'/',
neme:'admin',
component:() => import('@/views/admin/index.vue'),
}
]
router---404
{
path:'/:pathMatch',
name:'nomatch',
component:()=>import('@/views/nomatch/index.vue'),
meta:{
login:false
}
}