前端编程-vue-element-admin的HelloWorld

背景

经手了很多后端子系统的项目，有一些子系统没有做cms后台，导致出现了尴尬的一刻：如果出现初始化数据的情况，必须要自己调用接口，甚至得写sql脚本来加数据。这岂不是进入了远古时代，一个不小心，数据库就会出现脏数据。。。
本博客将阐述vue-admin的后台管理的HelloWorld，侧重于应用。

npm

是什么

node package manager，node的包管理工具，可以按照类比：

• python中的pip
• java中的maven或者gradle
• centos的yum
• Ubuntu的apt
• mac os的brew等

安装node环境

参考：https://blog.csdn.net/wangjie5540/article/details/103470356
多node环境配置

安装vue-element-admin

参考官方文档：https://panjiachen.github.io/vue-element-admin-site/zh/guide/

git clone https://github.com/PanJiaChen/vue-element-admin.git
cd vue-element-admin
npm install --registry=https://registry.npm.taobao.org
npm run dev

直接点击登录

细心的同学观察到了，这个admin的功能模块比较多，不适合新手直接去看，下面咱们找个适合新手的

安装vue-admin-template

https://github.com/PanJiaChen/vue-admin-template.git
此项目和admin项目同源，但是比较轻量，适合初学。

git clone https://github.com/PanJiaChen/vue-admin-template.git
cd vue-admin-template
npm install --registry=https://registry.npm.taobao.org
npm run dev

左侧导航栏少了很多

走一走代码

• package.json，类似于maven中的pom文件，npm install将直接读取这个文件。（具体是web package的范畴）
• man.js，总入口文件
  
• man.js中的绑定函数，有种mvc的思想，store代表m，router代表c，el代表v
• vue文件是页面，在views目录中
• js文件，编写业务逻辑

评价

• vue-element-admin适合定制二次开发
• vue-admin-template适合初学