介绍

本教程是基于 @vue/cli( v3) & webpack(v4) & vuex(v3) & vue-router(v3) ,且按照官方文档，遵循目前生产项目的常用实践，来讲解如何一步一步的学习 Vue ，并搭建 Vue 应用脚手架。

大家可以点击文章底部「了解更多」下载「Vue 应用脚手架源代码」，可以直接投入生产使用。

环境搭建

1. 安装 nvm
2. 安装 node.js
3. 安装 nrm
4. 安装 yarn
5. 安装 代码编辑器
6. 安装 vue 命令行工具

前置知识

1. ECMAScript 6
2. 路由
3. 生命周期

搭建方法

1. 初始化脚手架
2. 新增常用实践目录
3. 添加 Less 支持
4. 添加 Css Reset
5. 安装 Element UI
6. 定制 Element UI 主题
7. 安装资源分析工具
8. 封装 HTTP 请求
9. 编写公共对象存储方法
10. 编写公共组件
11. 添加 Vuex 支持
12. 添加 Vue Router 支持
13. 配置组件和路由
14. 其他处理

程序目录

|── build // 构建相关 
├── config // 配置相关
│ ├── dev.env.js // 开发环境
│ ├── index.js // 项目配置（配置测试环境代理请求地址）
│ ├── prod.env.js // 生产环境
├── src // 源代码
│ ├── api // 所有 HTTP 请求
│ │ ├── home.js // 首页（根据业务模块命名，和 /views/* 一一对应）
│ ├── assets // 图片样式等静态资源
│ ├── mixins // 混入对象
│ │ ├── el-form-item.js // 表单项验证增强
│ │ ├── index.js // 定义并导出混入对象的组件
│ ├── components // 全局公用组件
│ ├── router // 路由
│ │ ├── asyncComponents.js // 异步载入的组件
│ │ ├── components.js // 同步载入的组件（设置会被编译到本app.js中的组件）
│ │ ├── index.js // 路由入口
│ │ ├── menu.js // 菜单设置（设置所有一级、二级、三级菜单）
│ │ ├── routes.js // 路由设置（设置所有路由对应组件别名）
│ ├── store // 全局 store 管理
│ │ ├── modules // 模块
│ │ │ ├── user.js // 用户（定义 user 模块）
│ │ ├── getters.js // 定义 store 计算属性（定义 store 计算属性，以逗号分割增加）
│ │ ├── index.js // 组装 store 并导出（组装 user 并导出）
│ ├── utils // 全局公用方法
│ │ ├── auth.js // 操作 token 
│ │ ├── cookies.js // 操作 cookies
│ │ ├── index.js // 公用方法
│ │ ├── request.js // 全局 http 请求方法封装
│ │ ├── storage.js // 全局 storage 相关方法封装
│ ├── views // 页面视图
│ │ ├── home // 响应路由切换的 vue 组件（根据业务模块命名，和 /api/* 一一对应）
│ ├── app.js // vue 入口加载组件初始化等
│ ├── config.js // 微服务 id 存放在这个文件中，webpack、server 等 js 都有读取这个id配置
│ ├── service.js // Portal 入口加载组件初始化等
├── theme // 主题文件目录
├── element-variables.scss // 主题变量文件
└── package.json // 包配置

开发与构建命令

1. 依赖配置
2. 命令说明

开发流程

1. 概述
2. 载入组件
3. 设置路由
4. 设置菜单
5. 配置测试接口
6. 创建 HTTP 请求
7. 调用 HTTP 请求
8. 使用 Vuex
9. 单元测试
10. 部署