vue-element-admin的介绍

学习和了解通用的vue后台集成方案**vue-element-admin**

vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。

vue-element-admin 是一个后台集成方案, 集成了PC项目中很多的业务场景和功能, 尤其在当下SPA的趋势下,我们可以从中获得很多成熟的解决方案.

vue-element-admin 有一个成熟的集成方案，里面包含了所有的业务功能和场景,并不适合直接拿来进行二次开发, 但是可以通过该项目中的一个案例来进行学习和使用.

这里是官网地址

这里是线上demo地址

如果你想查看该项目的具体功能和效果，可以拉取代码，启动进行预览￥

$ git clone https://github.com/PanJiaChen/vue-element-admin.git  #拉取代码
$ cd vue-element-admin #切换到具体目录下
$ npm run dev  #启动开发调试模式  查看package.json文件的scripts可知晓启动命令

注意：当前项目下载速度如果过慢，可以直接下载代码的压缩包运行

集成方案并不适合我们直接拿来进行二次开发，基础模板则是一个更好的选择

基础模板, 包含了基本的 登录 / 鉴权 / 主页布局 的一些基础功能模板, 我们可以直接在该模板上进行功能的扩展和项目的二次开发

浏览vue-element-admin的文档，了解这个集成方案

搭建项目前的一些基本准备

介绍搭建一个vue中台项目,需要环境和工具

接下来要做的是一个大型的项目，我们需要更好的环境准备和资源前置，所以提前检查我们的环境和资源

nodejs环境

nodejs是当下前端工程化开发必不可少的环境, 使用 nodejs的**npm**功能来管理依赖包

查看node 和 npm的版本

$ node -v #查看node版本
$ npm  -v #查看npm版本

git版本控制

git版本控制工具是目前最为流行的分布式版本管理工具,代码的**提交, 检出, 日志**, 都需要通过git完成

查看git安装版本

$ git --version #查看git安装版本

npm淘宝镜像

npm是非常重要的npm管理工具,由于npm的服务器位于国外, 所以一般建议 将 npm设置成国内的淘宝镜像

设置淘宝镜像

$ npm config set registry  https://registry.npm.taobao.org/  #设置淘宝镜像地址
$ npm config get registry  #查看镜像地址

vscode编辑器

vscode编辑器是目前前端开发的编码利器， 以及丰富的插件系统，非常适合开发前端项目

vscode编辑器插件 + vetur + eslint

vetur是基于 单文件组件开发的支持插件, eslint是 基于代码校验的插件工具

除此之外, eslint需要在vscode中进行一些参数的配置

{ 
    "eslint.enable": true,
    "eslint.run": "onType",
    "eslint.options": {
        "extensions": [
            ".js",
            ".vue",
            ".jsx",
            ".tsx"
        ]
    },
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
}

本项目的技术栈 本项目技术栈基于 ES2015+、vue、vuex、vue-router 、vue-cli 、axios 和 element-ui

检查各自的开发环境和资源，尤其是npm的淘宝镜像额外需要注意

项目模板启动和目录介绍

拉取项目的基础模板,并对目录进行介绍

git拉取基础项目模板

$ git clone  https://github.com/PanJiaChen/vue-admin-template.git  hrsaas #拉取基础模板到hrsaas目录

安装项目依赖（定位到项目目录下）

$ npm install  #安装依赖

启动项目

$ npm run dev #启动开发模式的服务

项目运行完毕，浏览器会自动打开基础模板的登录页，如上图

目录结构

本项目已经为你生成了一个基本的开发框架，提供了涵盖中后台开发的各类功能和坑位，下面是整个项目的目录结构。

├── build                      # 构建相关
├── mock                       # 项目mock 模拟数据
├── public                     # 静态资源
│   │── favicon.ico            # favicon图标
│   └── index.html             # html模板
├── src                        # 源代码
│   ├── api                    # 所有请求
│   ├── assets                 # 主题 字体等静态资源
│   ├── components             # 全局公用组件
│   ├── icons                  # 项目所有 svg icons
│   ├── layout                 # 全局 layout
│   ├── router                 # 路由
│   ├── store                  # 全局 store管理
│   ├── styles                 # 全局样式
│   ├── utils                  # 全局公用方法
│   ├── vendor                 # 公用vendor
│   ├── views                  # views 所有页面
│   ├── App.vue                # 入口页面
│   ├── main.js                # 入口文件 加载组件 初始化等
│   └── permission.js          # 权限管理
│   └── settings.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

此时,你可能会眼花缭乱, 因为生成的目录里面有太多的文件 我们在做项目时 其中最关注的就是**src**目录, 里面是所有的源代码和资源, 至于其他目录, 都是对项目的环境和工具的配置

项目运行机制和代码注释

了解当前模板的基本运行机制和基础架构

眼花缭乱的目录和文件到底是怎么工作的？ 我们进行一下最基本的讲解，帮助大家更好的去理解和开发

├── src                        # 源代码
│   ├── api                    # 所有请求
│   ├── assets                 # 主题 字体等静态资源
│   ├── components             # 全局公用组件
│   ├── icons                  # 项目所有 svg icons
│   ├── layout                 # 全局 layout
│   ├── router                 # 路由
│   ├── store                  # 全局 store管理
│   ├── styles                 # 全局样式
│   ├── utils                  # 全局公用方法
│   ├── vendor                 # 公用vendor
│   ├── views                  # views 所有页面
│   ├── App.vue                # 入口页面
│   ├── main.js                # 入口文件 加载组件 初始化等
│   └── permission.js          # 权限管理
│   └── settings.js            # 配置文件

小结：

这样我们就可以通过admin模板来做我们的项目了, js高程第四版链接: https://pan.baidu.com/s/18P8ky1YalApRb-HDRENZBQ 可以加公众号获取提取码.

若有不懂的地方，请加q群147936127交流或者vx: ltby52119，谢谢~