快速搭建一个vue3+js+yarn+vite项目

全局安装 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
    }
}