前端第一次技术分享

前言
1. 团队接下来需要使用的技术栈
2. 了解vue
- 2.1 vue特性有哪些
- 2.2 vue安装使用
  - 2.2.1 安装vue-cli:
  - 2.2.2 第一次创建项目:
    - 1. 命令行
    - 2. 配置项说明
3. 进入项目，项目目录结构分析
4. vue的生命周期详解
5. 前端规范详解
- 5.1 vscode、vscode+eslint配置
  - 5.1.1 前端常用编辑器介绍
  - 5.1.2 VSCode插件推荐（前端开发）

主题：了解vue,深入vue,前端规范，编辑器统一

前言

接手一个项目在开发过程中发现的问题：
一个.vue 页面4000行代码，页面响应慢，fun方法函数在一个页面多次调用，工具类的js 应该专门存放到utils文件夹中，封装抽离，没有合理使用vue的特性，像router懒加载，代码没有使用eslint,命名不规范，后端人员动前端代码并开发页面，组件化细化没明确的，对组件理解不到位，页面组件不应该放到components文件夹下，应该放在views 自己模块页面components里，开发头疼。
文档：云平台项目梳理.md
链接：http://note.youdao.com/noteshare?id=53c40ac7914524be8b79a5ada8a8701d&sub=353E0A66C413444CA4F6449568C6160D

1. 团队接下来需要使用的技术栈

ant-design-vue

开源的ui组件库

vue2.0

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架

vuex

官方：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化

vue-router

Vue Router 是 Vue.js 官方的路由

less

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。

vue-cli3.0

脚手架
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统

2. 了解vue

vue地址： https://cn.vuejs.org/
官方解读：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

2.1 vue特性有哪些

生命周期
常见的指令
组件
插件
高级特性

2.1.1 Vue基本使用

1、指令、插值
指令：
v-text
v-html
v-show
v-if
v-else
v-else-if
v-for
v-on
v-bind
v-model
v-slot
v-pre
v-cloak
v-once

a、插值、表达式

b、指令、动态属性

c、v-html：会有xss风险、会覆盖子组件

f、computed和watch
computed有缓存，data不变则不会重新计算 watch 如何深度监听 info:{ handler(oldVal,val){
```
},
deep:true
```
}
watch监听引用类型，拿不到oldVal

e、class和style
使用动态属性使用驼峰式写法

g、条件渲染
v-if v-else的用法，可使用变量，也可以使用===表达式
v-if 和v-show的区别
v-if和v-show的使用场景

l、事件
【观察】事件被绑定到哪里
event是原生的
事件被挂在到当前元素

2.1.2 组件

1. Vue组件使用
props和$emit
组件间通讯-自定义事件

event.$emit(‘add’,this.add) event.$on(‘add’,this.addHandler)

组件生命周期

挂载阶段更新阶段销毁阶段

2.1.3 Vue高级特性

1. 自定义v-model

2. $nextTick

Vue 是异步渲染 data 改变之后，DOM不会立刻渲染 $nextTick会在DOM渲染之后被触发，以获取最新DOM节点

3. slot

4. 动态、异步组件

异步组件：图表 import() 函数第三ui库按需加载

5. keep-alive

频繁切换，不需要重复渲染

6. mixin

变量来源不明确，不利于阅读多mixin可能会造成命名冲突 mixin和组件可能出现多对多的关系，复杂度较高

7. vuex 使用

dispatch
commit
mapstate
mapGetters
mapActions
mapMutations
8. vue-router
动态路由
to和push
hash和history
懒加载（配合动态组件）
2.2 vue安装使用
Node版本要求：
3.x需要在Node.js8.9或更高版本(推荐8.11.0+)，点击这里可以安装node
大多数人都安装过了node,使用下面的命令行查询你的node版本:
```
node -v
```
如果你的版本不够，可以使用下面的命令行来把Node版本更新到最新的稳定版：
```
npm install -g n // 安装模块 这个模块是专门用来管理node.js版本的
n stable // 更新你的node版本
```
2.2.1 安装vue-cli:
```
npm install -g @vue/cli // 安装cli3.x
vue --version // 查询版本是否为3.x
```
如果cli3.x用的不舒服，cli3也能使用2.x模板：
```
npm install -g @vue/cli-init // 安装这个模块
// 就可以使用2.x的模板：vue init webpack my-project
```
2.2.2 第一次创建项目:
1. 命令行
```
vue create vue-test-learn
```

选择模板

1、开始只有两个选项: default(默认配置)和Manually select features(手动配置)默认配置只有babel和eslint其他的都要自己另外再配置，所以我们选第二项手动配置。
2、在每次选择手动配置之后，会询问你是否保存配置，也就是图片中的koro选项，这样以后我们在进行创建项目的时候只需使用原先的配置就可以了，而不用再进行配置。

解决： vue CLI 3 项目创建时，git bash 箭头选择无效问题

https://blog.csdn.net/weixin_33971130/article/details/88677213?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.edu_weight&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.edu_weight
前端第一次技术分享 - 图1

>(*) Choose Vue version
 (*) Babel
 ( ) TypeScript // 支持使用 TypeScript 书写源码
 ( ) Progressive Web App (PWA) Support  // PWA 支持
 ( ) Router // 支持 vue-router
 ( ) Vuex // 支持 vuex
 ( ) CSS Pre-processors  // 支持 CSS 预处理器。
 (*) Linter / Formatter  // 支持代码风格检查和格式化。
 ( ) Unit Testing // 支持单元测试。
 ( ) E2E Testing // 支持端对端测试。

2. 配置项说明

1、CSS Pre-processors css预处理

选择CSS 预处理类型:Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default)  
选项：
    Less
    Sass
    Stylus

2、Linter / Formatter 代码风格、格式校验

选择Linter / Formatter类型:Pick a linter / formatter config:
选项：
    TSLint
    ESLint with error prevention only  仅错误预防
    ESLint + Airbnb config  Airbnb配置
    ESLint + Standard config 标准配置
    ESLint + Prettier
选择lint方式：Pick additional lint features
选项：
    Lint on save 保存时检查
    Lint and fix on commit 提交时检查

3、Unit Testing 单元测试

选择unit testing类型：Pick a unit testing solution: (Use arrow keys)
选项：
    Mocha + Chai  
    Jest

4、E2E Testing E2E（End To End）即端对端测试

选择E2E testing类型：Pick a E2E testing solution: (Use arrow keys)
选项：
    Cypress (Chrome only) 
    Nightwatch (Selenium-based)

5、选择 Babel, PostCSS, ESLint 等自定义配置的存放位置

Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?
 选项：
    In dedicated config files 在专用的配置文件中
    In package.json 在package.json

6、将此作为将来项目的预置吗？

Save this as a preset for future projects?
 选项：
    In dedicated config files 在专用的配置文件中
    In package.json 在package.json

7、项目启动

cd vue-learn
npm run serve

3. 进入项目，项目目录结构分析

├── 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. vue的生命周期详解

在我们对vue简单了解后，通过脚手架分析目录结构，然后在这里在深入去了解vue的生命周期
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
前端第一次技术分享 - 图2

beforeCreate(创建前)

在实例初始化之后，数据观测和事件配置之前被调用，此时组件的选项对象还未创建，el 和 data 并未初始化，因此无法访问methods， data， computed等上的方法和数据。

created (创建后)

实例已经创建完成之后被调用，在这一步，实例已完成以下配置： 数据观测、 属性和方法的运算， watch/event事件回调， 完成了data 数据的初始化，el没有。然而，挂在阶段还没有开始, $el属性目前不可见，这是一个常用的生命周期，因为你可以调用methods中的方法，改变data中的数据，并且修改可以通过vue的响应式绑定体现在页面上，，获取computed中的计算属性等等，通常我们可以在这里对实例进行预处理，也有一些童鞋喜欢在这里发ajax请求，值得注意的是，这个周期中是没有什么方法来对实例化过程进行拦截的，因此假如有某些数据必须获取才允许进入页面的话，并不适合在这个方法发请求，建议在组件路由钩子beforeRouteEnter中完成

beforeMount(挂载前)

挂在开始之前被调用，相关的render函数首次被调用（虚拟DOM），实例已完成以下的配置：编译模板，把data里面的数据和模板生成html，完成了el和data 初始化，注意此时还没有挂在html到页面上。

mounted(挂载后)

挂在完成，也就是模板中的HTML渲染到HTML页面中，此时一般可以做一些ajax操作，mounted只会执行一次。

beforeUpdate

在数据更新之前被调用，发生在虚拟DOM重新渲染和打补丁之前，可以在该钩子中进一步地更改状态，不会触发附加地重渲染过程

updated(更新后)

在由于数据更改导致地虚拟DOM重新渲染和打补丁只会调用，调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作，然后在大多是情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环，该钩子在服务器端渲染期间不被调用

beforeDestroy（销毁前）

在实例销毁之前调用，实例仍然完全可用，
这一步还可以用this来获取实例，一般在这一步做一些重置的操作，比如清除掉组件中的定时器和监听的dom事件 destroyed（销毁后）在实例销毁之后调用，调用后，所以的事件监听器会被移出，所有的子实例也会被销毁，该钩子在服务器端渲染期间不被调用

destroyed(销毁后)

销毁动作->性能优化处理 (清除掉组件中的定时器和监听的dom事件 destroyed,事件监听器会被移出)

5. 前端规范详解

https://www.yuque.com/zo5bgs/kpmh1b/mb2zp1

5.1 vscode、vscode+eslint配置

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

5.1.1 前端常用编辑器介绍

链接：http://note.youdao.com/noteshare?id=4a50a883c3b47336e50f53c15fdf9be1&sub=87F4D44EEE8E4247B3225657BC0075C7

5.1.2 VSCode插件推荐（前端开发）

https://github.com/varHarrie/varharrie.github.io/issues/10
1、vscode 扩展设置

依次点击文件 > 首选项 > 设置打开 VSCode 配置文件，添加如下配置：

文档：vscode setting.md
链接：http://note.youdao.com/noteshare?id=a80a43d456f71fb04eb8db4cc2ae2f28&sub=8300990F93F0411FADCDD65ACFF208DA
2、.eslintrc.js
文档：vue eslintrc.js.md
链接：http://note.youdao.com/noteshare?id=490f11995d5ff445c17e04d5a3bcb96f&sub=634E16A729C44F61BBD4D23BE4188F34
3、.eslintignore
文档：vue eslintignore.md
链接：http://note.youdao.com/noteshare?id=286230df8419e072bafd36304a7fd5de&sub=A0959D36A23B479EA0EC5C3E8FBE2287

前言

1. 团队接下来需要使用的技术栈

2. 了解vue

2.1 vue特性有哪些

2.1.1 Vue基本使用

1、指令、插值

a、插值、表达式

b、指令、动态属性

c、v-html：会有xss风险、会覆盖子组件

f、computed和watch

e、class和style

g、条件渲染

l、事件

2.1.2 组件

1. Vue组件使用