Vue2/Vue3全家桶 - Vite2.0 cross-env mock搭建Vue3.0项目实战 - 《前端个人开发笔记》

创建一个空的vite2项目
vite环境变量与模式
安装cross-env
- package.json命令操作
- 查看环境变量
vite脚手架配置 vite.config.js
使用vite-plugin-mock创建mock数据
- 安装vite-plugin-mock
- 创建mock数据及请求接口
集成Element Plus
集成vue-router 4.x版本
vuex 4.x

vite中文文档 https://cn.vitejs.dev/
vite配置文档 https://cn.vitejs.dev/config/#conditional-config

创建一个空的vite2项目

vite是一个构建工具，开发期它利用浏览器的native ES module(原生ES模块)特性导入组织代码，生产中利用rollup作为打包工具
vite特点：光速启动热模块替换按需编译

npm init @vitejs/app project-name
cd project-name
npm install 
npm run dev

vite环境变量与模式

.env 全局默认配置文件，不论什么环境都会加载合并
.env.development 开发环境下的配置文件(可自己随意定义)
.env.production 生产环境下的配置文件(可自己随意定义)
Vite 在一个特殊的 import.meta.env 对象上暴露环境变量。这里有一些普遍适用的内建变量
为了防止意外地将一些环境变量泄漏到客户端，只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码。例如下面这个文件中：

# 此行重要，标识环境，如果不写，会被认为 development 模式
NODE_ENV=production
# 只有 VITE_BASE_URL 会被暴露为 import.meta.env.VITE_BASE_URL 提供给客户端源码
VITE_BASE_URL= 123

vue-cli必须以VUEAPP开头
vue-cli以process.env.VUE_APP_BASE_URL来读取变量(vite需要引入loadEnv来读取变量)

安装cross-env

cross-env是跨平台设置和使用环境变量的脚本。
在大多数Windows命令行中在使用NODE_ENV = production设置环境变量时会报错。
同样，Windows和Linux命令如何设置环境变量也有所不同。使用cross-env可以设置在不同的平台上有相同的NODE_ENV参数。

npm install cross-env --save-dev

package.json命令操作

 "scripts": {
    "dev": "cross-env NODE_ENV=development  VITE_BASE_URL='192.168.230.232:0000' vite --mode development",
    "deva": "cross-env NODE_ENV=production VITE_BASE_URL='192.168.230.233:1111' vite --mode production",
    "build:prod": "vite build --mode production",
    "serve": "vite preview"
  },

cross-env 设置本地NODE_ENV值为development VITE_BASE_URL的值为192.168.230.232:0000
cross-env 设置线上NODE_ENV值为production VITE_BASE_URL的值为192.168.230.232:1111
cross-env 会更改全局环境变量(.env)和模式(development,production)中VITE_BASE_URL的值

查看环境变量

.env.development文件

NODE_ENV = development
VITE_APP_BASE_API = '/api'
VITE_BASE_URL= '/development_url'

.env.production文件

NODE_ENV = production
VITE_APP_BASE_API = '/api'
VITE_BASE_URL:'/production_url'

vue页面中打印的值为cross-env在package.json中设置的值
```
import.meta.env.VITE_BASE_URL // 192.168.230.232:0000
```

vite.config.js中打印的值为cross-env在package.json中设置的值

import { defineConfig ,loadEnv} from 'vite'
export default ({ mode }) => {
  loadEnv(mode, process.cwd()).VITE_BASE_URL // 192.168.230.232:0000
}

vite脚手架配置 vite.config.js

官方文档 https://cn.vitejs.dev/config/#config-file-resolving
loadEnv(mode, process.cwd()).VITE_BASE_URL 读取环境变量
npm run dev环境下mode的值为(development)对应package.json中dev命令 --mode development

import { defineConfig ,loadEnv} from 'vite'
// 通过@vitejs/plugin-vue插件支持vue，vue和其余框架一视同仁
import vue from '@vitejs/plugin-vue'
//mock服务
import { viteMockServe } from 'vite-plugin-mock'
import path from 'path'
export default ({ mode }) => {
  return defineConfig({
    //服务
    server: {
      port:8088,//端口
      base:'/',//打包后的根路径
      silent:false,//开启控制台输出日志
      //跨域代理
       proxy: {
        [loadEnv(mode, process.cwd()).VITE_APP_BASE_API]: {
          target: loadEnv(mode, process.cwd()).VITE_BASE_URL,
          changeOrigin: true,
          rewrite:path => path.replace(/^\loadEnv(mode, process.cwd()).VITE_APP_BASE_API/,'')
        },
        '/api/':{
          target:'http://jsonplaceholder.typicode.com',
          changeOrigin:true,
          rewrite:path => path.replace(/^\/api/,'')
        },
        '/api_node/':{
          target:'http://127.0.0.1:3000',
          changeOrigin:true,
          rewrite:path => path.replace(/^\/api_node/,'')
        },
        '/step/':{
          target:'http://127.0.0.1:8183',
          changeOrigin:true,
          rewrite:path => path.replace(/^\/step/,'')
        },
      },
    },
    //打包构建
    build:{
      outDir: 'dist/monitor',//设置项目打包生成的文件的存储目录
      assetsDir:' static',//设置放置打包生成的静态资源
    },
    //插件
    plugins: [
      vue(),
      viteMockServe({
        // default
        mockPath: 'mock',
        supportTs:false,
        localEnabled: mode == 'development',//localEnabled控制mock开发环境是否启动。
      }),
    ]
  });
}

使用vite-plugin-mock创建mock数据

vite 的数据模拟插件，是基于 vite.js 开发的。并同时支持本地环境和生产环境。
您可以在 Google Chrome 控制台中查看网络请求记录

安装vite-plugin-mock

npm i mockjs -D
npm i vite-plugin-mock -D

vite.config.js

import { defineConfig ,loadEnv} from 'vite'
import vue from '@vitejs/plugin-vue'
//mock服务
import { viteMockServe } from 'vite-plugin-mock'
export default ({ mode }) => {
  return defineConfig({
    //插件
    plugins: [
      vue(),
      viteMockServe({
        // default
        mockPath: 'mock',//静态文件根目录 如果watchFiles：true，将监视文件夹中的文件更改。 并实时同步到请求结果
        supportTs:false,//打开后，可以读取 ts 文件模块。 请注意，打开后将无法监视.js 文件。
        localEnabled: mode == 'development',//localEnabled控制mock开发环境是否启动。
      }),
    ]
  });
}

创建mock数据及请求接口

mockPath为mock 则在项目根目录下创建mock目录
mock下创建静态数据就行自己读取
mock/list.js

//创建axios 服务
const service = axios.create({
    baseURL: "api",
    timeout: 5000, // request timeout
   /* responseType: "blob",*/ //下载的时候在请求上加上responseType
});

/api则对应axios创建服务的baseURL 跟后端接口一致即可

export default [
    {
        url:'/api/fenceList',
        methods:"post",
        response:req=>{
            return{
                code:0,
                data:{
                    list:[
                        {
                            fenceId: 'ddbe18490edc458ba20b9d0265486971',
                            fenceName:'围栏1',
                            fenceType: 1,
                            state:0,
                            vehicleSize:5,
                            createTime:'2021-10-13 11:09:36',
                            startTime:'2021-10-01 00:00:00',
                            endTime:'2021-10-31 00:00:00',
                            desp:'测试1',
                        },
                        {
                            fenceId: '6720a927a4f0489190de41d9b8be1b79',
                            fenceName:'Weilan &&*',
                            fenceType: 3,
                            state:1,
                            vehicleSize:2,
                            createTime:'2021-10-09 09:48:59',
                            startTime:'2021-10-02 00:00:00',
                            endTime:'2021-10-16 00:00:00',
                            desp:'测试2',
                        }
                    ],
                    pageInfo:{
                        pageNum: 1,
                        pageSize: 10,
                        totalRecord: 2
                    }
                }
            }
        }
    }
]

请求请看axios二次封装
/api/fenceList api是baseURL api/fenceList 对应mock中list.js的接口

export const pathConfig = {
    fence:{
        fenceList:'/fenceList'
    },
}

  $this.$post('fence','fenceList').then(res=>{
      if(res.code == 0){
          data.tableData = res.data.list;
          data.pageData.total = res.data.pageInfo.totalRecord;
      }
  })

集成Element Plus

element3更适合教学版 Element Plus适合商业版
官方地址 https://element-plus.org/#/zh-CN
因为我们使用的Vue3.0,所以要使用Element-ui的话就必须要使用，Element Plus 这是一个使用vue3来编写的vue组件库，

npm install element-plus --save

运行以上命令先安装element-plus
然后在入口文件main.js中引入相应的库

import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

然后将ElementPlus挂载到Vue的原型上,并将主题的大小设置为 small

createApp(App).use(ElementPlus,{size: 'small'}).mount('#app')

集成vue-router 4.x版本

Vite脚手架生成的vue项目，目前是没有集成vue-router的，没关系，自己动手丰衣足食
安装vue-router
一定要安装vue-router的4.x版本，要不然无法和Vue3.x搭配使用。

npm install vue-router@4 --save

在src文件下创建router文件 /src/router/index.js

   import { createRouter, createWebHashHistory } from "vue-router";
   const routes = [
       {
           path:"/",
           name:"home",
           component:()=>import("../views/home.vue")
       }
   ]
   const router = createRouter({
       history: createWebHashHistory(),
       routes
   });
   export default router;

在main.js中引入并挂载router

   import router from "./router";
   createApp(App)
     .use(ElementPlus,{size: 'small'})
     .use(router)
     .mount('#app')

简写

var app = createApp(App);
app.use(ElementPlus,{size: 'small'});
app.use(router);
app.mount('#app');
//在vue原型上声明全局字段  this.Axios调用
app.config.globalProperties.Axios = Axios;

vuex 4.x

在src文件下创建store文件 /src/store/index.js

npm i vuex@next -S
import {createStore} from 'vuex';
export default createStore({
  state: {
    couter: 0
  }
});
import store from "src/store";
createApp(App).use(store).mount("#app");