vite+vue3+element-plus系统开发笔记

搭建一个 Vite 项目

# vite官网文档

使用NPM：npm create vite@latest

element-plus的配置和使用

element-plus官网

element-plus依赖的引入

执行NPM命令：npm install element-plus --save

在页面使用element-plus组件时有两种方法，一种全局导入，一种按需导入。
如果对打包后的文件大小不是很在乎，使用完整导入会更方便。

``````main.js
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

但对打包后的文件大小有严格要求的可以使用按需导入，按需导入组件需要引入两款插件unplugin-vue-components 和 unplugin-auto-import，导入配置好后在页面直接使用就行。

NPM命令：npm install -D unplugin-vue-components unplugin-auto-import

``````vite.config.js
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()],
    }),
  ],
})

element-plus的国际化

在使用# DatePicker 日期选择器和# DateTimePicker 日期时间选择器时，内部的日期默认都是英文显示的，想要转换为中文需要配置国际化设置。

全局配置

Element Plus 提供了全局配置国际化的配置，但在项目打包时，zh-cn将会占用很大的空间。

``````main.js
import ElementPlus from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

app.use(ElementPlus, {
  locale: zhCn,
})

局部配置

Element Plus 还提供了一个 Vue 组件 ConfigProvider 用于全局配置国际化的设置。

<template>
  <el-config-provider :locale="locale">
    <app />
  </el-config-provider>
</template>

<script>
  import { defineComponent } from 'vue'
  import { ElConfigProvider } from 'element-plus'

  import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

  export default defineComponent({
    components: {
      ElConfigProvider,
    },
    setup() {
      return {
        locale: zhCn,
      }
    },
  })
</script>

element-plus的form表单校验规则的使用

需求：form表单的检验规则设置，包括下拉框，日期范围选择，输入框等，由于官网使用的是TS语法，vue实现不需要定义其类型，通过const formRef= ref(null)，然后通过formRef.value来获取form节点，通过formRef.value.validate()获取form节点的校验规则。之前被绕了好久。

<template>
  <el-form :model="form" ref="formRef" :rules="rules" label-width="120px">
        <el-form-item label="活动名称:" prop="ActName">
          <el-input v-model="form.ActName" placeholder="请输入活动名称" />
        </el-form-item>
        <el-form-item label="活动分类:" prop="ActCategory">
          <el-select v-model="form.ActCategory" placeholder="请选择活动类型">
            <el-option label="下单奖励红包" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="活动有效时间:" prop="time">
          <el-date-picker
            v-model="form.time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item label="活动金额:" prop="TotalAmount">
          <el-input v-model="form.TotalAmount" />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="createClick">创 建</el-button>
        </el-form-item>
      </el-form>
</template>

<script setup>
import { reactive, ref } from "vue";
const formRef = ref(null);
const form = reactive({
  ActName: "",
  ActCategory: "",
  BeginTime: "",
  EndTime: "",
  TotalAmount: "",
  time: [],
})
// form表单的校验规则
const rules = reactive({
  ActName: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
  ActCategory: [
    {
      required: true,
      message: "请选择活动类型",
      trigger: "change",
    },
  ],
  TotalAmount: [
    {
      required: true,
      message: "请输入活动金额",
      trigger: "blur",
    },
  ],
  time: [
    {
      type: "array",
      required: true,
      message: "请选择活动有效时间",
      trigger: "change",
    },
  ],
});

// 创建活动事件
const createClick = () => {
  formRef.value.validate(async (isValid, invalidFields) => {
    if (isValid) {
      console.log(tableData.value);
      if (tableData.value.length === 0) {
        ElMessage({
          message: "配置信息不能为空",
          type: "warning",
        });
        return;
      }
      const params = {
        ActName: form.ActName,
        ActCategory: form.ActCategory,
        BeginTime: form.time[0],
        EndTime: form.time[1],
        TotalAmount: form.TotalAmount,
        ActConfigs: tableData.value,
      };
      const loading = ElLoading.service({
        lock: true,
        text: "Loading",
        background: "Transparent",
      });
      const res = await actCreate(params);
      if (res.result) {
        loading.close();
        ElMessage({
          message: res.msg,
          type: "success",
        });
        formRef.value.resetFields(); //清空表单
      } else {
        loading.close();
        ElMessage.error(res.msg);
      }
    } else {
      console.log("验证不通过,不能提交,请检查");
    }
  });
};
</script>

element-plus的table表格的使用

需求：对接口获取的tableData值进行修改和装饰

//修改表格单行数据：scope.row
<template #default="scope">
    <span>{{ state.partnerTextList[scope.row.PartnerId] }}</span>
</template>

<el-table :data="tableData" border style="width: 100%">
    <el-table-column
      prop="MinAmount"
      label="奖励"
      width="150"
      align="center"
    >
      <template #default="scope">
        <el-text class="mx-1" type="danger">{{
          scope.row.MinAmount
        }}</el-text>
      </template>
    </el-table-column>
    <el-table-column
      prop="MaxLimitAmount"
      label="金额"
      width="150"
      align="center"
    >
      <template #default="scope">
        <el-text class="mx-1" type="danger">{{
          scope.row.MaxLimitAmount
        }}</el-text>
      </template></el-table-column
    >
    <el-table-column fixed="right" label="操作" width="150" align="center">
      <template #default="scope">
        <el-button
          type="primary"
          plain
          size="small"
          @click="handleClick(scope.row)"
          >编辑</el-button
        >
        <el-button
          type="danger"
          plain
          size="small"
          @click="deleteClick(scope.row)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>

跨域配置

这是配置跨域代理之后的vite.config.js的文件。然后通过axios去请求数据。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import { resolve } from 'path';

const pathResolve = (dir) => resolve(__dirname,".",dir);

// https://vitejs.dev/config/
export default defineConfig(({mode}) => ({
  plugins: [
    vue(),
    // 按需引入组件配置
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  base: './', // 这里更改打包相对绝对路径
  resolve: {
      // 起别名
      alias: [{find:"@", replacement:pathResolve("src")}]
  },
  server: {
    open: true,//是否自动打开浏览器，可选项
    cors: true,//允许跨域。
    // 设置代理
    proxy: {
      // 将请求代理到另一个服务器
      '/api': {
        // target: loadEnv(mode , process.cwd()).VITE_BASE_URL, //配置全局环境变量
        target: 'http://office-uat.91vfeng.com/',//这是你要跨域请求的地址前缀
        changeOrigin: true,//开启跨域
        rewrite: path => path.replace(/^\/api/, ''),//去除前缀api
      }
    }
  },
}))

axios的封装

axios是用来实现前后端数据交互的，下面是常用的axios封装，包括了请求头、状态码、请求超时时间、请求方式、请求拦截器和响应拦截器等的封装。

在src目录下创建request/index.js文件

// 引入axios
import axios from 'axios'
// 引入qs模块，对数据进行序列化
import QS from 'qs'
// 引入storage模块，操作token
// import { session } from '@/utils/storage.js'

// 请求超时时间
axios.defaults.timeout = 10000
// 跨域访问的请求地址
axios.defaults.baseURL = '/api'
// 请求拦截器
axios.interceptors.request.use(
    config => {
        // 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了
        // 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断
        // const token = session.get('Token')
        // token && (config.headers.Authorization = token)
        // if(config.method.toUpperCase() === 'POST') {
        //   config.headers['Content-Type'] = 'application/json;charset=utf-8'
        // }
        return config
    },
    error => {
        return Promise.error(error)
    })
// 响应拦截器
axios.interceptors.response.use(
    response => {
        // console.log(response)
        if (response.status === 200) {
            return Promise.resolve(response)
        } else {
            return Promise.reject(response)
        }
    },
    // 服务器状态码不是200的情况
    error => {
        if (error.response.status) {
            switch (error.response.status) {
                case 500:
                    showFailToast('网错错误，请稍后再试！')
                    break
                case 404:
                    showFailToast('网错错误，请稍后再试！')
                    break
                // 其他错误，直接抛出错误提示
                default:
                    console.log(error.response.data.message)
            }
            return Promise.reject(error.response)
        }
    }
)

/**
 * get方法，对应get请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
export function get(url, params) {
    return new Promise((resolve, reject) => {
        axios.get(url, {
            params: params
        })
            .then(res => {
                resolve(res.data)
            })
            .catch(err => {
                reject(err.data)
            })
    })
}
/**
* post方法，对应post请求
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
*/
export function post(url, params) {
    return new Promise((resolve, reject) => {
        axios.post(url, params)
            .then(res => {
                resolve(res.data)
            })
            .catch(err => {
                reject(err.data)
            })
    })
}

api接口的使用

在src目录下创建aip/index.js文件

import { get, post } from "../request/index"

// 获取数据
export const getList = (params) => post('/GetList', params)

axios和ajax的不同

Ajax 是原生的 JavaScript 技术，通过 XMLHttpRequest 对象向后端发送请求并获取数据。而 axios 是基于 Promise 的 HTTP 客户端，使用更加简洁方便，支持浏览器和 Node.js 环境。

// axios默认为同步的,不是和ajax一样异步请求，
// axios返回成功状态会以html方式,而不是类似ajax的json格式，
// axios返回json添加如下配置
axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'
ajax：
  无刷新更新数据。（最大优点）
  异步与服务器通信，从而可不打断用户的操作
  前后端负载平衡，原则是按需取数据
  其所基于的标准被广泛支持
  界面与应用分离
axios：
  在浏览器中创建 XMLHttpRequests
  支持Promise API
  转换请求和响应数据
  自动转换成JSON数据格式
  在node.js则创建http请求
  支持拦截请求和响应
  取消请求
  客户端支持防御XSRF

vite开发环境配置

在项目或产品的迭代过程中，通常会有多套环境，常见的有：

• dev：开发环境
• sit：集成测试环境
• uat：用户接收测试环境
• pre：预生产环境
• prod：生产环境

//在项目根目录下（与package.json同级）新建配置文件 .env.development
//开发环境下的配置文件,执行npm run dev命令，会自动加载.env.development文件

//会覆盖.env这个文件里定义的环境变量
NODE_ENV = development
VITE_NAME='开发环境'
VITE_BASE_URL='/ap'

//在项目根目录下（与package.json同级）新建配置文件 .env.production
//生产环境下的配置文件,执行npm run build命令，会自动加载.env.production文件
//会覆盖 .env这个文件里定义的环境变量。

NODE_ENV = production
VITE_NAME='生产环境'
VITE_BASE_URL = 'http://xxxxxx/api'

//在package.json 文件中的配置
"scripts": {
"dev": "vite --mode development",
"build": "vite build --mode production", 
"start": "vite --mode production",
"build:env": "vite build --mode development"
}

//具体使用 在页面里直接获取方法 console.log(import.meta.env[name])
".env.[name]"是可以自定义的，在package.json里面做对应的名称修改。
根据Vite的约定规则，只有以“VITE_”开头的变量才会在客户端被捕获
捕获方式为：import.meta.env.{参数名}，然后重新启动服务
执行 npm run dev 时候，vite自动去读取.env.development文件里面的配置
执行 npm run build 进行打包，vite自动将.env.production 的内容打包进去。