九、项目整体搭建

1、导学

• 将收获什么

* 第一部分：相关准备知识
    - 前端工具链的相关工具介绍
    - 脚手架工具的使用和对比
        ~ Imooc CLI
        ~ Vue CLI
        ~ Vite
    - 编码规范
        ~ ESLint
        ~ Prettier
        ~ 产出**编码规范文档**
    - 项目结构规范
        ~ 产出**项目结构规范文档**
    - Git操作规范
        ~ Git Flow
* 第二部分：搭建项目整体框架
    - Ant Design Vue
    - Vue Router
    - Vuex

• 关键词

* **技术规范**文档-必须落实到文档中，别放在脑子里
* Ant Design Vue
* Vue Router和Vuex
* Typescript-用了TS，一定要培养使用的习惯，看到任何变量都想到它的类型

• 学习方法

* 对比学习：更进一步，不同工具也可以横向对比，这样可以收获的更多
* 必须亲自实践：请不要因为比较简单就不写代码，眼高手低。**无他，唯手熟尔**
* 不要教条主义：很多过程没有标准答案，适合自己的项目的方案才是最优解。
* 学会看**文档**：好的文档中有大部分的知识点。

2、大话前端工具链

* 简介
    - 前端的飞速发展：带来了更复杂的项目
    - 项目的常见需求 - 依赖管理，预编译，构建打包，压缩合并等
    - 随着项目越来越复杂 - 诞生了**前端工程化**
    - 随着工程化的产生 - 产生了对应的**前端工具链**
* 静态类型语言
    - 动态语言的弊端
        ~ **typescript**
        ~ flow
* 代码风格检查Linter
    - 多人协作的弊端，风格各异，维护和扩展的困难
        ~ eslint
* 包管理器
    - npm
    - yarn - 兼容npm registry
* 转译器Traspiler
    - 非JS或不同版本的JS翻译成符合平台要求的等价代码
        ~ Babel
* 开发服务器
    - live reload
    - HMR
* 打包工具Bundler
    - 将源代码转换成符合生产环境的代码
        ~ Webpack - Loader，Plugin，大而全的功能
        ~ Rollup - 专注于打包输出多种格式
        ~ Parcel - 零配置
* 任务管理工具Task Runner
    - 自动执行项目所需的重复任务
        ~ css预处理
        ~ 优化图片
        ~ 合并压缩javascript
        ~ 文件处理（拷贝，删除）
        ~ 监听文件变化
        ~ Gulp - 流式管道写法组合多个任务
        ~ Webpack - 通过插件的方式
        ~ npm scripts或者Shell脚本
* 脚手架Scaffolding tools
    - **将工具链聚合在一个工具内**简单，快速，零配置
        ~ Vue - Vue CLI，Vite，Imooc CLI
        ~ React - create-react-app
        ~ Angular - Angular CLI

3、使用Imooc CLI新建项目

* 不是针对某个前端框架的脚手架，而是一个**大而全更加针对业务的脚手架**
    - 支持各种模板，可扩展性
    - 云构建
    - 预发布和正式发布
    - 项目回滚
    - 远程Git操作
* 安装
    - npm install -g @imooc-cli/core
    - imooc-cli init
* 依赖**cnpm**
    - npm install -g cnpm

4、Vue CLI vs Vite

* **Vite比Vue CLI快10-100倍？**
* Vue CLI的功能
    - 工程脚手架
    - 开发服务器
    - 插件系统
    - 用户UI界面
* Vue CLI构建是基于**Webpack**的。主要耗时都在Webpack的性能上。
* Vite
    - 利用浏览器的**原生ES模块**，基于**Rollup**进行构建
    - 处于测试阶段，不是一体化的工具，目的就是一个**快速**的开发服务器和**简单的**构建工具
* 对比时刻
* 它为什么这么快？
* Vite的缺点
    - 测试阶段
    - 只支持新版支持ES modules的浏览器
    - 第三方库也需要都支持ES modules
    - CommonJS支持有限
    - 开发构建属于两套系统，可能导致生产和开发不一致行为
* Vite的前辈
    - [Snowpack](https://www.snowpack.dev/)
      **一个利用浏览器中JavaScript模块的开发服务器项目**

5、ESLint

* **规范的代码格式可以让整个工作的效率在一定程度上提升到最高**
* 没有规范可能出现的问题
    - 代码难以读懂
    - 代码提交的时候会有很多格式问题的修改，造成不必要的事件消耗
* ESLint是什么？
    - 是一个开源的JavaScript的linting工具，使用espree将JavaScript代码解析成抽象语法树
      （AST），然后通过AST来分析我们代码。
* 命令行工具
    - npx eslint --version
    - npx eslint --ext ts,vue src/**
* 编辑器插件
    - [ESLint插件](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
    - [Vetur插件](https://marketplace.visualstudio.com/items?itemName=octref.vetur)

6、ESLint配置文件

* Rules
    - [ESLint可用的Rules](https://eslint.org/docs/rules/)
* Extends
* 自动修正错误

7、小花絮：Prettier

* **Prettier**顾名思义，将代码变漂亮
* ESLint的功能
    - 代码质量问题
    - 代码风格问题
* Prettier的理念
    - **An opinionated code formatter**，格式很重要，但是很重要，让我来帮你搞定！
    - Fewer Options：Prettier还给予了一部分配置项，可以通过.prettierrc文件修改。
* ESLint prettier的工作原理
    - 禁用所有和Prettier冲突的ESLint的代码格式规则
    - 将所有Prettier的规则和修改导入ESLint中，在ESLint统一的显示这些错误

8、项目结构规范

* **代码结构**针对单个文件的书写格式
* **项目结构**针对这些文件应该以怎样的标准进行存放和管理
* [React项目文件结构](https://reactjs.org/docs/faq-structure.html)
    - 按照按功能或路由组织，也就是所说的feature
    - **按照文件类型**
* 注意事项
    - 避免多层嵌套
    - 不要过度思考
* 项目结构举例

/assets
  image.png
  logo.png
/components
  ColorPicker.vue
  Dropdown.vue
  ...
/views
  Home.vue
  ...
/router
  index.ts
  ...
/store
  index.ts
  editor.ts
  user.ts
  ...
/hooks
  useURLloader.ts
  ...
/plugins
  hotKeys.ts
  ...
/test
  ColorPicker.spec.ts
App.vue
main.ts
...

9、Git标准操作流程：Git Flow

* 所有的这些规范都是针对特定的多人设定的，意在让多人协作的过程更顺畅，更简单，
  减少不必要的冲突和时间的浪费。
* Git Flow
    - 预设两个分支
        ~ master只能用来包括产品代码。你不能直接工作在这个master分支上
        ~ develop是你进行任何新的开发的基础分支
        ~ **这两个分支被称之为长期分支**
    - 功能开发feature
        ~ 整合回到develop
        ~ 等待更全面的测试
        ~ 等待和develop一起进行发布
    - 管理release
        ~ 新功能已经添加，bug已经修复
        ~ 代码已经被测试
        ~ release分支使用版本号命名的
    - bug修复hotfix
        ~ 针对master分支
    - 优点：清晰可控
    - 缺点：相对复杂，不适合持续发布
* Github Flow
    - 根据需求，从master拉出分支
    - 激烈的开发阶段，提交commit
    - 开发完毕，发起PR（pull request）
    - 代码评审（很重要！）
    - 部署，并且测试
    - 没问题，merge到master！
    - **Github flow的最大优点就是简单，对于“持续发布”的产品，可以说是最合适的流程**
* 两大规则
    - branch命名
        ~ feature开头代表功能开发
        ~ hotfix开发代码bug修复
    - commit信息，必须**言之有物**，杜绝update，fix bug这类废话

10、ant-design-vue组件库

* 两大解决方案
    - ***[ant-design-vue](https://2x.antdv.com/docs/vue/getting-started-cn/)*
    - [element-plus](https://element-plus.gitee.io/)
* 安装方式
    - npm安装配合webpack等打包工具使用
        ~ npm install ant-design-vue@next --save
    - 直接引入js和css（不推荐）
        ~ <!-- 引入样式 -->
          <link rel="stylesheet" href="https://unpkg.com/element-plus/lib/theme-chalk/index.css">
          <!-- 引入组件库 -->
          <script src="https://unpkg.com/element-plus/lib/index.full.js"></script>
* 开始使用
    - // main.ts
      import Antd from 'ant-design-vue';
      import 'ant-design-vue/dist/reset.css'; 
      app.use(Antd)
* 关于全局API
    - Vue2的时代，都是全局API和配置
        ~ Vue.component('button-counter', {})
        ~ Vue.directive('focus', {})
    - Vue2没有“app”的概念，我们定义的应用只是通过new Vue()创建的根Vue实例。从同一个Vue
      构造函数创建的每个根实例共享相同的全局配置。
        ~ 在测试期间，全局配置很容易意外地污染其他测试用例
        ~ 全局配置使得在同一页面上的多个“app”之间共享同一个Vue副本非常困难
        ~ Vue.mixin({
            /* ... */
          })
          const app1 = new Vue({el: '#app-1'})
          const app2 = new Vue({el: '#app-2'})
    - **Vue3的做法：createApp**
        ~ import {createApp} from 'vue'
          const app = createApp({})
        ~ 应用实例暴露当前全局API的子集，任何全局改变Vue行为的API现在都会移动到**应用实例**上，
          现在就不会产生vue2的这些冲突了。

11、SPA应用路由的基本原理

* SPA和普通网页应用的区别
    - 普通网页
        ~ 跳转到新页面，每次重新加载所有资源
        ~ HTML内容是后端直接渲染的
    - SPA应用
        ~ 不跳转，JS拦截跳转，修改URL
        ~ JS动态渲染DOM内容
* SPA路由的实现方式
    - History API
        ~ [pushState](https://developer.mozilla.org/zh-CN/docs/Web/API/History/pushState)
        ~ [codesandbox](https://codesandbox.io/s/optimistic-cookies-wgxhc?file=/src/index.js)
    - URL Hash
* SPA优点
    - 速度快
    - 体验好
    - 为前后端分离提供了实践场所
* Vue Router4
    - https://router.vuejs.org/zh/

12、状态管理工具

* 什么是状态管理工具
    - 首先搞清楚，是否真的需要状态管理工具
    - 它随着SPA的出现，而浮出水面。客户端需要处理复杂的状态数据。
    - 多个组件需要共享的一系列数据，称之为全局数据。
* 解决方案
    - 方案一：单向数据流，从父组件传递到子组件
    - 方案一缺点：
        ~ 多层传递非常繁琐
        ~ 中间传递层有可能根本不需要这个数据
        ~ 根组件压力太大，逻辑代码会非常繁杂
    - 方案二：使用全局对象
    - 方案二缺点：
        ~ 数据非响应式
        ~ 修改无法追踪
        ~ 直接从组件获取数据是一种反模式
* 状态管理工具三杰
    - Vuex
    - Redux
    - Mobx
* 状态管理工具的特点
    - store，神奇的全局数据结构：single source of truth
    - 不能随意修改，调用特殊的方法来实现数据修改
    - 变化可追溯，可预测（predictable）

13、Vuex安装和基础

* Vue的数据流
    -       Actions（methods）
             ↗             ↘         
      View（template） ←  State（data）
* 出现问题：多组件共享状态
    - 根组件多层传递的困境
    - 多组件同步数据的繁琐
* Vuex的解决方案
    - Vue Components  →  （dispatch）Actions
              ↑               ↓
            State     ←  （commit）Mutations
* Vuex的特点

14、总结

* 知识点
    - 脚手架
        ~ Imooc CLI
        ~ Vue CLI
        ~ Vite
    - 代码规范
        ~ ESLint简介，使用和配置文件
        ~ Prettier的定位和作用以及使用
        ~ 产出：代码规范文档：https://www.yuque.com/imooc-lego/elp4vn/wtg4vo
    - 项目文件结构和命名规范
        ~ 产出：文件结构和命名规范文档：https://www.yuque.com/imooc-lego/elp4vn/igcosu
    - Git Flow
        ~ 标准Git Flow
        ~ **Github Flow**
        ~ 产出Git操作规范文档：https://www.yuque.com/imooc-lego/elp4vn/cwu0z1
    - Ant Design Vue
        ~ 安装，全局导入和使用
        ~ 多看文档，多用
    - Vue Router
        ~ SPA router的简单原理
        ~ 安装，全局引入
        ~ 添加路由，使用内置组件router-view和router-link
        ~ 使用钩子函数useRoute和useRouter获取路由信息和跳转
    - Vuex
        ~ 全局状态工具的定义
        ~ 安装，概念：**store，state，mutations**，使用commit提交mutations
        ~ 使用钩子函数useStore
        ~ 使用module将store拆分成多个模块
* 要点
    - **文档化**标准
    - **Typescript**深入编码理念中
* 作业
    - 根据我的介绍，写自己的**技术规范文档**，你可以根据我的简介和自己的偏好，
      写出适合自己项目的文档