技术栈

vite4 + vue3 + vueRoute + pinia + axios + mock+ element-plus

vite

1.创建 vite项目

npm init vite@latest npm构建vite项目
yarn create vite yarn构建vite项目

依次需要配置项目名 、框架选择、原生和ts版本的选择

通过 提示切入到项目 OJS(道友们自己创建的项目名称)中, 并运行 命令可以看到 项目初创的样子

cd OJS  //切到项目
npm install //安装项目基础信息 即上面用户自己配置的信息
npm run dev // 运行项目(开发环境)

效果如下:

然后在浏览器中打开网址http://127.0.0.1:5174/

到此 vite4 + vue3 项目创建完成

veuRoute

安装 router@4.0 版本

npm install vue-router@4.0 //安装

配置

根目录下创建 router 文件夹 以及index.js 文件

/src/router/index.js

import {createRouter, createWebHistory} from "vue-router";

const router = createRouter({
    history: createWebHistory(),

    // 采用 hash  模式
    // history: createWebHashHistory(),

    routes: [
    ]
})

export default router

我们还需要在app实例中引入 router

import router from "./router/index.js";
const app = createApp(App);
app.use(router);

pinia 以及持久化插件

安装pinia

npm install pinia

配置

app中全局引入

/* main.js*/
import { createApp } from 'vue'
import './style.css' //引入全局样式  没有配置这个文件的道友可以不写
import App from './App.vue'

import { createPinia } from 'pinia'
const pinia = createPinia();
const app = createApp(App);
app.mount('#app');
app.use(pinia)

如何使用这里暂不展开说明.

安装持久化存储插件 pinia-plugin-persistedstate

npm i pinia-plugin-persistedstate

###修改原有的pinia 配置

const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);
const app = createApp(App);
app.mount('#app');
app.use(pinia)

axios

安装 aixios

npm install axios

配置

创建/src/apis/http.js文件, apis目录还用于存放所有的axios请求(注:有的人会把请求接口文件命名为request, 这都不影响)

/*http.js*/
import axios from "axios";
import router from "@/router/index.js";//这里注意了 当你在 此处使用路由跳转是引用的路由router的方式必须如此, 不能使用 const router = useRouter();

const httpService = axios.create({
    // 这里127.0.0.1:5173 是启动的端口, 即npm run dev 时的端口, 后续mock测试可以通过这个端口得到数据
    baseURL:'http://127.0.0.1:5173'+'/api',
    timeout:8000,
    headers:{
        "Content-Type":"application/json;charset=utf-8"
    }
})
httpService.interceptors.request.use((config)=>{
    //此处 笔者是将完成的笔记复制过来的, 这里是配置用户发送请求的时候的header, 道友们可以参考 , 注释掉,不影响项目的基础配置
    /*const  useStore = useUserStore();
    if(useStore.token !== null){
        config.headers['Authorization'] = useStore.token;
        return config;
    }*/
    return config;
},err=>{
    console.log("错误 的请求")
    return Promise.reject(err)
})
httpService.interceptors.response.use(res=>{
    const authorization = res?.headers.authorization;
    //获取token配置
    /*if (authorization){
        const useStore = useUserStore();
        useStore.token = authorization;

    }*/
    if(res.status === 201){
        return res;
    }
    if (res.status === 200 ){//请求通讯完成
        if (res.data.code === 400){//请求的信息不正确
            // return Promise.reject(res.data.msg);
            console.log("错误")
            return Promise.reject("cuowu");
        }
        return res;
    }else{
        return Promise.reject(res.data.msg);
    }
},error => {//请求通讯失败
    if (error.response){
        //请求错误处理
    }
    return Promise.reject(error);
})

export default httpService;

mock

mock 和 vite-plugin-mock 安装

npm i mockjs vite-plugin-mock@2.9.6

版本号 选择 vite 4.1.4时选择 "vite-plugin-mock": "^2.9.6",版本 和"mockjs": "^1.1.0",版本 版本号可以在package.json中查看 并直接修改 webstorm 会重新的安装

###测试案例 在项目文件下创建mock文件

import Mock from 'mockjs'
export default [
    {
        url: "/api/test",
        method: "get",
        response: () => {
            return {
                code: 0,
                message: "ok",
                'data|12': [{
                    warnBl: 0,// 预警占比
                    'warnLevel|0-3': 0,// 预警等级
                    'warnNum|0-100': 0,// 预警数量
                    'warnTotal|0-100': 0,// 报警数量
                }]
            }
        }
    },
]

配置

/*vite.config.js*/
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import {viteMockServe} from "vite-plugin-mock";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
      vue(),
      viteMockServe({
        // ↓解析根目录下的mock文件夹
        mockPath: "./mock",
        // localEnabled: env.VITE_API_CLOSE_MOCK === undefined || env.VITE_API_CLOSE_MOCK !== 'YES',  // 开发打包开关
        prodEnabled: false, // 生产打包开关
        supportTs: false, // 打开后，可以读取 ts 文件模块。 请注意，打开后将无法监视.js 文件。
        // watchFiles: true, // 监视文件更改
      }),
  ],
})

测试

在浏览器中输入请求地址127.0.0.1:5173/api/test 得到请求数据, 即代表mock配置成功.

element-plus

安装 element-plus

npm install element-plus

按需导入安装自动导入插件

npm install -D unplugin-vue-components unplugin-auto-import

配置

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

使用测试

在helloworld.vue 中加入一段代码

<el-button> hello</el-button>

对应的html 界面即刻显示出该按钮

到此 基础配置完成