阅读量:0
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 <style lang='less' scoped></style> ********************************************** Setup语法糖 <template> <button @click="log">{{ msg }}</button> </template> <script setup> const msg = 'Hello World' const log = () => { console.log(msg) } </script> ********************************************** //安装图标 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() 