Preface

You need to install node and git locally. The technology stack of this project is based on ES2015+, vue, vuex, vue-router, vue-cli, axios and element-ui

1. Introduction

vue-element-admin is a back-end front-end solution based on vue and element-ui. It uses the latest front-end technology stack, built-in i18 internationalization solutions, dynamic routing, authorization verification, refined typical business models, and provides a wealth of functional components. It can help you quickly build enterprise-level mid- and back-end product prototypes

Second, use steps

1. Installation

# 克隆项目
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

2. Page

After the startup is complete, the browser will automatically open to visit http://localhost:9527. If you see the following page, it means the operation is successful.
Display page

3. Directory structure

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

4.src introduction

api all requests
Static assets such as theme fonts
components globally common components
router routing
views views all pages
App.vue entry page
main.js entry file loading component initialization, etc.

4.1 api sum views

  随着项目的开发，api会越来越多，此时我们可以按业务模块进行归类存放

api

view也是如此，安装业务模块归类，并且最好和api模块一一对应

Insert picture description here

4.2 components

components 放置的都是全局公用的一些组件，如上传组件，富文本等等。一些页面级的组件建议还是放在各自views文件下，方便管理。

Insert picture description here

5.ESLint

 不管是多人合作还是个人项目，代码规范是很重要的。这样做不仅可以很大程度地避免基本语法错误，也保证了代码的可读性

sling

ps：不喜欢用ESLint就关掉吧。。。。。我开发时就是关掉的，，别问为什么。。。

6. Cross-domain issues

The front-end interaction will inevitably encounter cross-domain problems. The back-end can be solved by cors. If the back-end is too troublesome to configure, the dev environment can also be solved through the proxy of webpack-dev-server. The development environment Just use nginx to anti-proxy, the specific configuration will not be expanded here.

to sum up

Basic Vue-Element-Admin, simple and simple. . . .

Vue-Element-Admin basics

Article Directory