Day 13: vue-element-admin background integration solution

Introduction to vue-element-admin

• vue-element-admin is a background front-end solution, which is based on vue and element-ui (background management system, administrator operation interface).
• Built-in i18 internationalization solution, dynamic routing, authority verification, abstracts typical business models, and provides rich functional components.
• It can quickly build enterprise-level mid- and back-end product prototypes.
• Address: https://panjiachen.github.io/vue-element-admin-site/zh/guide/
  

Installation and use

vue-element-admin：https://github.com/PanJiaChen/vue-element-admin
vue-admin-template：https://github.com/PanJiaChen/vue-admin-template

The following is developed based on vue-admin-template, and vue-element-admin is used as a reference.
The project has generated a complete development framework, providing various functions and pits covering middle and background development. The directory structure of the entire project is as follows:

├── 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

Install

# 克隆项目
git clone https://github.com/PanJiaChen/vue-element-admin.git

# 进入项目目录
cd vue-element-admin

# 安装依赖
npm install

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

# 本地开发 启动项目
npm run dev

operation result

Precautions

• If the dependency installation is unsuccessful, there is a high probability that the node-sass installation failed.
• Due to its historical reasons, node-sass is very easy to fail during installation. At the same time, node-sass relies on the Python environment, so Python2 needs to be installed and configured on the computer.
• It is recommended to directly use the projects provided by the course that contain dependent packages to simplify the learning curve.

Source code interpretation

You can refer to the supporting tutorial articles of the official documentation:

Will continue to update later~~~