怎么把HTML网页重构为VUE,前端VUE重构之路

今年8月份进入前端重构组，用vue重构jq老工程，记录一下在重构过程中遇到的问题、解决方法和一些心得体会吧。项目技术栈：Vue + Vue-Router + Vuex， UI组件库用的有赞的vant

团队介绍：前端重构组共三人，我和一个同届的18年校招生，还有我们的师傅，我们师傅是一个有十年前端工作经验的前端大牛，师傅主要做项目架构和底层方法的封装，也做一些业务逻辑，我们两个主要是负责不同的业务模块、功能点的实现

一 、知识点

1.组件通信Event Bus

这一节介绍了一种组件通信方式，详情戳这里

2.组件划分和插槽

这一节写的关于是组件划分和组件插槽solt的使用方法，详情戳这里

3.前端老司机得心应手的操作数组方法全在这里了

这一节主要是是数组的操作方法，详情戳这里

4.Vant 下拉刷新上拉加载组件

这一节做了一个下拉刷新，上拉加载的demo 详情戳这里

5.前端视为转变-从事件驱动到数据驱动

转载，之前用jq操作DOM头都晕了，重构用的vue终于可以不用去直接操作DOM了，推荐大家看看这篇文章，详情戳这里

6.混入mixins与extend

待补充：当多个页面要加入相同的js代码的话可以考虑使用，mixins和extend具有vue的生命周期方法

const test = {

data () {

return {

a: 'just a test'

}

},

create () {

console.log('mixins creat')

this.testFun()

},

mounted () {

console.log('mixins mouted')

},

methods: {

testFun () {

console.log('this is testFun')

}

}

}

// 调用

mixins: ['test']

复制代码

7.搭建UI组件平台

待补充：搭建一套UI组件，用NPM发布

一期：icon、button、cell、dialog、input、checkbox、radio、loading、toast

8.npm命令自动生成页面

配置package.json 中npm命令，自动生成vue文件详情

9.统一接口请求拦截

待补充：配置项目请求方法

10.vuex的使用

待补充：vuex的使用方法

二、 遇到的问题和解决方案

1.骨架屏与首包加载

问题描述： 一开始在页面中引入了骨架屏组件，但是首包加载js时间过长，导致骨架屏显示的作用不大

后来使用了vue-skeleton-webpack-plugin，根据路由配置骨架屏，接口请求成功再隐藏掉骨架屏

解决方案： 类似这个文章

2.自定义指令更新问题

问题描述： 切换tab 自定义指令没有更新等问题

解决方案： 设置唯一的key 待补充

3.组件解耦与多参数传递问题

问题描述： 嵌套组件之间传参，用props、$emit 和event bus 的话会很复杂

解决方案： 准备用 $attrs和与 $listeners，或者是provide、inject ，组件拆分颗粒度的话是一个值得思考的内容，组件如果拆的太散的话，组件通信就会变得很复杂，但是拆分组件又可以减少代码耦合度，怎么样才是最优解，要根据实际的业务场景来决定。

4.修改对象数组中对象属性值

问题描述： 数组层级过深，修改对象数组中对象属性值，视图没有立即更新

解决方案：

方案1：用$set

this.$set(this.numbers,index,1);

方案2：用$nextTick

vm.$nextTick( [callback] )

将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。

this.$nextTick(function (){

console.log('2')

})

方案3：vue数组变异

[

'push',

'pop',

'shift',

'unshift',

'splice',

'sort',

'reverse'

]

方案4：强制刷新

vm.$forceUpdate()

迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。

复制代码

5.页面下拉刷新

问题描述： 页面下拉刷新执行页面的初始化方法，子组件没有跟着更新

解决方案： 暂时解决方案，刷新 会导致页面闪动，有同事提出让子组件能够监听到下拉事件，执行子组件的初始化方法

三、 总结

问题不大，不要慌

复杂情况多想想，可以画个图梳理一下，想好再动手

再难的问题也是有解决问题，一定要冷静分析

有些问题其实是可以通过运营手段规避的

有些东西其实是可以商量的，就看你是不是只知道敲代码

有效的沟通可以让你少走冤枉路

看官网，最想让你看懂的人就是这个"东西"的"制作者"

底子要扎实，才能走的更远

吾日三省吾身，多尝试新的东西，不要天天重复写之前的内容

未完待续。。。