共计 2932 个字符，预计需要花费 8 分钟才能阅读完成。
学习和理解通用的 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/18P8k… 能够加公众号获取提取码.
若有不懂的中央，请加 q 群 147936127 交换或者 vx: ltby52119，谢谢~
