用FA Vue框架升级DV中后台管理系统架构——前端开发环境搭建

vlambda
2022-04-24

用FA Vue框架升级DV中后台管理系统架构——前端开发环境搭建

点击蓝字 ☝ 关注，关注后可领取福利

免费领取数字化转型大礼包

数字化转型的核心是以客户为中心，提升客户/用户体验

DvDesk系列平台（DvSIS，DVMES，DVSRM，DVWMS）虽然经受许多企业业务验证，并经受海量数据及多用户考验，具有界面简洁操作简单的评价。但是看到老崔用FA全新打造的旺财企业业务中后台，决定技术上进行一次大的革新。赋能客户的同时，DV先开展自我转型升级，抛弃已经落后的技术，从0开始学习

💡 Fantastic-admin 一款开箱即用的 Vue 中后台管理系统框架，开源

认识FA特点

丰富的布局与主题，覆盖市面上各种中后台应用场景，兼容PC、平板和移动端

提供系统配置文件，轻松实现个性化定制

精心设计的动效，让每一处的动画都干净利落

根据路由配置自动生成导航栏

基于文件系统的路由

支持全方位权限验证

内置多级路由最佳缓存方案

轻松实现国际化多语言适配

提供接近于浏览器原生标签栏操作体验的标签页功能

前后端分离

前后端分离的前端是采用的Fantastic Admin，一套基于Vue3 + Vite 2.x + Element Plus的前端中台UI，非常适合用于企业级的应用系统开发。

官方的准备工作文档地址： https://hooray.gitee.io/fantastic-admin/guide/ready.html

开发环境

使用本模板前，需要在本地依次安装好 Node.js , pnpm , Git 和 Visual Studio Code ，并且在 Visual Studio Code 里安装好以下扩展：

 EditorConfig for VS Code

 DotENV

 ESLint

 stylelint

 Vetur

TIP

以上 5 个为 Visual Studio Code 必备扩展，以下则是作者建议安装的扩展，安装它们将在一定程度上提升开发效率。

 Chinese (Simplified) Language Pack for Visual Studio Code 中文语言包

 Auto Close Tag 自动添加 HTML 的闭合标签

 Auto Rename Tag 自动重命名配对 HTML 标签

 Color Highlight 在代码中高亮颜色

 Color Picker 取色器

 Highlight Matching Tag 高亮显示匹配的标签

 Image preview 图片预览

 indent-rainbow 彩虹缩进提示

 Path Autocomplete 路径自动补全

除此之外，还需要准备好开发使用的浏览器，推荐使用 Chrome ，并且在 Chrome 里安装好 Vue.js devtools 扩展，这一步很重要，安装 Vue 官方提供的调试工具将大大提升解决 bug 的效率。

TIP

Vue.js devtools 目前有两个版本，分别是正式版和 beta 版，需要安装的是 beta 版。如果之前有安装过正式版，在进行开发调试的时候，需要禁用或删除正式版，也就是只保留一个 Vue.js devtools 扩展才行。

另外，由于 Vue.js devtools 的 Chrome 扩展需要访问 Chrome 应用商店，如果在大陆地区访问，需要自行准备相关可访问外网的工具。如果不具备该条件，也可通过访问 devtools 仓库并下载 .xpi 文件进行本地安装，支持 chrome 和 firefox ，详细说明请访问 Vue.js devtools 官网了解。

Devtools工具安装

按照步骤操作读一切顺利，但是Devtools碰到问题。

安装步骤

一、从github上下载

这里需要注意：下载一定要记得是master主分支的代码，默认克隆后进入的是dev分支，执行npm run build会报错，执行git checkout master切换到master主分支

git clone https://github.com/vuejs/vue-devtools.git

二、在vue-devtools目录下安装依赖包

cd vue-devtools npm install

三、依赖包下载完后执行npm run build,编译打包成功后会在shells下生成chrome文件夹。此文件夹就是用来放入chrome的扩展程序。

npm run build 按照步骤操作读完该书后，受益的核心观点与说明...

失败第1次