antdesignvuepro编译后调⽤api_2年vue项⽬实战经验汇总前⾔
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官⽹上的⽣命周期的⽅法，⼤致划分⼀下分为创建前/后，挂载前/后，更新前/后，销毁前/后这四个阶段。各个阶段的状态总结如下：
beforeCreate：在beforeCreate⽣命周期执⾏时，data和methods中的数据还未初始化，所以此时不能使⽤data中的数据和methods中的⽅法
created：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 新增的，但是⽅法很灵活，具体使⽤如下：
... 复制代码
我们可以根据具体情况动态切换事件名，从⽽绑定同⼀个函数。
1.3 vue常⽤修饰符及作⽤
1. 事件修饰符electron vue教程
.stop 阻⽌事件冒泡
.prevent 阻⽌事件默认⾏为
.
self 事件绑定的元素本⾝触发时才触发回调
.once 事件只能触发⼀次，第⼆次就不会触发了
.native 将⼀个vue组件变成⼀个普通的html，使其可以监听click等原⽣事件 具体使⽤如下：
ok复制代码
2. 表单修饰符
.lazy 在输⼊框输⼊完内容，光标离开时才更新视图
.trim 过滤⾸尾空格
.number 如果先输⼊数字，那它就会限制你输⼊的只能是数字；如果先输⼊字符串，那就相当于没有加.number
⽤法如下：
复制代码
还有很多修饰符⽐如键盘，⿏标等修饰符，感兴趣的⼤家可以⾃⾏学习研究。
1.4 组件之间，⽗⼦组件之间的通信⽅案
组件之间的通信⽅案：
通过事件总线(bus)，即通过发布订阅的⽅式
vuex
⽗⼦组件：
⽗组件通过prop向⾃组件传递数据
⼦组件绑定⾃定义事件，通过this.$emit(event,params) 来调⽤⾃定义事件
使⽤vue提供的 children & $refs⽅法来通信
1.5 vue实现按需加载组件
组件的按需加载是项⽬性能优化的⼀个环节，也可以降低⾸屏渲染时间，笔者在项⽬中⽤到的组件按需加载的⽅式如下：
1. 使⽤() => import()， 具体代码如下：
复制代码
2. 使⽤resolve => require(['./ComponentA'], resolve)，使⽤⽅法如下：
复制代码
1.6 vuex的⼏种属性和作⽤，以及使⽤vuex的基本模式
Vuex 是⼀个专为 Vue.js 应⽤程序开发的状态管理模式。它采⽤集中式存储管理应⽤的所有组件的状态，并以相应的规则保证状态以⼀种可预测的⽅式发⽣变化。
vuex的基本⼯作模式如下图所⽰：
state的改变完全由mutations控制， 我们也没必要任何项⽬都使⽤vuex，对于中⼤型复杂项⽬⽽⾔，需要共享的状态很多时，使⽤vuex 才是最佳的选择。接下来我将详细介绍各api的概念和作⽤。
state 单⼀状态树，⽤⼀个对象就包含了全部的应⽤层级状态，并且作为⼀个唯⼀数据源⽽存在

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。