1、創(chuàng)建項目,使用vite

????npm init vite@latest 項目名
????選擇 vue3
????選擇 javascript
????cd ?項目名 ：進入項目文件夾
????npm i ： 安裝依賴包
????npm run dev ?：運行項目

2、項目架構(gòu)搭建

2.1 創(chuàng)建對應(yīng)文件夾
如下圖

2.2 下載如下安裝包：
單獨安裝包： npm i axios ?vuex ?vue-router
（同時安裝多個包，寫上安裝包的名稱，以空格分隔即可）

2.3 路由與main.js的關(guān)聯(lián)
router/index.js 文件內(nèi)容：

main.js中引用路由

2.4 store與main.js的關(guān)聯(lián)
store/index.js 文件內(nèi)容

main.js中引入store

2.5 axios 的封裝
將 axios 封裝在 utils/axios.js 文件中

3、session 登錄前端與后端設(shè)置
本項目采用session登錄 ，需要進行相關(guān)設(shè)置，才可使用，配置如下 ：
參考鏈接：https://bugshouji.com/mybug3/t23251

3.1 前端設(shè)置
axios文件中，設(shè)置 axios.defaults.withCredentials=true; ?已經(jīng)在axios.js中添加

3.2 后端設(shè)置(nodejs)
跨域設(shè)置，且設(shè)置Access-Control-Allow-Credentials 為true;

除此之外注意：當前端配置withCredentials=true時, 后端配置Access-Control-Allow-Origin不能為*, 必須是相應(yīng)地址否則報錯：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 列名的配置信息
在設(shè)置columns屬性時，其中的寬度字段（width）必須設(shè)置值（只能是數(shù)字類型）且每一列都要設(shè)置，不然會出現(xiàn)數(shù)據(jù)不顯示或是只顯示一列的情況。

5.2 自定義單元格內(nèi)容

自定義單元格渲染器的字段是cellRenderer，類型為VueComponent /(props: CellRenderProps) => VNode

方法一:主要實現(xiàn) h 函數(shù)：

示例：直接從UI框架中引入，然后在h函數(shù)的第一個參數(shù)中傳入組件，需要注意的是，如果第一個參數(shù)直接傳入字符串如’ElTag’，是渲染無效的，普通的html標簽是可以的，第三個參數(shù)如果傳入的數(shù)據(jù)是字符串文本，控制臺會有警告信息，提示換為函數(shù)形式更佳

方法二：使用jsx的方式就比較簡捷了，需要在script標簽設(shè)置lang屬性等于jsx，在cellRenderer函數(shù)中可以直接使用jsx的語法和UI組件（還有自定義組件），
示例如下：

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

5.3 刪除的實現(xiàn)
需要提示，需要使用 import 引入對應(yīng)的插件
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官網(wǎng)一致

或者采用 jsx 的語法，使用 {} 顯示變量

6、el-pagination 分頁組件

total , currentPage,pageSize 均為計算屬性，
代碼如下:

@current-change="handleCurrentChange"，當頁發(fā)生變化 ,執(zhí)行handleCurrentChange方法

store/admin.js

7、service 對增刪改查實現(xiàn)中，需要的請求
注： axios()方法，data傳遞的參數(shù)以body的形式接收，params傳遞的參數(shù)，會顯示在url后面，使用query的形式接收。
service/admin.js

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

8、hooks 實現(xiàn)增刪改查所有業(yè)務(wù)的文件

8.1 路由的相關(guān)hook
1.?useRouter() 獲取路由對象

2.?useRoute() 獲取當前路由對象

??

8.2 useStore 使用vuex的hook

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

完整代碼：

9、組件結(jié)構(gòu)與路由設(shè)置

注：某個默認路徑設(shè)置顯示的組件 ，將path設(shè)置為空字符串即可，代碼如下：
{
path: '',
name: 'adminList',
component: () => import('../components/admin/list.vue'),
},

router/index.js 文件

完整如下：

10、添加與修改相關(guān)知識點

10.1 使用reactive 結(jié)合toRefs綁定數(shù)據(jù)

10.2 綁定單選按鈕
將一組的單選按鈕綁定同一個變量, 當變量的值與單選按鈕的value值相同時就會被選中。
對應(yīng)變量的值，為最后被選中按鈕的value值

10.3 綁定下拉列表
注意:
1. isDelete的類型，要為字符串，如果數(shù)據(jù)為number 需要進行轉(zhuǎn)換
2. 使用 label 為顯示數(shù)據(jù)，不要寫在el-option之間；如：<el-option value="0">刪除</el-option>綁定數(shù)據(jù)會出錯
3. 綁定的數(shù)據(jù) isDetele 是對應(yīng)項的value值

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

關(guān)注我，一起學習吧?