搭建一个 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 的内容打包进去。