Vue3项目实战（vue3+vite+pinia+element-plus+axios+mock)

一、项目先容

1、技能栈

• vue3+vite+vue-router
  
• pinia
  
• element-plus
  
• axios
  
• mock
  
• Echarts
  

2、业务功能

• 登录
  
• 首页
  
• 商品
  
• 用户管理
  

3、应用场景

• 举行后台管理项目的
  
• 根据不同用户的权限授予不同的功能
  

4、项目源码

xuyuan-upward 盼望每位大佬获取时候点个小小的赞！
二、项目实战

2.1、项目初始化

1、构建项目

1. # npm 7+，需要添加额外的 --：
2. npm create vite@latest my-vue-app -- --template vue

复制代码

2、安装成功后举行安装依靠

1. npm install

复制代码

3、修改路径替换符

1. import { defineConfig } from 'vite'
2. import vue from '@vitejs/plugin-vue'
4. // https://vite.dev/config/
5. export default defineConfig({
6.   plugins: [vue()],
7.   /* 添加的是别名 */
8.   resolve: {
9.     alias: {
10.       '@': '/src',
11.     },
12.   },
13. })

复制代码

4、引入element-plus依靠，axios，router
安装依靠内容过于简单，请自行取相关内容官网查看文档举行安装
element-plus官网
axios官网
router
2.2、项目实战

1、引入router配置

1. import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
2. const routes = [
3.   {
4.     path: '/',
5.     name: 'main',
6.     component: () => import('@/views/RootView.vue'),
7.     redirect: '/home',
8.     /* 访问 /home 时的行为
9. 当你访问 /home 时，会发生以下情况：
10. 匹配父路由：
11. 首先匹配到 path: '/' 的路由配置。
12. 由于 Main.vue 是父组件，它会被渲染。
13. 匹配子路由：
14. 在 Main.vue 内部的 <router-view> 中，会匹配到 path: '/home' 的子路由。
15. 因此，Home.vue 会在 Main.vue 的 <router-view> 中渲染。 */
16.     children: [
17.        {
18.         path: '/home',
19.         name: 'home',
20.         component: () => import('@/views/MainView.vue')
21.       },
22.     ]
23.   },
25. ]
26. const router = createRouter({
27.   history: createWebHistory(),
28.   routes
29. })
30. export default router

复制代码

接着还需要导入main.js一些配置文件

• 全局样式
  
• pinia等等
  

1. import { createApp } from 'vue'
2. import App from './App.vue'
3. // 导入全局样式
4. import "@/assets/less/index.less"
5. import router from '@/router'
6. import ElementPlus from 'element-plus'
7. // 导入element-plus组件的全局样式
8. import 'element-plus/dist/index.css'
9. import * as ElementPlusIconsVue from '@element-plus/icons-vue'
10. import { createPinia } from 'pinia'
11. import { useAllDataStore } from '@/stores'
12. /* 引入mock */
13. import "@/apis/mock.js"
14. /* 引入apis 管理请求接口 */
15. import apis from "@/apis/apis.js"
16. const pinia = createPinia()
17. const app = createApp(App)
18. /* 定义全局配置使用 */
19. app.config.globalProperties.$apis = apis
21. app.use(ElementPlus)
22. app.use(pinia)
23. // localStorage.removeItem("store")
24. const store = useAllDataStore()
25. store.addRoutes(router, "refresh")
26. app.use(router)
28. /*function isRoute(to) {
29.     let routes = router.getRoutes()
30.     console.log("routes", routes);
31.     let resFil = routes.filter(item =>
32.         /* 相当于return */
33.         item.path === to.path
34.     )
35.     /*  let resFil = routes.filter(item => {
36.      相当于一段代码，只有return为true时候才会保留对应的数据
37.      item.path === to.path}
38.       
39.      ) */
40.     return resFil
41. }
42. /*
43. router.beforeEach((to, from, next) => {
44.     console.log("store.state.token", store.state.token);
45.     if (!store.state.token && to.path !== '/login') {
46.         console.log("to.path1", to.path);
47.         next({ name: 'login' })
48.     }
49.     if (store.state.token && to.path === '/login') {
50.         console.log("to.path2", to.path);
51.         next({ name: 'home' })
52.     }
53.     if (store.state.token && to.path !== '/login') {
54.         console.log("to.path3", to.path);
55.         console.log("isRoute", isRoute(to));
56.         if (isRoute(to).length === 0) {
57.             console.log("to.path3", to.path);
58.             next({ name: '404' })
59.         }
60.     }
61.     console.log("to.path4", to.path);
62.     next()
63. })
64. */
65. for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
66.     app.component(key, component)
67. }
68. app.mount('#app')

复制代码

2、App.vue组件引入

1. <script setup>
2. </script>
4. <template>
5.   <div class="app">
6.     <router-view />
7.   </div>
8. </template>
10. <style >
11. #app,
12. .app {
13.   width: 100%;
14.   height: 100%;
15.   overflow: hidden;
16. }
17. </style>

复制代码

3、创建RootView根路由组件

1. <template>
2.   <div class="common-layout">
3.     <el-container class="main-container">
4.       <div class="aside-container">
5.         <CommonAside />
6.       </div>
7.       <el-container class="right-container">
8.         <el-header style="height: 40px;">
9.           <CommonHeader />
10.         </el-header>
11.         <el-divider style="margin: 5px 0;" />
12.         <CommonTab />
13.         <el-main>
14.           <router-view />
15.         </el-main>
16.         <el-footer>
17.           <Footer />
18.         </el-footer>
19.       </el-container>
20.     </el-container>
21.   </div>
22. </template>
24. <script setup>
25. import { reactive, toRefs, onMounted, nextTick } from 'vue'
26. import CommonAside from '@/components/CommonAside.vue';
27. import CommonHeader from '@/components/CommonHeader.vue';
28. import CommonTab from '@/components/CommonTab.vue';
29. import Footer from '@/components/Footer.vue';
30. </script>
31. <style lang='less' scoped>
32. .common-layout,
33. .main-container,
34. right-container {
35.   height: 100%;
36.   background-color: #f0f2f5;
38.   .el-main {
39.     padding: 8px;
40.   }
41. }
42. </style>

复制代码

4、依次创建

三个普通组件 CommonAside CommonHeader Footer 以及每个页面的路由组件 router-view

• CommonAside.vue
  

1. <template>
2.     <!-- default-active通常与对应的index相关 -->
3.     <el-aside :width="width">
4.         <el-menu text-color="#fff" background-color="#545c64" :collapse="isCollapse" :collapse-transition="false"
5.         :default-active="activeMenu"
6.             class="el-menu-vertical-demo">
7.             <div class="title">
8.                 <i class="iconfont icon-quanpingtai"> </i>
9.                 <h4 v-show="!isCollapse">许苑后台管理</h4>
10.             </div>
11.             <!-- 没有子菜单 -->
12.             <el-menu-item v-for="item in noChildren" :key="item.path" :index="item.path" @click="handleMenu(item)">
13.                 <component :is="item.icon" class="icon" />
14.                 <span style="margin-left: 10px">{{ item.label }}</span>
15.             </el-menu-item>
16.             <!-- 有子菜单 -->
17.             <el-sub-menu v-for="item in hasChildren" :key="item.path" :index="item.path">
18.                 <template #title>
19.                     <component :is="item.icon" class="icon" />
20.                     <span style="margin-left: 10px">{{ item.label }}</span>
21.                 </template>
22.                 <el-menu-item-group>
23.                     <el-menu-item v-for="(subItem) in item.children" :index="subItem.path" :key="subItem.path">
24.                         <component :is="subItem.icon" class="icon" />
25.                         <span>{{ subItem.label }}</span>
26.                     </el-menu-item>
27.                 </el-menu-item-group>
28.             </el-sub-menu>
29.         </el-menu>
30.     </el-aside>
31. </template>
33. <script setup>
34. import { ref, reactive, toRefs, onMounted, nextTick, computed } from 'vue'
35. import { useRouter, useRoute } from 'vue-router'
36. import { useAllDataStore } from '@/stores'
37. const store = useAllDataStore()
38. const router = useRouter()
39. const route = useRoute()
40. // 测试数据，初始化，刚开始可以使用，后续通过配置路由权限获取
41. /* const list = ref([
42.     {
43.         path: '/home',
44.         name: 'home',
45.         label: '首页',
46.         icon: 'house',
47.         url: 'Home'
48.     },
49.     {
50.         path: '/mall',
51.         name: 'mall',
52.         label: '商品管理',
53.         icon: 'ShoppingBag',
54.         url: 'Mall'
55.     },
56.     {
57.         path: '/user',
58.         name: 'user',
59.         label: '用户管理',
60.         icon: 'user',
61.         url: 'User'
62.     },
63.     {
64.         path: 'other',
65.         label: '其他',
66.         icon: 'location',
67.         children: [
68.             {
69.                 path: '/page1',
70.                 name: 'page1',
71.                 label: '页面1',
72.                 icon: 'setting',
73.                 url: 'Page1'
74.             },
75.             {
76.                 path: '/page2',
77.                 name: 'page2',
78.                 label: '页面2',
79.                 icon: 'setting',
80.                 url: 'Page2'
81.             }
82.         ]
83.     }
84. ])
85. */
86. const list = computed(() => store.state.menuList)
87. const noChildren = computed(() => list.value.filter(item => !item.children))
88. const hasChildren = computed(() => list.value.filter(item => item.children))
89. const width = computed(() => store.state.isCollapse ? '60px' : '200px')
90. // 涉及组件之间的传递 => 使用pinia进行各组件之间的传递
91. const isCollapse = computed(() => store.state.isCollapse)
92. const activeMenu = computed(() => route.path)
93. const handleMenu = (item) => {
94.     if (item.children) {
95.         return
96.     }
97.     router.push(item.path)
98.     store.selectMenu(item)
99. }
100. </script>
101. <style lang='less' scoped>
102. .icon {
103.     width: 18px;
104.     height: 18px;
105.     margin-right: 5px;
106. }
108. .el-aside {
109.     background-color: #545c64;
110.     height: 100vh;
112.     .el-menu {
113.         border-right: none;
115.         .title {
116.             display: flex;
117.             align-items: center;
118.             justify-content: center;
119.         }
121.         h4 {
122.             color: #fff;
123.             font-size: 17px;
124.             margin: 20px;
125.             font-weight: 500px;
126.             text-align: center;
127.         }
130.     }
131. }
132. </style>

复制代码

• CommonHeader.vue
  

1. <template>
2.     <div class="header">
3.         <div class="l-header">
4.             <el-button size="small" @click="store.state.isCollapse = !store.state.isCollapse">
5.                 <el-icon>
6.                     <Menu />
7.                 </el-icon>
8.             </el-button>
9.         
10.         </div>
11.         <div class="r-header">
12.             <el-dropdown>
13.                 <span class="el-dropdown-link">
14.                     <img src="@/assets/images/xuyuan.jpg" alt="" class="r-header-avatar">
15.                 </span>
16.                 <template #dropdown>
17.                     <el-dropdown-menu>
18.                         <el-dropdown-item>个人中心</el-dropdown-item>
19.                         <el-dropdown-item @click="handlerLogout">退出登录</el-dropdown-item>
20.                     </el-dropdown-menu>
21.                 </template>
22.             </el-dropdown>
24.         </div>
26.     </div>
27. </template>
29. <script setup>
30. import { ref, reactive, toRefs, onMounted, nextTick, computed } from 'vue'
31. import { useAllDataStore } from '@/stores'
32. import { ArrowRight } from '@element-plus/icons-vue'
33. import { useRouter } from 'vue-router'
34. const store = useAllDataStore()
35. const router = useRouter()
36. let currentPath = computed(() => {
37.     console.log("store.state.currentMenu", store.state.currentMenu);
38.     return store.state.currentMenu;
39. })
40. const handlerLogout = () => {
41.     store.clean()
42.     router.push('/login')
43. }
44. </script>
45. <style lang='less' scoped>
46. .header {
47.     width: 100%;
48.     height: 100%;
49.     display: flex;
50.     justify-content: space-between;
51.     align-items: center;
53.     .l-header {
54.         display: flex;
55.         justify-content: center;
56.         align-items: center;
58.         .el-button {
59.             margin-right: 15px;
60.         }
61.     }
62. }
64. .r-header-avatar {
65.     width: 30px;
66.     height: 30px;
67.     border-radius: 50%;
68.     margin-right: 10px;
69. }
70. </style>
72.     <!--  -- 面包屑功能 <el-breadcrumb :separator-icon="ArrowRight">
73.                
74.                 <el-breadcrumb-item :to=" '/' ">首页</el-breadcrumb-item>
75.                 <el-breadcrumb-item v-if="currentPath" :to="currentPath.path" @cl>{{ currentPath.label
76.                 }}
77.                 </el-breadcrumb-item>
78.             </el-breadcrumb> -->

复制代码

• Footer.vue
  

1. <template>
2.     <div class="footer">
3.         <a href="https://github.com/xuyuan-upward" class="toLearn">
4.             <span> <i class="iconfont icon-github"></i>站长： 许苑向上</span>
5.         </a>
6.         <a href="https://blog.csdn.net/a147775" class="toLearn">
7.             <span> <i class="iconfont icon-bokeyuan"></i>博客： xuyuan-upward</span>
8.         </a>
9.         <a href="https://user.qzone.qq.com/2517115657/main" class="toLearn">
10.             <span> <i class="iconfont icon-shouye"></i>联系方式： 许苑向上</span>
11.         </a>
12.     </div>
13. </template>
15. <script setup>
16. import { ref, reactive, toRefs, onMounted, nextTick } from 'vue'
17. </script>
18. <style lang='less' scoped>
19. .toGithub {
20.     text-decoration: none;
21.     font-size: 14px;
22.     font-weight: bold;
23.     padding: 10px 0;
24.     display: block;
25.     text-align: center;
26.     border-radius: 5px;
27.     transition: all 0.3s ease-in-out;
28. }
30. .iconfont {
31.     margin-right: 5px;
32. }
34. .footer {
35.     height: 100%;
36.     display: flex;
37.     justify-content: center;
39.     a {
40.         margin-right: 40px;
41.         color: #00000073;
43.         span {
44.             line-height: 60px;
45.         }
46.     }
47. }
48. </style>

复制代码

• MainView.vue路由组件
  

1. <template>
2.     <div class="home">
3.         <el-row>
4.             <!-- 左侧 -->
5.             <el-col :span="7">
6.                 <div class="l-user">
7.                     <el-card style="max-width: 480px" shadow="hover" class="user-info">
8.                         <div class="user">
9.                             <img src="@/assets/images/xuyuan.jpg" alt=""
10.                                 style="width: 100px;height: 100px;border-radius: 50%;margin-right: 10px;">
11.                             <div class="userInfo">
12.                                 <h>admin</h>
13.                                 <p style="margin-top: 20px; color: #999;">超级管理员</p>
14.                             </div>
15.                         </div>
16.                         <el-divider />
17.                         <div class="login-info">
18.                             <p>上次登录时间：<span>2024-11-18 1:00:00</span></p>
19.                             <p style="margin-top: 10px;">上次登录地点：<span>广西</span></p>
20.                         </div>
21.                     </el-card>
23.                     <el-card style="max-width: 480px" shadow="hover" class="user-table">
24.                         <el-table :data="tableData" style="width: 100%">
25.                             <!-- 遍历val是值 key是键 -->
26.                             <el-table-column v-for="(val, key) in tableLabel" :key="key" :prop="key" :label="val">
27.                             </el-table-column>
28.                         </el-table>
29.                     </el-card>
30.                 </div>
31.             </el-col>
32.             <!-- 右侧 -->
33.             <el-col :span="17">
34.                 <div class="r-echart">
35.                     <div class="top">
36.                         <el-card v-for="(item) in counterData" :key="item.name"
37.                             :body-style="{ padding: '20px', display: 'flex' }" shadow="hover">
38.                             <component :is="item.icon" class="icons" :style="{ background: item.color }" />
39.                             <div class="detail">
40.                                 <p class="num">￥{{ item.value }}</p>
41.                                 <p class="txt">￥{{ item.name }}</p>
42.                             </div>
43.                         </el-card>
44.                     </div>
45.                     <div class="bottom">
46.                         <!-- 三个图表容器 -->
47.                         <div class="echart-top">
48.                             <el-card shadow="hover">
49.                                 <div ref="echart" style="height: 220px;"></div>
50.                             </el-card>
51.                         </div>
52.                         <div class="echart-bottom">
53.                             <el-card shadow="hover">
54.                                 <div ref="userEchart" style="height: 140px"></div>
55.                             </el-card>
56.                             <el-card shadow="hover">
57.                                 <div ref="videoEchart" style="height: 140px"></div>
58.                             </el-card>
59.                         </div>
60.                     </div>
61.                 </div>
62.             </el-col>
64.         </el-row>
65.     </div>
66. </template>
68. <script setup>
69. import { ref, reactive, toRefs, onMounted, nextTick, getCurrentInstance } from 'vue'
70. import * as echarts from 'echarts';
72. //这个tableData是假数据，等会我们使用axios请求mock数据
73. const { proxy } = getCurrentInstance()
74. const tableData = ref([])
75. const counterData = ref([])
76. //observer 接收观察器实例对象
77. const observer = ref(null)
79. //这个是折线图和柱状图 两个图表共用的公共配置
80. const xOptions = reactive({
81.     // 图例文字颜色
82.     textStyle: {
83.         color: "#333",
84.     },
85.     legend: {},
86.     grid: {
87.         left: "20%",
88.     },
89.     // 提示框
90.     tooltip: {
91.         trigger: "axis",
92.     },
93.     xAxis: {
94.         type: "category", // 类目轴
95.         data: [],
96.         axisLine: {
97.             lineStyle: {
98.                 color: "#17b3a3",
99.             },
100.         },
101.         axisLabel: {
102.             interval: 0,
103.             color: "#333",
104.         },
105.     },
106.     yAxis: [
107.         {
108.             type: "value",
109.             axisLine: {
110.                 lineStyle: {
111.                     color: "#17b3a3",
112.                 },
113.             },
114.         },
115.     ],
116.     color: ["#2ec7c9", "#b6a2de", "#5ab1ef", "#ffb980", "#d87a80", "#8d98b3"],
117.     series: [],
118. })
119. const pieOptions = reactive({
120.     tooltip: {
121.         trigger: "item",
122.     },
123.     legend: {},
124.     color: [
125.         "#0f78f4",
126.         "#dd536b",
127.         "#9462e5",
128.         "#a6a6a6",
129.         "#e1bb22",
130.         "#39c362",
131.         "#3ed1cf",
132.     ],
133.     series: []
134. })
136. const getTableData = async () => {
137.     const data = await proxy.$apis.getTableData()
138.     console.log("home,tableData获取到的数据：", data);
139.     tableData.value = data.tableData
140. }
141. const getCounterData = async () => {
142.     const data = await proxy.$apis.getCounterData()
143.     console.log("home,counterData获取到的数据：", data);
144.     counterData.value = data
145. }
147. const getChartData = async () => {
148.     // 获取图标信息 ，解构
149.     const { orderData, userData, videoData } = await proxy.$apis.getChartData()
150.     console.log("home,orderData获取到的数据：", orderData);
151.     //对第一个图表的xAxis和series赋值
152.     xOptions.xAxis.data = orderData.date
153.     xOptions.series = Object.keys(orderData.data[0]).map(val => {
154.         return {
155.             name: val,
156.             data: orderData.data.map(item => item[val]),
157.             type: "line"
158.         }
159.     }
160.     )
161.     //one               echarts.init方法初始化ECharts实例，需要传入dom对象
162.     const OneEcharts = echarts.init(proxy.$refs["echart"])
163.     //setOption方法应用配置对象
164.     OneEcharts.setOption(xOptions)
165.     //对第二个图表的xAxis和series赋值
166.     xOptions.xAxis.data = userData.map((item) => item.date)
167.     xOptions.series = [
168.         {
169.             name: "新增用户",
170.             data: userData.map((item) => item.new),
171.             type: "bar",
172.         },
173.         {
174.             name: "活跃用户",
175.             data: userData.map((item) => item.active),
176.             type: "bar",
177.         }
178.     ]
179.     //two
180.     const TwoEcharts = echarts.init(proxy.$refs["userEchart"])
181.     TwoEcharts.setOption(xOptions)
183.     //对第三个图表的series赋值
184.     pieOptions.series = [
185.         {
186.             data: videoData,
187.             type: "pie",
188.         },
189.     ]
190.     //three
191.     const ThreeEcharts = echarts.init(proxy.$refs["videoEchart"])
192.     ThreeEcharts.setOption(pieOptions);
194.     //ResizeObserver 如果监视的容器大小变化，如果改变会执行传递的回调
195.     observer.value = new ResizeObserver(entries => {
196.         OneEcharts.resize()
197.         TwoEcharts.resize()
198.         ThreeEcharts.resize()
199.     })
200.     //如果这个容器存在
201.     if (proxy.$refs["echart"]) {
202.         //则调用监视器的observe方法，监视这个容器的大小
203.         observer.value.observe(proxy.$refs["echart"]);
204.     }
205. }
207. onMounted(() => {
208.     getTableData()
209.     getCounterData()
210.     getChartData()
211.     console.log(proxy);
212. })
213. const tableLabel = ref({
214.     name: "课程",
215.     todayBuy: "今日购买",
216.     monthBuy: "本月购买",
217.     totalBuy: "总购买",
218. })
221. </script>
222. <style lang='less' scoped>
223. .home {
224.     height: 100%;
225.     overflow: hidden;
227.     .l-user {
228.         .user-info {
229.             .user {
230.                 display: flex;
231.                 align-items: center;
233.                 .userInfo {
234.                     margin-left: 30px;
235.                 }
236.             }
238.             .login-info {
239.                 p {
240.                     font-size: 14px;
241.                     color: #999;
243.                     span {
244.                         color: #666;
245.                         margin-left: 30px;
246.                     }
247.                 }
248.             }
249.         }
251.         .user-table {
252.             margin-top: 50px;
253.         }
254.     }
256.     .r-echart {
257.         .top {
258.             display: flex;
259.             justify-content: space-between;
260.             flex-wrap: wrap;
262.             .el-card {
263.                 width: 30%;
264.                 margin-bottom: 10px;
265.                 margin-left: 20px;
267.             }
269.             .icons {
270.                 width: 50px;
271.                 height: 50px;
272.                 border-radius: 50%;
273.                 margin-right: 20px;
274.             }
276.             .detail {
277.                 display: flex;
278.                 flex-direction: column;
279.                 justify-content: center;
281.                 .num {
282.                     margin-bottom: 10px;
283.                 }
284.             }
287.         }
289.         .bottom {
290.             margin-left: 20px;
292.             .echart-top {
293.                 margin-bottom: 20px;
294.             }
296.             .echart-bottom {
297.                 display: flex;
298.                 justify-content: space-between;
299.                 align-items: center;
301.                 .el-card {
302.                     width: 48%;
304.                 }
305.             }
306.         }
308.     }
309. }
310. </style>

复制代码

• UserView.vue组件
  

1. <template>
2.     <div class="user">
3.         <div class="user-head">
4.             <el-button type="primary" @click="handleAdd">新增</el-button>
5.             <el-form :inline="true" :model="formData">
6.                 <el-form-item label="请输入">
7.                     <el-input placeholder="请输入姓名" v-model="formData.keyWord"></el-input>
8.                 </el-form-item>
9.                 <el-form-item>
10.                     <el-button type="primary" @click="handlerSearch">搜索</el-button>
11.                 </el-form-item>
12.             </el-form>
13.         </div>
14.         <div class="user-table">
15.             <el-dialog v-model="dialogVisible" :title="action == 'add' ? '新增用户' : '编辑用户'" width="35%"
16.                 :before-close="handleClose">
17.                 <!--需要注意的是设置了:inline="true"，
18.                 会对el-select的样式造成影响，我们通过给他设置一个class=select-
19.                 在css进行处理-->
20.                 <el-form :inline="true" :model="formUser" :rules="rules" ref="userForm">
21.                     <el-row>
22.                         <el-col :span="12">
23.                             <el-form-item label="姓名" prop="name">
24.                                 <el-input v-model="formUser.name" placeholder="请输入姓名" />
25.                             </el-form-item>
26.                         </el-col>
27.                         <el-col :span="12">
28.                             <el-form-item label="年龄" prop="age">
29.                                 <el-input v-model.number="formUser.age" placeholder="请输入年龄" />
30.                             </el-form-item>
31.                         </el-col>
32.                     </el-row>
33.                     <el-row>
34.                         <el-col :span="12">
35.                             <!-- 使用:inline="true"会对select造成影响，此时长度应该设置最大 -->
36.                             <el-form-item label="性别" prop="sex" style="width: 80%;">
37.                                 <el-select v-model="formUser.sex" placeholder="请选择" class="select-clean">
38.                                     <el-option label="男" :value="1" />
39.                                     <!-- 注意这里的 :value 表示绑定一个表达式即所谓的"1" 其实代表的是number类型1 -->
40.                                     <el-option label="女" :value="0" />
41.                                 </el-select>
42.                             </el-form-item>
43.                         </el-col>
44.                         <el-col :span="12">
46.                             <el-form-item label="出生日期" prop="birth">
47.                                 <el-date-picker v-model="formUser.birth" type="date" placeholder="请输入"
48.                                     style="width: 100%" />
49.                             </el-form-item>
50.                         </el-col>
51.                     </el-row>
52.                     <el-row>
53.                         <el-form-item label="地址" prop="addr">
54.                             <el-input v-model="formUser.addr" placeholder="请输入地址" />
55.                         </el-form-item>
56.                     </el-row>
57.                     <el-row style="justify-content: flex-end">
58.                         <el-form-item>
59.                             <el-button type="primary" @click="handleCancel">取消</el-button>
60.                             <el-button type="primary" @click="onSubmit">确定</el-button>
61.                         </el-form-item>
62.                     </el-row>
63.                 </el-form>
64.             </el-dialog>
65.             <el-table :data="tableData" style="width: 100%">
66.                 <el-table-column v-for="item in tableLabel" :key="item.prop" :prop="item.prop" :label="item.label"
67.                     :width="item.width" />
68.                 <el-table-column fixed="right" label="Operations" min-width="120">
69.                     <template #="scoped">
70.                         <el-button type="primary" size="small" @click="onEdit(scoped.row)">
71.                             编辑
72.                         </el-button>
73.                         <el-button type="danger" size="small" @click="onDelete(scoped.row)">删除</el-button>
74.                     </template>
75.                 </el-table-column>
76.             </el-table>
77.             <el-pagination layout="prev, pager, next" :total="config.total" @current-change="handlerChangePage"
78.                 class="page" />
79.         </div>
80.     </div>
81. </template>
83. <script setup>
84. import { ref, reactive, toRefs, onMounted, nextTick, getCurrentInstance } from 'vue'
85. import { ElMessage, ElMessageBox } from 'element-plus'
86. const { proxy } = getCurrentInstance()
87. const tableData = ref([])
88. const tableLabel = reactive([
89.     {
90.         prop: "name",
91.         label: "姓名",
92.     },
93.     {
94.         prop: "age",
95.         label: "年龄",
96.     },
97.     {
98.         prop: "sex",
99.         label: "性别",
100.     },
101.     {
102.         prop: "birth",
103.         label: "出生日期",
104.         width: 200,
105.     },
106.     {
107.         prop: "addr",
108.         label: "地址",
109.         width: 400,
110.     },
111. ])
112. const config = reactive({
113.     name: "",
114.     total: 0,
115. }
116. )
117. const formData = reactive({
118.     keyWord: ""
119. })
120. const dialogVisible = ref(false)
121. const action = ref("add")
122. const formUser = ref({
123.     sex: 0,
124. })
126. //表单校验规则
127. const rules = reactive({
128.     name: [{ required: true, message: "姓名是必填项", trigger: "blur" }],
129.     age: [
130.         { required: true, message: "年龄是必填项", trigger: "blur" },
131.         { type: "number", message: "年龄必须是数字" },
132.     ],
133.     sex: [{ required: true, message: "性别是必选项", trigger: "change" }],
134.     birth: [{ required: true, message: "出生日期是必选项" }],
135.     addr: [{ required: true, message: '地址是必填项' }]
136. })
138. const handlerSearch = () => {
139.     console.log("搜索", formData.keyWord);
140.     config.name = formData.keyWord
141.     // console.log("搜索", searchText);
142.     getUserData(config)
144. }
145. const getUserData = async (query) => {
146.     const data = await proxy.$apis.getUserData(query)
147.     console.log("UserView的数据", data);
148.     config.total = data.count
149.     tableData.value = data.list.map((item) => {
150.         return {
151.             ...item,
152.             sex: item.sex === 1 ? '女' : '男'
153.         }
154.     })
157. }
158. onMounted(() => {
159.     getUserData()
160. })
161. const handlerChangePage = (value) => {
162.     console.log("当前页码", value);
163.     config.page = value
164.     getUserData(config)
165. }
166. const onDelete = (row) => {
167.     console.log("删除", row);
168.     ElMessageBox.confirm(
169.         '你确定要删除吗?',
170.         '删除提示',
171.         {
172.             confirmButtonText: '确定删除',
173.             cancelButtonText: '取消',
174.             type: 'danger   ',
175.         }
176.     )
177.         .then(() => {
178.             proxy.$apis.deleteUser({ id: row.id })
179.             ElMessage({
180.                 type: 'success',
181.                 message: '删除成功',
182.             })
183.             getUserData()
184.         })
185.         .catch(() => {
186.             ElMessage({
187.                 type: 'info',
188.                 message: '取消删除',
189.             })
190.         })
191. }
192. const onEdit = (row) => {
194.     console.log("编辑", row);
195.     action.value = "edit"
196.     dialogVisible.value = true
197.     /* nextTick 确保在 DOM 更新完成之后再执行回调函数
198.     也就是编辑表单
199.     */
200.     nextTick(() => {
201.         formUser.value = {
202.             ...row,
203.         }
204.     }
205.     )
206.     /*   formUser.value = {
207.          ...row,
208.      } */
209. }
211. //这个方法之前定义过
212. const handleAdd = () => {
213.     action.value = "add"
214.     //打开对话窗
215.     dialogVisible.value = true
216. }
218. //对话框右上角的关闭事件
219. const handleClose = () => {
220.     //获取到表单dom，执行resetFields重置表单
221.     //关闭对话框
222.     dialogVisible.value = false
223.     proxy.$refs["userForm"].resetFields()
224. }
226. //对话框右下角的取消事件
227. const handleCancel = () => {
228.     dialogVisible.value = false
229.     proxy.$refs["userForm"].resetFields()
230. }
232. //格式化日期，格式化为：1997-01-02这种
233. const timeFormat = (time) => {
234.     var time = new Date(time);
235.     var year = time.getFullYear();
236.     var month = time.getMonth() + 1;
237.     var date = time.getDate();
238.     function add(m) {
239.         return m < 10 ? "0" + m : m;
240.     }
241.     return year + "-" + add(month) + "-" + add(date);
242. }
243. const onSubmit = async () => {
244.     // 获取表单数据
245.     console.log("添加的xxx", formUser.value);
246.     // 先进行校验
247.     proxy.$refs["userForm"].validate(async (validate) => {
248.         if (validate) {
249.             let res = null;
250.             //这里无论是新增或者是编辑，我们都要对这个日期进行一个格式化
251.             //如果不是1997-01-02这种格式，使用timeFormat方法进行格式化
252.             formUser.birth = /^\d{4}-\d{2}-\d{2}$/.test(formUser.birth)
253.                 ? formUser.birth
254.                 : timeFormat(formUser.birth)
255.             // 提交表单时候，还需要判断是add or edit
256.             if (action.value === "add") {
257.                 res = await proxy.$apis.addUser(formUser.value)
258.             } else {
259.                 res = await proxy.$apis.editUser(formUser.value)
261.             }
262.             if (res) {
263.                 ElMessage({
264.                     type: 'success',
265.                     message: action.value === "add" ? '添加成功' : "编辑成功",
266.                 })
267.                 dialogVisible.value = false
268.                 proxy.$refs["userForm"].resetFields()
269.                 // 刷新页面数据
270.                 getUserData()
271.             }
272.         }
273.         else {
274.             ElMessage({
275.                 type: 'error',
276.                 message: "请输入正确内容",
277.             })
278.         }
279.     })
280.     // 校验通过，执行添加操作
281.     proxy.$apis.addUser(formUser.value)
284. }
285. </script>
286. <style lang='less' scoped>
287. .user {
288.     height: 100%;
290.     .user-head {
291.         display: flex;
292.         justify-content: space-between;
293.     }
295.     .user-table {
296.         height: 540px;
297.         position: relative;
299.         .page {
300.             position: absolute;
301.             bottom: 50px;
302.             right: 50px;
303.         }
305.     }
306. }
307. </style>

复制代码

5、每个组件之间需要共享配置导入pinia配置举行信息共享和传递。
pinia.js

1. import { defineStore } from 'pinia'
2. import { ref, watch } from 'vue'
3. function initData() {
4.     return {
5.         isCollapse: false,
6.         tags: [
7.             {
8.                 path: '/home',
9.                 name: 'home',
10.                 label: '首页',
11.                 icon: 'hone'
12.             }
13.         ],
14.         currentMenu: null,
15.         /* 展示菜单列表的数组 */
16.         menuList: [],
17.         token: null,
18.         routerList: [],
19.     }
20. }
22. export const useAllDataStore = defineStore('allData', () => {
23.     // 全部数据的获取和修改
24.     const state = ref(initData())
26.     // 进行数据持久化
27.     watch(state, newObj => {
28.         if (!newObj.token) return
29.         localStorage.setItem('store', JSON.stringify(newObj))
30.     }, {
31.         deep: true,
32.     })
35.     function selectMenu(val) {
36.         if (val.name === 'home') {
37.             state.value.currentMenu = null
38.         }
39.         else {
40.             state.value.currentMenu = val
41.             let index = state.value.tags.findIndex(item => item.name === val.name)
42.             index === -1 ? state.value.tags.push(val) : ""
43.         }
44.     }
46.     function deleteMenu(tag) {
47.         let index = state.value.tags.findIndex(item => item.name == tag.name)
48.         // 将当前tags切除
49.         state.value.tags.splice(index, 1);
50.     }
52.     function updateMenuList(val) {
53.         // 将当前tags切除
54.         state.value.menuList = val;
55.     }
56.     function clean() {
57.         // 将所有路由移除
58.         state.value.routerList.forEach(item => {
59.             if (item) item();
60.             state.value = initData();
61.             // 删除本地的缓存
62.             localStorage.removeItem('store')
63.         })
64.     }
66.     function addRoutes(router, type) {
67.         // 刷新页面时候
68.         if (type === 'refresh') {
69.             if (JSON.parse(localStorage.getItem('store'))) {
70.                 state.value = JSON.parse(localStorage.getItem('store'))
71.                 //
72.                 state.value.routerList = []
73.             }
74.             else {
75.                 return;
76.             }
77.         }
78.         // 将当前tags切除
79.         const menu = state.value.menuList;
80.         console.log("menu", menu);
81.         /* 执行该代码后  import.meta.glob可能返回的是这样的对象
82.   '@/views/Home.vue': () => import('@/views/Home.vue'),
83.   '@/views/About.vue': () => import('@/views/About.vue'),
84.   '@/views/User/Profile.vue': () => import('@/views/User/Profile.vue')
85. */
86.         const module = import.meta.glob('../views/*.vue')
87.         console.log("module", module);
88.         const routeArr = []
89.         menu.forEach(item => {
90.             if (item.children) {
91.                 item.children.forEach(child => {
92.                     let url = `../views/${child.url}.vue`
93.                     console.log("url", url);
94.                     child.component = module[url]
95.                     console.log("child.component", child.component);
96.                     routeArr.push(...item.children)
97.                 })
98.             }
99.             else {
100.                 let url = `../views/${item.url}.vue`
101.                 console.log("url", url);
102.                 item.component = module[url]
103.                 console.log("item.component", item.component);
104.                 routeArr.push(item)
105.             }
106.             routeArr.forEach(item => {
107.                 state.value.routerList.push(router.addRoute("main", item));
108.             })
109.         })
110.         console.log("state.value.routerList", state.value.routerList);
111.         console.log("state.value.routeArr", routeArr);
112.     }
113.     return {
114.         /* 其实是直接返回的是state.value */
115.         state,
116.         selectMenu,
117.         deleteMenu,
118.         updateMenuList,
119.         addRoutes,
120.         clean,
121.     }
122. })

复制代码

5、举行对应各个环境的配置环境设置

config.js

1. // 用于获取对应的环境变量
2. const env = process.env.NODE_ENV || "prod";
3. const EnvConfig = {
4.     development: {
5.         baseURL: "/api",
6.         mockApi: "https://mock.apipark.cn/m1/4068509-0-default/api"
7.     },
8.     test: {
9.         baseURL: "//test.xuyuan.com/api",
10.         mockApi: "https://mock.apipark.cn/m1/4068509-0-default/api"
11.     },
12.     prod: {
13.         baseURL: "//xuyuan.com/api",
14.         mockApi: "https://mock.apipark.cn/m1/4068509-0-default/api"
15.     },
16. }
17. export default {
18.     env,
19.     /* 将其重新解构成一个对象，并将其合并到默认配置中 */
20.     ...EnvConfig[env],
21.     isMock:false,
22. };

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。