【Vue后台管理一】vue-admin-template 后台模版初始化

Vue后台管理

前段时间学习Vue写了一个移动端项目 https://www.charmcode.cn/app/mall/home 然后教程到此就结束了， 我就总感觉少点什么，计划自己着手写一套后台管理。

技术栈

• 前端
  • Vue 使用模版 https://github.com/PanJiaChen/vue-admin-template
  • ElementUI
• 后端
  • FastAPI(Python)
  • MySql

vue-admin-template 自定义初始化

这是配套 个人练习的https://github.com/CoderCharm/Mall而写的后台管理。
基于花裤衩的开源https://github.com/PanJiaChen/vue-admin-template后台模版构建，感谢花裤衩。

克隆代码

git clone https://github.com/PanJiaChen/vue-admin-template.git forntend

修改package.json文件

# 依赖文件安装修改
# 个人学习vue较晚，更喜欢npm run serve启动。
"dev": "vue-cli-service serve", 改为 "serve": "vue-cli-service serve",

# 由于我用的webstorm eslint一直提示报错，之前搜过是版本太高

"eslint": "^6.7.2", 改为 "eslint": "^5.6.0",

安装启动

# 安装依赖
npm install

# 建议不要直接使用 cnpm 安装以来，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org

# 启动服务
npm run serve

添加tagsview 快捷导航(标签栏导航)

参考 https://github.com/PanJiaChen/vue-admin-template/issues/349

也可以直接clone我这个 v1_init 版本的

初始化界面

项目源码地址见个人博客

个人博客地址: https://www.charmcode.cn/article/2020-07-07_Vue_admin

下一节博客

【Vue后台管理二】vue-admin-template 对接后端API JWT认证
https://www.cnblogs.com/CharmCode/p/13283718.html