Vue 3.x 快速上手（vite / ant-design / vue-router / vuex / axios / mock / echarts）

1、安装准备

1.1 nodejs

官网地址： 点击进入
cmd 检查安装结果：

node -v
npm -v

1.2 Python

没有会报错Error: Can’t find Python executable “python”, you can set the PYTHON env variable
官网地址： 点击进入
安装完成记得配置环境变量

1.3 vue cli 脚手架安装

cmd 命令安装

npm install -g @vue/cli --registry https://registry.npm.taobao.org

–registry https://registry.npm.taobao.org表示临时使用淘宝镜像地址安装
cmd 命令检查安装结果

vue -V 

如果使用vscode建议安装 Vetur/ ESLint 插件安装

1.4 新项目搭建

1）方法一 脚手架搭建

vue create hello-vue3

2）方法二 vite搭建

npm init vite hello-vue3 -- --template vue

Vite 是由 Vue 作者尤雨溪开发的一套一种新的、更快地 web 开发工具，它具快速的冷启动、即时的模块热更新、真正的按需编译几个特点。Vite仅支持Vue3。推荐大家尝试一下~

2、常用插件下载引入

2.1 ant-design UI框架

cmd 下载命令

npm i --save ant-design-vue@next

main.js 文件引入

// 引入ant-design
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
createApp(App)
    // 使用ant-design
    .use(Antd)
    .mount('#app')

2.2 vue-router 路由

1）下载命令，vue 3.x 必须使用vue-router4及以上

npm install vue-router@4

2）在src下新建route文件夹，新增index.ts文件

// 导入component
import login from "../components/login/login.vue";
import HelloWorld from "../components/HelloWorld.vue";
import { createRouter,createWebHistory} from "vue-router";
const routes = [
    { path: '/', redirect:'/login',},
    { path: '/login', component: login },
    { path: '/home', component: HelloWorld },
]
const router = createRouter({
    history: createWebHistory(),
    routes, // `routes: routes` 的缩写
});
export default router;

3）然后在main.js引入

import { createApp } from 'vue'
import App from './App.vue'
import router from './route'
createApp(App)
.use(router) // 路由配置
.mount('#app')

4）编写路由守卫

// 路由守卫
router.beforeEach((to, from, next) => {
    // 如果访问的是登录页面（无需权限），直接放行
    if (to.path === '/login') return next()
    // 如果访问的是有登录权限的页面，先要获取token
    const tokenStr = store.state.token;
    // 如果token为空，强制跳转到登录页面；否则，直接放行
    if (!tokenStr) return next('/login')
    next()
})

2.3 vuex 状态管理工具

1）cmd下载

npm install vuex@next --save

2）定义store

import { createStore} from "vuex";
// 创建一个新的store实例
export default createStore({
    // 定义需要存储的状态
    state(){
        return{
            count: 0
        }
    },
    // 定义非异步操作
    mutations: {
        addCount(state) {
            state.count++
        }
    }
})

3）在main.js中注入全局

// 导入vuex配置页面
import store from "./store/index";
createApp(App)
    // 使用ant-design
    .use(Antd)
    .use(store)
    .mount('#app')

4）在组件中使用

  created() {
    // 调用mutations中的方法
    this.$store.commit("addCount");
    // 使用存储的状态
    console.log(this.$store.state.count); // 2
  }

5）在setup中使用，setup中没有this指向全局的概念，需要先引入

import { useStore } from 'vuex';
// setup 中使用vuex
const store = useStore();
store.commit("addCount");
console.log(store.state.count); // 1

6）配置刷新不丢失数据 app.vue中

mounted(){
    // 解决vuex刷新数据丢失问题: 每次刷新将数据存到localstorage
    const store = useStore();
    const storeData = localStorage.getItem("store");
    if (storeData ) {
      store.replaceState(Object.assign({}, JSON.parse(storeData)))
    }
    window.addEventListener("beforeunload",()=>{
      localStorage.setItem("store",JSON.stringify(store.state))
    })
  }

2.4 axios 数据请求

1）cmd下载

npm install axios --save

2）Vite.config.ts中配置跨域

export default defineConfig({
  server: {
    port: 3003,
    proxy: {
        '/api': {
            target: 'http://*.*.*.*:*', // 请求地址
            changeOrigin: true, // 开启跨域
            ws: true,
            rewrite: (path) => path.replace(/^\/api/, '')
        }
    },
  }
})

3）axios 参考配置

import axios from 'axios';
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue';

axios.defaults.baseURL= "/api/"; // 接口地址
//设置超时
axios.defaults.timeout = 10000;

const router = useRouter();
//http request 拦截器
axios.interceptors.request.use(
    config => {
        // const token = Cookies.get('名称');
        config.headers = {
            'Content-Type': 'application/json'
        }
        return config;
    },
    error => {
        return Promise.reject(error);
    }
);

//http response 拦截器
axios.interceptors.response.use(
    response  => {
        if (response.data.code == 200) {
            return response;
        } else {
            //状态码处理
            message.warning(response.data.data);
        }
    },
    error => {
        if (error.response.status) {
            switch (error.response.status) {
                // 401: 未登录             
                case 401:
                    router.replace({
                        path: '/login',
                    });
                    break;
                // 403 token过期操作--暂时不需要
                // 登录过期对用户进行提示
                // 清除本地token和清空vuex中token对象
                // 跳转登录页面                
                case 403:
                    // 清除token
                    // localStorage.removeItem('token');
                    // store.commit('loginSuccess', null);
                    // 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面 
                    router.replace({
                        path: '/login',
                    });
                    break;

                // 404请求不存在，待完善
                case 404:
                    // 重定位找不到路由
                    break;
                // 其他错误，直接抛出错误提示
                default:
                    message.warning('This is a warning message');
            }
            return Promise.reject(error.response);
        }
    }
)

/**
 * 封装get方法
 * @param url
 * @param data
 * @returns {Promise}
 */
 function get(url, params = {}) {
    return new Promise((resolve, reject) => {
        axios.get(url, {
            params
        }).then(response => {
            resolve(response.data)
        }).catch(err => {
            reject(err)
        })
    })
}

/**
 * 封装post请求
 * @param url
 * @param data
 * @returns {Promise}
 */
function post(url, data = {}) {
    return new Promise((resolve, reject) => {
        axios.post(url, data).then(response => {
            resolve(response.data)
        }, err => {
            reject(err)
        })
    })
}

/**
* 封装put请求
* @param url
* @param data
* @returns {Promise}
*/
function put(url, data = {}) {
    return new Promise((resolve, reject) => {
        axios.put(url, data).then(response => {
            resolve(response.data)
        }, err => {
            reject(err)
        })
    })
}
const https = {
    get: function (url, params) {
        return get(url, params)
    },
    post: function (url, params) {
        return post(url, params)
    },
    put: function (url, params) {
        return put(url, params)
    }
}
export default https; 

4）可以在api文件中调用请求

2.5 mock使用

1）mock插件下载

npm install mockjs vite-plugin-mock --save

2）vite.congfig.ts 引入

plugins: [
    vue(),
    viteMockServe({
      mockPath: "./src/mock", // mock数据文件夹
      supportTs: true
    })
  ]

3）在src/mock文件夹下创建测试的api 的ts文件

export default [
    {
        url: "/getMeun",
        method: "get",
        response: (options) => {
            const role = options.query.role;
            const menuList =  [
                {
                   name: "设备管理", path: "/equipmentManagement", icon: "PieChartOutlined", 
                   children: [{
                        name: "测试管理", 
                        path: "/testmanagement",
                        children: [
                            { name: "测试页面", path: "/test" }
                        ]
                   }]
                },
                {
                    name: "系统管理", path: "/systemManagement", icon: "SettingOutlined", 
                    children: [{
                         name: "用户管理", 
                         path: "/usermanegement",
                    }]
                 }
            ];
            if(role == 'admin'){
                return {
                    code: 200,
                    message: "ok",
                    data: menuList,
                };
            } else {
                return {
                    code: 200,
                    message: "ok",
                    data: [menuList[0]],
                };
            }
        },
    },
];

4）在api中进行调用，可以使用axios或者fetch

import http from '../utils/axios';
// 菜单获取
export const getMenu = (role) => {
    return http.get(`/getMeun?role=${role}`, {});
    return fetch(`/getMeun?role=${role}`);
}

5）在页面中调用api

import { getMenu } from '../../api/login';
getMenu('admin').then(
  res => {
     console.log(res);
   }
 ) // axios 写法
 getMenu('admin').then(
   response => response.json()
 ).then(
   res => {
     console.log(res);
   }
 ) // fetch 写法

6） 请求成功

2.6 echarts(5)使用

1. 下载echats
   官网：http://echarts.apache.org/examples/zh/index.html
   例子参考：https://www.makeapie.com/explore.html

npm install echarts --save

2）在component中按需引入

import * as echarts from 'echarts'

3）使用流程

  <div id="echarts" :style="{ width: '100%', height: '300px' }"></div> // div容器创建，容器需要有宽高设置
  
  var myChart = echarts.init(document.getElementById("echarts")); 初始化echart
  const option = {
      ... // 去官网或例子参考网站里面找
  }
  myChart.setOption(option, true); // 设置配置
  window.onresize = function () {
   //自适应大小, 不用的话不会自适应大小。
    myChart.resize();
  };

4）在使用5.x 版本使用中国地图，由于echarts版本过高，需要引入china.json文件
china.json文件获取：
链接：https://pan.baidu.com/s/1GWwsAL4wI9KITJ20shRd_Q
提取码：xpg1

import chinaMap from "@/assets/json/china.json"; // 引入上面的json文档
echarts.registerMap("china", { geoJSON: chinaMap }); // 再init上面执行

结尾的话：如果对你有用的话，麻烦点赞一下哦~