vue3环境

创建项目:

 vue create project

在vue.config.js中添加,不检查格式:

 lintOnSave: false

vue3中main.js

 import { createApp } from 'vue'
 import App from './App.vue'
 ​
 const app = createApp(App)
 ​
 app.mount('#app')

1.1安装vue-router

 npm install vue-router --save

在main.js中配置

 // 路由
 import router from '@/router';
 app.use(router);

在src下新建router目录,新建index.js

 import { createRouter, createWebHistory } from 'vue-router';
 const routes = [
     {
         path: "/login",
         name: "login",
         component: () => import("@/views/Login")//登录页
     },
 ]
 const router = createRouter({
     routes,
     // history: createWebHashHistory(),
     history: createWebHistory()
 })
 export default router;

1.2安装axios

 npm install axios --save

在src/utils目录下新建request.js封装axios

 import axios from "axios";
 ​
 axios.defaults.baseURL = "http://localhost:8081"
 ​
 const request = axios.create({
     // TODO 1. 基础地址，超时时间,设置请求头数据格式
     timeout: 5000,
     headers: {
         'Content-Type': "application/json; charset=utf-8"
     }
 })
 ​
 // 请求拦截器
 request.interceptors.request.use(
     (config) => {
         // TODO 2. 携带token
         // const userStore = useUserStore()
         // if (userStore.token) {
         //  config.headers['Authorization'] = userStore.token
         // }
         config.headers['Authorization'] = localStorage.getItem("token")
         return config
     },
     (error) => {
         return Promise.reject(error)
     }
 ​
 )
 ​
 //响应拦截器
 request.interceptors.response.use(
     (response) => {
         // TODO 3. 处理业务失败
         console.log("response ->" + response)
 ​
         // TODO 4. 摘取核心响应数据
 ​
         if (response.data.code === 200) {
             //响应成功,返回响应数据
             return response
         } else {
             // 业务失败，给错误提示，抛出错误
             Element.Message.error(!response.data.msg ? '系统异常' : response.data.msg)
             return Promise.reject(response.data.msg)
         }
     },
     (error) => {
         // TODO 5. 处理401错误
         // 错误的特殊情况 =》 401 权限不足 或 token过期 =》 拦截到登陆
         console.log(error)
 ​
         if (error.response.data) {
             error.massage = error.response.data.msg
         }
 ​
         if (error.response?.status === 401) {
             router.push("/login")
         }
 ​
         // 错误的默认情况 =》 只要给提示
         Element.Message.error(error.response.data.msg || '服务繁忙,系统未知异常', { duration: 3000 })
         return Promise.reject(error)
     }
 )
 ​
 export default request

1.3安装pinia

 npm install pinia -S
 ​
 npm i pinia-plugin-persistedstate

仓库统一导出,在store下新建index.js

 import { createPinia } from 'pinia';
 const pinia = createPinia();
 // 持久化存储
 import { createPersistedState } from 'pinia-plugin-persistedstate';
 pinia.use(
     createPersistedState({
         auto: true, // 启用所有 Store 默认持久化
     }),
 );
 export default pinia
 ​
 // 简写
 export * from './modules/user'

在main.js中导入

 // pinia
 import pinia from '@/store'
 app.use(pinia)

在modules下新建use.js文件

import {defineStore} from 'pinia';

const useUserStore = defineStore('user', {
    state: () => ({}),
    actions: {}
})

export default useUserStore

1.4安装element-plus

 npm install element-plus --save

在main.js中配置

 // element-plus
 import ElementPlus from 'element-plus'; //引入Element-ui
 import zhCN from "element-plus/dist/locale/zh-cn.mjs" //引入中文
 import 'element-plus/dist/index.css'
 app.use(ElementPlus, { locale: zhCN })

1.5安装elementplus的Icon图标

 npm install @element-plus/icons-vue

在main.js中引入

 //elementplus的icon图标引入
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
     app.component(key, component)
 }

1.6安装qs

qs是一个流行的查询参数序列化和解析库。可以将一个普通的object序列化成一个查询字符串，

或者反过来将一个查询字符串解析成一个object,帮助我们查询字符串解析和序列化字符串。

 npm install qs --save

1.7安装mock

在src目录新建mock.js文件，用于编写随机数据的api，然后我们需要在main.js中引入这个文件,后面我们mockjs会自动为我们拦截ajax，并自动匹配路径返回数据

 npm install mockjs --save-dev

在main.js中配置

 //引入mock
 require("@/mock") //引入mock数据，关闭则注释该行

 const Mock = require('mockjs')
 ​
 const Random = Mock.Random
 ​
 let Result = {
     code: 200,
     msg: '操作成功',
     data: null
 }
 ​
 Mock.mock('/captcha', 'get', () => {
 ​
     Result.data = {
         token: Random.string(32),
         captchaImg: Random.dataImage('120x40', 'p7n5w')
     }
     return Result
 })
       

1.8安装echarts

 npm install echarts -S

1.9安装less-load

 npm install less-loader --save -dev

1.10安装normalize.css

 npm install normalize.css -S

在main.js中配置

 //导入normalize.css
 import "normalize.css"

1.11安装dayjs

  npm install dayjs -S

在main.js中导入

 //导入时间格式化插件
 import dayjs from "dayjs"
 app.use(dayjs)//可以全局使用dayjs

动态获取当前时间,实时更新时间

 import { ref, defineProps, defineEmits, onMounted, onBeforeUnmount } from "vue";
 import dayjs from "dayjs";
 ​
 //实时获取当前时间
 let timer = ref(0);
 let time = ref("");
 onMounted(() => {
   timer = setInterval(() => {
     //设置定时器
     time.value = dayjs().format("YYYY年MM月DD日 HH:mm:ss");
   }, 1000);
 });
 onBeforeUnmount(() => {
   clearInterval(timer); //清除定时器
   timer = 0;
 });
 ​

页面大小变化时出现ResizeObserver loop limit exceeded错误,在main.js中修改

 //防抖
 const debounce = (fn, delay) => {
     let timer = null;
     return function () {
       let context = this;
       let args = arguments;
       clearTimeout(timer);
       timer = setTimeout(function () {
         fn.apply(context, args);
       }, delay);
     }
   }
   
   const _ResizeObserver = window.ResizeObserver;
   window.ResizeObserver = class ResizeObserver extends _ResizeObserver{
     constructor(callback) {
       callback = debounce(callback, 16);
       super(callback);
     }
   }
 ​

1.12 添加sass依赖

在package.json的devDependencies中添加

  "sass": "^1.32.7",
  "sass-loader": "^12.0.0"

1.13 在vue.config.js设置登录端口

 devServer: {
     host: '0.0.0.0',
     port: 8008,
     proxy: {
       [process.env.VUE_APP_BASE_URL]: {
         target: "http://localhost:8080",
         changeOrigin:true,
         pathRewrite:{
           ['^'+process.env.VUE_APP_BASE_URL]:''
         }
       }
     }
   }