vue3+elementplus(js+vuex)实现增删改查

1、创建项目,使用vite

    npm init vite@latest 项目名
    选择 vue3
    选择 javascript
    cd  项目名 ：进入项目文件夹
    npm i ： 安装依赖包
    npm run dev  ：运行项目

2、项目架构搭建

2.1 创建对应文件夹
如下图

2.2 下载如下安装包：
单独安装包： npm i axios  vuex  vue-router
（同时安装多个包，写上安装包的名称，以空格分隔即可）

2.3 路由与main.js的关联
router/index.js 文件内容：

main.js中引用路由

2.4 store与main.js的关联
store/index.js 文件内容

main.js中引入store

2.5 axios 的封装
将 axios 封装在 utils/axios.js 文件中

3、session 登录前端与后端设置
本项目采用session登录 ，需要进行相关设置，才可使用，配置如下 ：
参考链接：https://bugshouji.com/mybug3/t23251

3.1 前端设置
axios文件中，设置 axios.defaults.withCredentials=true;  已经在axios.js中添加

3.2 后端设置(nodejs)
跨域设置，且设置Access-Control-Allow-Credentials 为true;

除此之外注意：当前端配置withCredentials=true时, 后端配置Access-Control-Allow-Origin不能为*, 必须是相应地址否则报错：Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiat

4、element-plus引入

下载

npm install element-plus

main.js中引入

5、element-plus el-tableV2 虚拟化表格

5.1 columns 列名的配置信息
在设置columns属性时，其中的宽度字段（width）必须设置值（只能是数字类型）且每一列都要设置，不然会出现数据不显示或是只显示一列的情况。

5.2 自定义单元格内容

自定义单元格渲染器的字段是cellRenderer，类型为VueComponent /(props: CellRenderProps) => VNode

方法一:主要实现 h 函数：

示例：直接从UI框架中引入，然后在h函数的第一个参数中传入组件，需要注意的是，如果第一个参数直接传入字符串如’ElTag’，是渲染无效的，普通的html标签是可以的，第三个参数如果传入的数据是字符串文本，控制台会有警告信息，提示换为函数形式更佳

方法二：使用jsx的方式就比较简捷了，需要在script标签设置lang属性等于jsx，在cellRenderer函数中可以直接使用jsx的语法和UI组件（还有自定义组件），
示例如下：

使用 jsx 的配置参考链接：https://bugshouji.com/shareweb/t23249

5.3 删除的实现
需要提示，需要使用 import 引入对应的插件
import { ElMessage, ElMessageBox } from "element-plus";

5.4 icon 图标的正常显示配置

参考:https://bugshouji.com/shareweb/t23250
因element-plus/icons改变成了svg，故显示 icon 需要进行如下配置：

1.安装 @element-plus/icons-vue
npm install @element-plus/icons-vue


2. 使用

在引用图标的页面中将要使用的图标引入，作为js对象，代码如下：

使用方式和elemunt-ui3官网一致

或者采用 jsx 的语法，使用 {} 显示变量

6、el-pagination 分页组件

total , currentPage,pageSize 均为计算属性，
代码如下:

@current-change="handleCurrentChange"，当页发生变化 ,执行handleCurrentChange方法

store/admin.js

7、service 对增删改查实现中，需要的请求
注： axios()方法，data传递的参数以body的形式接收，params传递的参数，会显示在url后面，使用query的形式接收。
service/admin.js

service/index.js 组合所有的service文件

8、hooks 实现增删改查所有业务的文件

8.1 路由的相关hook
1. useRouter() 获取路由对象

2. useRoute() 获取当前路由对象

8.2 useStore 使用vuex的hook

import { useStore } from 'vuex'
const { getters, dispatch } = useStore();

完整代码：

9、组件结构与路由设置

注：某个默认路径设置显示的组件 ，将path设置为空字符串即可，代码如下：
{
path: '',
name: 'adminList',
component: () => import('../components/admin/list.vue'),
},

router/index.js 文件

完整如下：

10、添加与修改相关知识点

10.1 使用reactive 结合toRefs绑定数据

10.2 绑定单选按钮
将一组的单选按钮绑定同一个变量, 当变量的值与单选按钮的value值相同时就会被选中。
对应变量的值，为最后被选中按钮的value值

10.3 绑定下拉列表
注意:
1. isDelete的类型，要为字符串，如果数据为number 需要进行转换
2. 使用 label 为显示数据，不要写在el-option之间；如：<el-option value="0">删除</el-option>绑定数据会出错
3. 绑定的数据 isDetele 是对应项的value值

苟有恒 , 何必三更眠五更起

关注我，一起学习吧