NodeJs+Vue+Element UI+Antd+Antv全栈开发可视化后台管理系统之一：搭建前端框架

简介

全栈开发可视化后台管理系统，包括前端界面和后端服务。
开发框架：NodeJs(Express)+Vue+Element UI+Antd+Antv
Node.js: Node.js是一个基于Chrome V8引擎的 Javascript 运行环境。Node.js 诞生以后，前端大爆发，类似 React/Vuejs 这样的前端框架的开发环境变得非常强大，Node.js 是这些开发环境运行的基础。
要求Node.js>=8的版本，推荐v10左右，Nodejs安装可参考https://www.jianshu.com/p/13f45e24b1de
Vue.js :Vue是一套用于构建用户界面的渐进式JavaScript框架。Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。
Element UI：Element UI是饿了么开发的一款Vue UI framework(https://element.eleme.cn/)，包含丰富的组件和页面布局样例，可以直接引用，大大简化了前端界面开发，非常适合全栈开发者使用。
Antd： Ant Design 的 Vue 实现，是蚂蚁金服Ant Design家族的一员，开发和服务于企业级后台产品。Ant Design提供了丰富的设计资源和组件库，甚至包含Axure组件库和 Sketch 工具集，有兴趣可以访问知乎专栏蚂蚁金服体验科技
Antv：AntV 是蚂蚁金服全新一代数据可视化解决方案，是Ant Design家族的一员，致力于提供一套简单方便、专业可靠、无限可能的数据可视化最佳实践。本文使用G2Plot图表库进行可视化开发。

安装@vue/cli脚手架

Vue脚手架用于快速生成Vue项目基础架构，简化程序员创建Vue项目的过程。新建一个文件夹作为项目工程，在文件夹下命令行执行：

vue create element-admin

提示版本过低，需要安装vue cli3

先卸载

npm uninstall -g vue-cli

再重新安装

npm install -g @vue/cli

等待几分钟安装完成，安装了1000个包。

快速上手

重新执行以下命令

vue create element-admin

方向键选择手动，回车：

其中Babel和Linter/Formatter默认选中，我们新选中Router：用下方向键到Router，点击空格键选中，然后回车：

输入n回车：

后面一路回车即可：


提示安装成功。安装element-ui:

cd element-admin
npm i element-ui -S
vue add element

依次选择Fully import 、 No 、 zh-CN然后回车

add element会修改src文件夹下的App.vue和main.js文件。

运行程序

npm run serve

浏览器输入http://localhost:8080/看到下面页面即为成功。此页面对应App.vue文件，出现了“el-button”按钮，是因为执行了“vue add element”命令。

至此，前端框架已经搭建完毕，可在此基础上添加页面，再用后端程序编写API服务，就可以实现完整的后台管理功能。本系列文章将使用Element UI和Antd进行界面的开发优化，使用Antv进行可视化图表的开发。

参考资料

https://ant.design/index-cn
https://element.eleme.cn/#/zh-CN/component/installation
https://www.bilibili.com/video/BV1t441187pL?p=1
https://www.cnblogs.com/zhoulifeng/p/9395295.html