vite创建vue3项目操作步骤

第一步：创建项目

   npm create vite@latest my-vue-app -- --template vue    npm install 安装项目依赖    npm run dev启动Vue3项目 

第二步：安装vue-router路由

   官网：https://router.vuejs.org/zh/    npm install vue-router@4 

第三步：配置路径别名

打开vite.config.js配置文件，配置代码方法如下： //导入path模块 import path from 'path' export default defineConfig({   //设置文件路径别名   resolve:{     alias:{       "@":path.resolve(__dirname,"src")     }   },   plugins: [vue()], }) 

第四步：捕获404路由

const routes = [        //捕获404路由     {         path: '/:pathMatch(.*)*',         name: 'NotFound',         component:()=>import('@/views/404.vue')     } ] 

第五步：引用elementPlus

官网：https://element-plus.gitee.io/zh-CN/ 安装： npm install element-plus --save 

第六步：使用 vuex仓库

npm install vuex@next --save 

第七步：设置全局路由守卫

//全局前置路由守卫 router.beforeEach(async (to, from, next) => {     nProgress.start()     //获取token     const tokenStr = window.sessionStorage.getItem('token')     //如果未登录跳转到登录页面     if (!tokenStr && to.path !== '/login') return next('/login')     //如果已登录避免重复登录     if (tokenStr && to.path == '/login') {         return next({ path: from.path ? from.path : '/' })     }     let hasNewRoutes = false     //如果用户登录成功，调用Vuex方法，存储用户信息     if (tokenStr && !isgetInfo) {         const res = await store.dispatch('getUserInfo')         isgetInfo = true         //动态添加路由         //hasNewRoutes = addRoutes(res.data.menus)     }     //手动指定路由     //如果确实有新路由加入手动指定路由，否则直接放行     hasNewRoutes ? next(to.fullPath) : next()     //next() })   //全局后置路由守卫 router.afterEach((to, from,) => {     nProgress.done() }) 

第八步：安装axios 并重新封装

//安装 axios  npm install axios --save   //导入axios import axios from 'axios' //创建axios实例对象 const instance = axios.create({     //设置项目基准地址     baseURL: '/api',     //设置请求超时时间为5秒钟     //timeout:5000 }) //设置请求拦截器 instance.interceptors.request.use(config => {     const token = window.sessionStorage.getItem('token')     if (token) {         config.headers['token'] = token     }     return config }) //设置响应拦截器 instance.interceptors.response.use(response => {     return response.data }, err => {     return err.response.data }) export default instance 

补充：

style样式添加less与scoped  安装less  npm install less less-loader --save-dev    ********************************************** Setup语法糖     ********************************************** //安装图标 npm install @element-plus/icons-vue //element图标 import * as ElementPlusIconsVue from '@element-plus/icons-vue' //注册element图标 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {     app.component(key, component) } ********************************************** loading进度条  安装nprogress第三方模块  **********************************************  vueUse工具库 安装 npm i @vueuse/core  使用： //全屏方法 import { useFullscreen } from '@vueuse/core’ const { toggle } = useFullscreen()