文章目录
- 简介
- 安装@vue/cli脚手架
- 快速上手
- 运行程序
- 参考资料
简介
全栈开发可视化后台管理系统，包括前端界面和后端服务。
开发框架：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/13f45e24b1deVue.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进行可视化图表的开发。