搭建一个 Vite 项目
使用NPM：npm create vite@latest
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 的内容打包进去。
