前言
接手一个项目在开发过程中发现的问题:
一个.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
-
a、插值、表达式
b、指令、动态属性
c、v-html:会有xss风险、会覆盖子组件
f、computed和watch
computed有缓存,data不变则不会重新计算 watch 如何深度监听 info:{ handler(oldVal,val){
},
deep:true
e、class和style
g、条件渲染
v-if v-else的用法,可使用变量,也可以使用===表达式
- 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. 动态、异步组件
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版本更新到最新的稳定版:node -v
npm install -g n // 安装模块 这个模块是专门用来管理node.js版本的 n stable // 更新你的node版本
2.2.1 安装vue-cli:
如果cli3.x用的不舒服,cli3也能使用2.x模板:npm install -g @vue/cli // 安装cli3.x vue --version // 查询版本是否为3.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 箭头选择无效问题
>(*) 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 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。
- 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