最全vue项目实战（vue项目学习与实战技术） - 原点资讯

大家好，我是Echa 哥，祝大家开工大吉！万事如意！

最全vue项目实战,vue项目学习与实战技术(1)

前言

vue作为前端主流的3大框架之一，目前在国内有着非常广泛的应用，由于其轻量和自底向上的渐进式设计思想，使其不仅仅被应用于PC系统，对于移动端，桌面软件（electronjs）等也有广泛的应用，与此诞生的优秀的开源框架比如elementUI，iView， ant-design-vue等也极大的降低了开发者的开发成本，并极大的提高了开发效率。笔者最初接触vue时也是使用的iview框架，亲自体会之后确实非常易用且强大。

笔者曾经有两年的vue项目经验，基于vue做过移动端项目和PC端的ERP系统，虽然平时工作中采用的是react技术栈，但平时还是会积累很多vue相关的最佳实践和做一些基于vue的开源项目，所以说总结vue的项目经验我觉得是最好的成长，也希望给今年想接触vue框架或者想从事vue工作的朋友带来一些经验和思考。

你将收获

vue框架使用注意事项和最佳经验
vue项目配置经验总结
vue组件设计经验总结
vue项目架构与服务化探索

正文

本文不仅仅是总结一些vue使用踩过的一些坑和项目经验，更多的是使用框架（vue/react）过程中的方法论和组件的设计思路，最后还会有一些个人对工程化的一些总结，希望有更多经验的朋友们可以一起交流，探索vue的奥妙。

在开始文章之前，笔者建议大家对javascript, css, html基础有一定的了解，因为会用框架不一定能很好的实现业务需求和功能，要想实现不同场景下不同复杂度的需求，一定要对web基础有充足的了解，所以希望大家熟悉如下基础知识，如果不太熟悉可以花时间研究了解一下。

javascript：

数组常用方法的使用，比如遍历有forEach，map，filter，every， some，reduce，操作方法有splice，slice， join，push，shift， pop，sort等
基本数据结构，引用类型（对象，数组）
基本逻辑运算if else， switch，三目运算：？，for/while循环等
字符串常见api（如replace，slice， substr，indexOf）
基本正则使用
变量作用域，作用域链，变量提升，函数声明提升
对象基本用法，面向对象编程

css：

基本盒模型（border/content/padding等）
4种常用定位（static/absolute/relative/fixed）
常用布局方式（浮动布局/弹性布局flex/自适应布局/网格布局grid）
css3基本样式与动画（transition，animation）

html：

新标签基本用法和使用
head标签作用与用法（主要是meta属性的用法）

所以希望大家掌握好以上基础知识，也是前端开发的基础，接下来我们直接进入正文。

1. vue框架使用注意事项和最佳经验

❝
vue学习最快的方式就是实践，根据官网多写几个例子是掌握vue最快的方式。接下来笔者就来总结一下在开发vue项目中的一些实践经验。
❞

1.1 vue生命周期以及不同生命周期下的应用

最全vue项目实战,vue项目学习与实战技术(2)

以上是vue官网上的生命周期的方法，大致划分一下分为创建前/后，挂载前/后，更新前/后，销毁前/后这四个阶段。各个阶段的状态总结如下：

beforeCreate：在beforeCreate生命周期执行时，data和methods中的数据还未初始化，所以此时不能使用data中的数据和methods中的方法
create：data 和 methods初始化完毕，此时可以使用methods 中的方法和data 中的数据
beforeMount：template模版已经编译好，但还未挂载到页面，此时页面还是上一个状态
mounted：此时Vue实例初始化完成了，DOM挂载完毕，可以直接操作dom或者使用第三方dom库
beforeUpdate：此时data已更新，但还未同步页面
updated：data和页面都已经更新完成
beforeDestory：Vue实例进入销毁阶段，但所有的 data 和 methods ，指令，过滤器等都处于可用状态
destroyed：此时组件已经被销毁，data，methods等都不可用

根据以上介绍，页面第一次加载时会执行 beforeCreate， created， beforeMount， mounted这四个生命周期，所以我们一般在created阶段处理http请求获取数据或者对data做一定的处理，我们会在mounted阶段操作dom，比如使用jquery，或者其他第三方dom库。其次，根据以上不同周期下数据和页面状态的不同，我们还可以做其他更多操作，所以说每个生命周期的发展状态非常重要，一定要理解，这样才能对vue有更多的控制权。

1.2 vue常用的指令以及动态指令的使用

指令 (Directives) 是带有 v- 前缀的特殊属性，vue常用的指令有：

v-bind 用于响应式地更新 HTML属性
v-if 根据表达式的值的真假来决定是否插入/移除元素
v-on 用于监听 DOM 事件
v-show 用于决定是否展示该元素，底层通过display：none实现
v-html 在dom内插入html内容
v-for 循环
v-text 渲染指定dom的内容文本
v-cloak 和CSS规则如 [v-cloak] { display: none } 一起用，可以隐藏未编译的 Mustache 标签直到实例准备完毕

以上是比较常用的指令，具体用法就不一一举例了，其中v-cloak主要是用来避免页面加载时出现闪烁的问题，可以结合css的[v-cloak] { display: none }方式解决这一问题。关于指令的动态参数，使用也很简单，虽然是2.6.0 新增的，但是方法很灵活，具体使用如下：

<a v-on:[eventName]="doSomething"> ... </a> 复制代码

我们可以根据具体情况动态切换事件名，从而绑定同一个函数。

1.3 vue常用修饰符及作用

事件修饰符

.stop 阻止事件冒泡
.prevent 阻止事件默认行为
.self 事件绑定的元素本身触发时才触发回调
.once 事件只能触发一次，第二次就不会触发了
.native 将一个vue组件变成一个普通的html，使其可以监听click等原生事件具体使用如下：

<Tag @click.native="handleClick">ok</Tag> 复制代码

表单修饰符

.lazy 在输入框输入完内容，光标离开时才更新视图
.trim 过滤首尾空格
.number 如果先输入数字，那它就会限制你输入的只能是数字;如果先输入字符串，那就相当于没有加.number

用法如下：

<input type="text" v-model.trim="value"> 复制代码

还有很多修饰符比如键盘，鼠标等修饰符，感兴趣的大家可以自行学习研究。

1.4 组件之间，父子组件之间的通信方案

组件之间的通信方案：

通过事件总线（bus），即通过发布订阅的方式
vuex

父子组件：

父组件通过prop向自组件传递数据
子组件绑定自定义事件，通过this.$emit(event,params) 来调用自定义事件
使用vue提供的 children & $refs方法来通信

最全vue项目实战,vue项目学习与实战技术(3)

1.5 vue实现按需加载组件

组件的按需加载是项目性能优化的一个环节，也可以降低首屏渲染时间，笔者在项目中用到的组件按需加载的方式如下：

使用() => import()，具体代码如下：

<template> <div> <ComponentA /> <ComponentB /> </div> </template> <script> const ComponentA = () => import('./ComponentA') const ComponentB = () => import('./ComponentB') export default { // ... components: { ComponentA, ComponentB }, // ... } </script> 复制代码

使用resolve => require(['./ComponentA'], resolve)，使用方法如下：

<template> <div> <ComponentA /> </div> </template> <script> const ComponentA = resolve => require(['./ComponentA'], resolve) export default { // ... components: { ComponentA }, // ... } </script> 复制代码「1.6 vuex的几种属性和作用，以及使用vuex的基本模式」