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

最新推荐文章于 2025-09-20 12:30:09 发布

原创最新推荐文章于 2025-09-20 12:30:09 发布 · 325 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #admin #tempplate

前端编程专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用Vue创建后台管理系统，对比分析了vue-element-admin和vue-admin-template两个项目的优劣，适用于初学者和二次开发者。

背景

经手了很多后端子系统的项目，有一些子系统没有做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.youkuaiyun.com/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适合初学