vue3+vite+element-plus

98 阅读 0 评论 65 点赞

我是靠谱客的博主不安指甲油，这篇文章主要介绍vue3+vite+element-plus，现在分享给大家，希望可以做个参考。

最近在学习vue3，尝试用vue3+vite重构了vue-admin-template项目

项目地址
预览地址

如果你使用过vue-admin-template,此项目对你相当于无缝切换。

项目构建

复制代码

1
2
3
4
5
git clone https://github.com/Maxfengyan/vue3-admin-template-vite.git
cd vue3-admin-template-vite
npm install
npm run dev

vite使用体验：vite相比较于webpack来说使用上更加快捷，因为省去了打包的步骤，编译项目可以说是非常迅速，配置相对于webpack来说也更加简单，虽然没有webpack的plugin和loader功能丰富，但基本满足开发需求。

vue3: 项目中尽可能使用了composition Api开发，代码逻辑更加清晰，相对于vue2来说还是更新了不少东西，建议尝试。

element-plus: 如果使用过element-ui,基本切换无感。

相对于 vue-admin-template 改动

Vite:使用 vite 构建工具，放弃 webpack。(vite 真香)
Axios 封装请求：

(1) 根据实际项目开发需求，系统中可能会请求多个不同的 baseurl，为方便处理封装 axios 类(自定义修改响应拦截在src/core/request.js)。

(2) 为了项目打包后也可以灵活调整后端接口地址，在打包后自动切换为闭包形式读取 baseurl（public/api.js），方便项目打包后部署时随便修改接口地址。
权限过滤拦截：权限处理更加颗粒化/灵活化。

(1) 在.env 配置文件中设置 VITE_POWER_TYPE 是否启用动态权限路由功能

(2) 改变动态路由逻辑，原本通过角色来确定路由权限，现改为每个路由中添加各自的唯一的路由标识，通过接口获取用户的权限标识，进行颗粒化的比对分配权限，更加灵活一些。

(3) 权限数据并非统一结构，可以结合项目进行调整(修改逻辑在src/core/addRoutePermission)
Sidebar:剔除了侧边栏适配 mobile 的响应式(懒…)，调整代码逻辑，在.env 文件中设置系统标题(VITE_SYSTEM_SWITCH/VITE_SYSTEM_NAME)/系统 logo(VITE_SYSTEM_LOGO)
svg：下载 svg 文件存放于*src/plugin/icons/svg/*下，使用方式:

复制代码

1
2
3
<!-- logo.svg -->
<svg-icon name="logo" color="xxx" class="xxxx" />

6.mockJs:因为本地开发时使用 mockJs 无法在浏览器捕捉到响应信息，故放弃，可采用以下两种方法：

(1) easy-mock(推荐):服务
器搭建 easy-mock 服务进行接口管理，前后端开发方便协作规范。

(2) public:vite 项目 public 文件夹下文件会自动变为静态资源服务，可以在 public 文件夹下根据接口规范创建相应路径的 json 文件达到 ajax 请求目的。

目录结构

复制代码

|- public                                // 公共静态资源以及模拟接口json文件
|- src                                   // 开发文件夹
|   |- api                               // 项目请求接口
|   |- assets                            // 静态图片
|   |- components                        // 公共组件
|   |   |- ColorPicker                   // 颜色组件(修改全局皮肤，未完成)
|   |   |- Layout                        // 项目布局核心组件
|   |- core                              // 封装核心功能
|   |   |- addRoutePermission            // 权限校验
|   |   |- auth                          // 存放缓存
|   |   |- get-page-title                // 网页标题
|   |   |- request                       // Axios封装
|   |- directive                         // 自定义指令
|   |- mixin                             // vue mixin
|   |   |- global                        // 读取全局参数(颜色组件相关，未用)
|   |- plugin                            // 全局插件
|   |   |- icons                         // 封装svg plugin
|   |- router                            // vue路由
|   |- store                             // vuex
|   |   |- modules                       // vuex modules
|   |   |- getters                       // vuex getters
|   |   |- index                         // vuex入口
|   |- stylus                            // css-stylus
|   |   |- chrome                        // chrome 覆盖原生css
|   |   |- elementUI                     // element 覆盖原生css
|   |   |- index                         // 入口styl
|   |   |- sidebar                       // 侧边栏
|   |   |- transition                    // 过渡动画
|   |   |- variables                     // stylus变量
|   |- views                             // 页面
|   |   |- 404                           // 404
|   |   |- dashboard                     // 根页面
|   |   |- login                         // 登录
|   |- App                               // vue入口组件
|   |- elementui                         // 按需加载elementui组件
|   |- main                              // vue入口文件
|- .env                                  // 全局配置参数
|- vite.config.js                        // vite配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|- public                                // 公共静态资源以及模拟接口json文件
|- src                                   // 开发文件夹
|   |- api                               // 项目请求接口
|   |- assets                            // 静态图片
|   |- components                        // 公共组件
|   |   |- ColorPicker                   // 颜色组件(修改全局皮肤，未完成)
|   |   |- Layout                        // 项目布局核心组件
|   |- core                              // 封装核心功能
|   |   |- addRoutePermission            // 权限校验
|   |   |- auth                          // 存放缓存
|   |   |- get-page-title                // 网页标题
|   |   |- request                       // Axios封装
|   |- directive                         // 自定义指令
|   |- mixin                             // vue mixin
|   |   |- global                        // 读取全局参数(颜色组件相关，未用)
|   |- plugin                            // 全局插件
|   |   |- icons                         // 封装svg plugin
|   |- router                            // vue路由
|   |- store                             // vuex
|   |   |- modules                       // vuex modules
|   |   |- getters                       // vuex getters
|   |   |- index                         // vuex入口
|   |- stylus                            // css-stylus
|   |   |- chrome                        // chrome 覆盖原生css
|   |   |- elementUI                     // element 覆盖原生css
|   |   |- index                         // 入口styl
|   |   |- sidebar                       // 侧边栏
|   |   |- transition                    // 过渡动画
|   |   |- variables                     // stylus变量
|   |- views                             // 页面
|   |   |- 404                           // 404
|   |   |- dashboard                     // 根页面
|   |   |- login                         // 登录
|   |- App                               // vue入口组件
|   |- elementui                         // 按需加载elementui组件
|   |- main                              // vue入口文件
|- .env                                  // 全局配置参数
|- vite.config.js                        // vite配置文件