前言:
前端开发久了,很多东西就要学会借鉴和使用,秉持着拿来就用,能省就省的原则,这一次我们要快速的搭建一个中后台管理系统,以便我们后续快速开发业务功能。我选的是比较老牌的框架,主打一个稳定
准备工具:
工欲善其事必先利其器
vueadmin框架代码:
这里啰嗦两句 这个admin中后台是有elelment ui 和vue 结合而成,所有我们有必要准备相关的开发文档:
Element - The world's most popular Vue UI framework
现在的黑科技真的是,这那那不能用的,打不开的小伙伴注意切换到国内节点
vscode:
大家都在用的编辑器
当然还有框架的官方文档:
我这里列出来的目的是在基于我们现有的开发技能开发之时,在我们忘记或者疑问的时候能够快速的找到解决方案,我们的目的也是为了快速成型不是
搭建开发
框架选型,我这里选择的是template
下面操作都是老套路了,
clone下载本地
# 克隆项目
git clone https://github.com/PanJiaChen/vue-element-admin.git
# 进入项目目录
cd vue-element-admin
# 安装依赖
npm install
# 建议不要用 cnpm 安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npmmirror.com
# 本地开发 启动项目
npm run dev
├── build # 构建相关
├── mock # 项目mock 模拟数据
├── plop-templates # 基本模板
├── public # 静态资源
│ │── favicon.ico # favicon图标
│ └── index.html # html模板
├── src # 源代码
│ ├── api # 所有请求
│ ├── assets # 主题 字体等静态资源
│ ├── components # 全局公用组件
│ ├── directive # 全局指令
│ ├── filters # 全局 filter
│ ├── icons # 项目所有 svg icons
│ ├── lang # 国际化 language
│ ├── layout # 全局 layout
│ ├── router # 路由
│ ├── store # 全局 store管理
│ ├── styles # 全局样式
│ ├── utils # 全局公用方法
│ ├── vendor # 公用vendor
│ ├── views # views 所有页面
│ ├── App.vue # 入口页面
│ ├── main.js # 入口文件 加载组件 初始化等
│ └── permission.js # 权限管理
├── tests # 测试
├── .env.xxx # 环境变量配置
├── .eslintrc.js # eslint 配置项
├── .babelrc # babel-loader 配置
├── .travis.yml # 自动化CI配置
├── vue.config.js # vue-cli 配置
├── postcss.config.js # postcss 配置
└── package.json # package.json
根据目录结构我们就可以快速开始业务代码了