背景数据管理体系 - 项目架构设计-Vue3+axios+Element-plus（0917） ...

七、引入 element-ui 组件库

我的Git堆栈：https://gitee.com/msyycn/vue3-hei-ma.git
官方文档： https://element-plus.org/zh-CN/

• 安装
  

1. $ pnpm add element-plus

复制代码

自动按需：

• 安装插件
  

1. pnpm add -D unplugin-vue-components unplugin-auto-import

复制代码

• 然后把下列代码插入到你的 Vite 或 Webpack 的配置文件中
  

1. ...
2. import AutoImport from 'unplugin-auto-import/vite'
3. import Components from 'unplugin-vue-components/vite'
4. import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
6. // https://vitejs.dev/config/
7. export default defineConfig({
8.   plugins: [
9.     ...
10.     AutoImport({
11.       resolvers: [ElementPlusResolver()]
12.     }),
13.     Components({
14.       resolvers: [ElementPlusResolver()]
15.     })
16.   ]
17. })

复制代码

• 直接利用
  

1. <template>
2.   <div>
3.     <el-button type="primary">Primary</el-button>
4.     <el-button type="success">Success</el-button>
5.     <el-button type="info">Info</el-button>
6.     <el-button type="warning">Warning</el-button>
7.     <el-button type="danger">Danger</el-button>
8.     ...
9.   </div>
10. </template>

复制代码

**彩蛋：**默认 components 下的文件也会被自动注册~
八、Pinia - 构建用户堆栈 和 长期化

官方文档：https://prazdevs.github.io/pinia-plugin-persistedstate/zh/

• 安装插件 pinia-plugin-persistedstate
  

1. pnpm add pinia-plugin-persistedstate -D

复制代码

• 利用 main.js
  

1. import persist from 'pinia-plugin-persistedstate'
2. ...
3. app.use(createPinia().use(persist))

复制代码

• 配置 stores/user.js
  

1. import { defineStore } from 'pinia'
2. import { ref } from 'vue'
4. // 用户模块
5. export const useUserStore = defineStore(
6.   'big-user',
7.   () => {
8.     const token = ref('') // 定义 token
9.     const setToken = (t) => (token.value = t) // 设置 token
11.     return { token, setToken }
12.   },
13.   {
14.     persist: true // 持久化
15.   }
16. )

复制代码

• A.vue
  

1.    <script setup>
2.    import { useUserStore } from '@/stores/user';
3.    const userStore = useUserStore();
5.    </script>
6.    
7.    <template>
8.     <div>
9. <h2>A组件</h2>
10. <p>{{ userStore.token }}</p>
11. <el-button type="primary" @click="userStore.setToken('1234dxybihxtyb567890')" >登录</el-button>
12. <el-button type="danger" @click="userStore.removeToken()">退出</el-button>
13.     </div>
14.    </template>
15.    
16.    <style lang="scss" scoped>
17.    
18.    </style>

复制代码

• 结果
  
  
  
  

九、 Pinia - 配置堆栈统一管理

pinia 独立维护
- 现在：初始化代码在 main.js 中，堆栈代码在 stores 中，代码分散职能不但一
- 优化：由 stores 统一维护，在stores/index.js中完成pinia初始化，交付main.js利用

• user.js
  

1. import { defineStore } from "pinia";
2. import {ref} from 'vue'
3. // 用户模块 ：token setToken removeToken
5. export const useUserStore = defineStore('big-user',()=>{
6.   const token =ref('')
7.   // 传递新的token
8.   const setToken = (newToken) =>{
9.     token.value = newToken
10.   }
11.   // 清除token
12.   const removeToken = ()=>{
13.     token.value=''
14.   }
15. //  合并上面两个方法
16.   // const setToken = (newToken) =>{
17.   //   if(newToken){
18.   //     token.value = newToken
19.   //   }
20.   //   else{
21.   //     token.value = ''
22.   //   }
23.   // }
24. // 暴露出去
25. return {
26.   token,
27.   setToken,
28.   removeToken,
29. }
31. },{
32.   persist:true,
33. })

复制代码

• counter.js
  

1. import { rowKey } from "element-plus/es/components/table-v2/src/common";
2. import { defineStore } from "pinia";
3. import {ref} from 'vue'
5. export const useCounterStore = defineStore('counter',()=>{
6.   const count =ref('')
7.   // 传递新的token
8.   const add = (n) =>{
9.     count.value += n
10.   }
11.   
12. // 暴露出去
13. return {
14.   count,
15.   add,
16. }
18. } )

复制代码

• index.js
  

1. /*
2.   实现pinia独立维护
3. */
5. import { createPinia } from 'pinia'
6. // 引入持久化插件
8. const pinia = createPinia()
9. pinia.use(persist)
10. export default pinia
13. //初始的样子
14. // import {counterStore} from '@/stores/modules/counter.js'
15. // export {counterStore}
16. // import {userStore} from '@/stores/mouser.js'
17. // export{userStore}
19. //统一维护
20. export * from '@/stores/modules/counter.js'
21. export * from '@/stores/modules/user.js'

复制代码

• main.js
  

1. import { createApp } from 'vue'
3. import App from './App.vue'
4. import router from './router'
5. // 从store/index.js导入pinia实例
6. import pinia from  '@/stores/index.js'  
8. // 引入全局样式
9. import '@/assets/main.scss'
11. const app = createApp(App)
13. app.use(pinia)
14. app.use(router)
15. // 挂载
16. app.mount('#app')

复制代码

• 然后在页面利用即可
  

堆栈 统一导出

• 现在：利用一个堆栈 import { useUserStore } from ./stores/user.js 差别堆栈路径不一致
  
• 优化：由 stores/index.js 统一导出，导入路径统一 ./stores，而且堆栈维护在 stores/modules 中
  
• 目录
  

十、数据交互 - 请求工具设计

1. 创建 axios 实例

们会利用 axios 来请求后端接口, 一样寻常都会对 axios 举行一些配置 (比如: 配置基础地址等)
一样寻常项目开发中, 都会对 axios 举行基本的二次封装, 单独封装到一个模块中, 便于利用

• 安装 axios
  

1. pnpm add axios

复制代码

• 新建 utils/request.js 封装 axios 模块
  利用 axios.create 创建一个自定义的 axios 来利用
  http://www.axios-js.com/zh-cn/docs/#axios-create-config
  

1. import axios from 'axios'
3. const baseURL = 'http://big-event-vue-api-t.itheima.net'
5. const instance = axios.create({
6.   // TODO 1. 基础地址，超时时间
7. })
9. instance.interceptors.request.use(
10.   (config) => {
11.     // TODO 2. 携带token
12.     return config
13.   },
14.   (err) => Promise.reject(err)
15. )
17. instance.interceptors.response.use(
18.   (res) => {
19.     // TODO 3. 处理业务失败
20.     // TODO 4. 摘取核心响应数据
21.     return res
22.   },
23.   (err) => {
24.     // TODO 5. 处理401错误
25.     return Promise.reject(err)
26.   }
27. )
29. export default instance

复制代码

2. 完成 axios 基本配置

1. import { useUserStore } from '@/stores/user'
2. import axios from 'axios'
3. import router from '@/router'
4. import { ElMessage } from 'element-plus'
6. const baseURL = 'http://big-event-vue-api-t.itheima.net'
8. const instance = axios.create({
9.   baseURL,
10.   timeout: 100000
11. })
13. instance.interceptors.request.use(
14.   (config) => {
15.     const userStore = useUserStore()
16.     if (userStore.token) {
17.       config.headers.Authorization = userStore.token
18.     }
19.     return config
20.   },
21.   (err) => Promise.reject(err)
22. )
24. instance.interceptors.response.use(
25.   (res) => {
26.     if (res.data.code === 0) {
27.       return res
28.     }
29.     ElMessage({ message: res.data.message || '服务异常', type: 'error' })
30.     return Promise.reject(res.data)
31.   },
32.   (err) => {
33.     ElMessage({ message: err.response.data.message || '服务异常', type: 'error' })
34.     console.log(err)
35.     if (err.response?.status === 401) {
36.       router.push('/login')
37.     }
38.     return Promise.reject(err)
39.   }
40. )
42. export default instance
43. export { baseURL }

复制代码

3、首页团体路由设计

实现目标:

• 完成团体路由规划【搞清晰要做几个页面，它们分别在哪个路由下面，怎么跳转的…】
  
• 通过观察, 点击左侧导航, 右侧地域在切换, 那右侧地域内容一直在变, 那这个地方就是一个路由的出口
  
• 我们必要搭建嵌套路由
  

目标：

• 把项目中全部用到的组件及路由表, 约定下来
  

约定路由规则
path文件功能组件名路由级别/loginviews/login/LoginPage.vue登录&注册LoginPage一级路由/views/layout/LayoutContainer.vue布局架子LayoutContainer一级路由├─ /article/manageviews/article/ArticleManage.vue文章管理ArticleManage二级路由├─ /article/channelviews/article/ArticleChannel.vue频道管理ArticleChannel二级路由├─ /user/profileviews/user/UserProfile.vue个人详情UserProfile二级路由├─ /user/avatarviews/user/UserAvatar.vue更换头像UserAvatar二级路由├─ /user/passwordviews/user/UserPassword.vue重置暗码UserPassword二级路由 明白了路由规则，可以全部配完，也可以边写边配。

下期会笔记是黑马课程的登录注册页面讲授哟！期待吧

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