vue3构建view admin后台管理系统——技术选型
# 系列文章目录
第一章 技术选型
前言
没啥图好放，登录页镇楼：
本系列适合人X
1. 跟着electron系列文章一路读过来，想要构建完整应用的同学。
2. 单纯希望通过vue3+view ui构建企业级管理系统的同学。
前面已经用electron+vue3构建了一个简单的桌面应用，如果仅仅是想用它开发一个简单的小网站，那或许已经够用，但是如果要实现功能复杂的管理平台，那vue部分需要完善的内容还有很多。比如登录、路由管理、状态管理、请求拦截等等。
为了减少大部分开发人员的重复工作量，很多ui框架都会推出自己的管理平台项目，比如iview（view ui）的iview admin系统，集成了大部分通用模块，开发者只需要在其中完成业务模块就行。
这个ui框架推出之初，是有一套免费的admin管理平台可供大家使用的，可惜推出适配vue3.0的ui框架后，放开了更多的组件供免费使用，但是官网的推荐工程删减了很多有用的基础代码。
目前view ui官网的admin plus企业级管理系统模板是需要付费的。
而我们这系列文章的一个阶段性目标，则是构建一个通用的admin企业级管理系统模板。
<hr>
一、技术选型
项目既然基于vue3.0，那么技术选型自然也要摒弃老旧的vuex等工具，选用官网推荐的新工具，工具列表如下：
1. 路由管理工具：vue router
2. 状态管理工具：pinia
3. 项目脚手架：vite
4. js工具库：lodash
5. 网络请求库：axios
二、各库引入
1.授人以鱼不如授人以渔
本章节是介绍如何在一个空白的vue3.0（后续统一简称vue）项目中引入我们需要的各种库。秉承我一贯思路——授人以鱼不如授人以渔，所以照例，介绍引入库之前，带着大家先了解vue的一些基本规则。 最原始的vue项目有三个主要的文件：APP.vue、main.js、index.html。
1.1 index.html:
我们可以从我们最熟悉的html文件开始阅读：
<!DOCTYPE html><html lang=”en”> <head> <meta charset=”UTF-8″ /> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″ /> <meta http-equiv=”Content-Security-Policy” content=” img-src ‘self'” /> <title>tools-lize</title> </head> <body> <div id=”app”></div> <script type=”module” src=”./src/main.js”></script> </body></html>
忽略上面的一些个性化配置，body标签中只有两行代码。
div标签定义一个根dom元素，script标签引入我们的主要js文件（main.js，也叫入口文件）。
如果有心的同学观察过vue2或者vue3打包后的文件，会发现vue编译打包后，只有一个html文件，就是这个index.html。那么可能有些同学会有所好奇了，那vue写了那么多组件，写了那么多dom和css，都是怎么渲染到页面上的？没错，是通过js把dom和css插入到这个index.html中的，也就是说不论用vue构建了一个多么庞大的系统，其实这个系统只有一个真实的页面——index.html。
vue做的最多的一件事，其实是把我们写的.vue文件进行语法解析，然后类似我们用js创建dom一样，构建一个完整的dom，最终把这个完整的dom插入到上面id为“app”的div中。上面就是描述vue工作流程的大白话了，如果需要汇报工作，请自动替换为虚拟dom、渲染等专业化词语。
这样来看，index.html就清晰多了，div#app存放vue渲染的元素，main.js负责处理vue需要做的渲染。
1.2 main.js
上节讲了index.html，index.html有且只有一个入口js，那就是main.js，可见vue所有的操作大部分是通过main.js实现的。
我的main.js如下：
import { createApp } from ‘vue’import {createPinia} from ‘pinia’import router from ‘@/router/index.js’import ViewUIPlus from ‘view-ui-plus’import ‘@/assets/font/iconfont’import ‘view-ui-plus/dist/styles/viewuiplus.css’import ‘./style.css’import App from ‘./App.vue’import ‘@/assets/common.css’createApp(App).use(router).use(createPinia()).use(ViewUIPlus).mount(‘#app’)
这里面有少量代码可能是我加的，大部分应该是view ui官网推荐项目自带的。
如果你认真学习了vue3.0官网文档关于createApp创建vue实例部分，或者曾经写过在html文件中引入vue.js，每个页面都需要创建vue实例，那么对于这部分代码应该不陌生。
核心其实是X：
1. 引入创建vue实例的api：import { createApp } from ‘vue’
2. 引入一个App.vue组件：import App from ‘./App.vue’
3. 实例化这个vue组件并挂载到id为“app”的div上：createApp(App).mount(‘#app’)
至于其他的代码，都是按照工具的文档，作为插件使用的方式。
1.3App.vue
我们有一个html存放所有的页面元素，有一个main.js作为一个入口，把所有的工具集合起来，并负责把App.vue渲染到index.html中，那么我们业务中的代码是怎么放进来的呢？ 答案是App.vue，在App.vue中有类似如下代码：
<script setup>import {useRouter} from ‘vue-router’const router=useRouter()</script><template> <router-view></router-view></template><style lang=”less”></style>
上面可能和view ui的实例项目有所不同，因为我删减了部分无关代码，这个vue组件最主要的一件事便是——把其他所有的业务组件通过路由引入进来（），即我们写的.vue组件会替换掉上面这个router-view标签。
这样相当于每个组件中写的js和style也都放到了body标签中。 当我们把这些基础的框架搭起来后，我们只需要关注业务相关组件即可，并不需要关注它怎么渲染的，大大降低我们工作量和心理负担。
到此，应该对vue代码组织方式有了一个大致了解：
1. 创建index.html作为唯一页面
2. index.html页面引入main.js作为唯一入口
3. main.js负责引入插件和把App.vue组件渲染到index.html中
4. App.vue组件中负责替换路由地址，当点击系统中的某个页面时，就把App.vue中的标签替换成对应的组件。
2.引入各工具
其实上面代码已经写出工具的引入，这里只是简单梳理下引入步骤：
1. npm下载工具，例如pinia官网介绍的：
yarn add pinia或者使用 npmnpm install pinia
2. import引入工具，仍以pinia为例：
import {createPinia} from ‘pinia’const pinia = createPinia()app.use(pinia)app.mount(‘#app’)
把代码简化一下就是我上面的代码：
import {createPinia} from ‘pinia’app.use(createPinia().mount(‘#app’)
每个工具有每个工具的用法，完全看文档即可，这是和工具内部暴露出来的对象有关，不用纠结为什么有些只需要import即可，有些import某个对象，有些import后还需要像函数一样运行下。
其他工具引入参考上节main.js部分。
总结
其实对于工具使用这部分，只要把vue的代码结构了解清楚，使用什么工具，怎么使用，都是水到渠成，记住vue文件结构：
- 创建index.html作为唯一页面
- index.html页面引入main.js作为唯一入口
- main.js负责引入插件和把App.vue组件渲染到index.html中
- App.vue组件中负责替换路由地址，当点击系统中的某个页面时，就把App.vue中的标签替换成对应的组件。
原创文章，作者：starterknow，如若转载，请注明出处：https://www.starterknow.com/126815.html
starterknow