脚本宝典收集整理的这篇文章主要介绍了vue-demo-collection 基于Vue2.x重构升级，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
去年vue还没有升级为2.0点时候，创建了这个库，并且写了几篇简单的入门教程。发现也有一些朋友都拿这个collection来入门vue，在去年10月份vue升级2.0版本后，我一直没时间来升级这个collection。现在终于有一整块时间来做升级。借助这几个demo来感受如何从vue1.x升级vue2.x。我新建了vue2.x分支，所有的升级改动都将提交到这个分支中。
vue: ^1.0.0 to ^2.2.1
vue-resource: ^0.7.4 to ^1.3.1
vue-router: ^0.7.13 to 2.5.2
vuex: ^0.6.3 to 2.3.1
webpack: ^1.12.2 to 2.2.0
看完版本升级对比，感觉我都是拿着“古董”写的vue1.x版本的demo。vue全家桶+webpack全部有了重要的更新。前端生态就是这样子，半年不去更新，世界都换了个样子。
本次升级全部基于vue-demo-collection下的demo进行升级。一定还有升级中没有接触到的点，这里不去深入。
webpack1.x和2.x最大的变化是module.loaders变成了module.rules
以下是vue-cli工具创建的vue1.x模版与vue2.x模版webpack配置文件module代码块对比。
不妨自己尝试一下，通过运行下面命令。找到工程目录中的webpack.conf.js对比一下。
vue inIT webpack-simple@1.0 vue1.xvue init webpack-simple vue2.x
对比发现:
module: {
- loaders: [
+ rules: [
{
test: /.vue$/,
- loader: 'vue'
+ loader: 'vue-loader',
+ options: {
+ loaders: {
+ }
+ // other vue-loader options go here
+ }
},
{
test: /.js$/,
- loader: 'babel',
+ loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /.(png|jpg|gif|svg)$/,
loader: 'url',
query: {
limit: 10000,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},入口文件
从升级入口文件main.js开始，Vue2.x的入口文件和Vue1.x相比，vue实例带有router和Store选项。
router配置参数注入路由，从而整个应用都有路由功能；
store配置参数注入store到根实例，从而根组件下所有子组件都可以访问store。
// 简单的main.js
import Vue From 'vue'
import VueResource from 'vue-resource'
import App from './App.vue'
Vue.use(VueResource)
new Vue({
el: '#app',
render: h => h(App)
})// 带有vue-router和vuex的main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routes'
import App from './App.vue'
import store from './vuex/store'
// Vue.config.devtools = true
Vue.use(VueRouter)
const router = new VueRouter({
scrollBehavior: () => ({ y: 0 }),
routes
})
// Start up our app
const app = new Vue({
router,
store,
...App
})
app.$mount("#root")$Index和$key在vue2.x中已经被弃用，代替写法为：
<li v-for="(value, key, index) in objs" ></li>
vue2.2.0+版本在组件使用v-for指令到时候需要指定key，这点和react类似。
首先看两张图：
vuex1.0数据流闭环
vuex2.0数据流闭环
vuex中的store选项，从App组件，移动到入口文件main.js，在创建Vue实例的时候通过store对象提供给store选项。
const app = new Vue({
store,
...App
})
app.$mount("#root")vue2.x中去掉了$remove方法，使用splice方法代替。
state.cart.splice(state.cart.indexOf(cartInfo), 1)
actions: {
increment ({ commit }) {
commit('increment')
}
}我对action中commit方法做了统一优化，用统一的函数处理commit。
import * as types from './mutation-types'
const makeAction = (type) => {
return ({ commit }, ...args) => commit(type, ...args)
}
export const changePrice = makeAction(types.CHANGE_PRICE)
export const changeStyle = makeAction(types.CHANGE_STYLE)
export const addItem = makeAction(types.ADD_ITEM)
export const removeItem = makeAction(types.REMOVE_ITEM)善用组件绑定的辅助函数
vuex2.x给开发者带来另一个福利，多了map*系列的辅助函数：
mapState - 创建组件的计算属性返回 Vuex store 中的状态
mapGetters - 创建组件的计算属性返回 getter 的返回值。
mapActions - 创建组件方法分发 action。
mapMutations - 创建组件方法提交 mutation。
vue-router2.x中，路由初始化时，在创建Vue实例的时候需要传入router配置向整个应用注入路由功能。
const app = new Vue({
router,
...App
})
app.$mount("#root")vue-router2.x中，router.map替换为router实例里的一个routes选项数组。
import Index from './components/Index.vue'
import Cart from './components/Cart.vue'
// Route config
export default [
{
path: '/',
name: 'Home',
component: Index
},
{
path: '/index',
name: 'Index',
component: Index
},
{
path: '/cart',
name: 'Cart',
component: Cart
},
{
path: '*',
redirect: '/'
}
]v-link指令已经被一个新的<router-link>组件指令替代。
<router-link class="navbar-brand" :to="{ path: '/' }">Shopping Cart</router-link>以上是脚本宝典为你收集整理的vue-demo-collection 基于Vue2.x重构升级全部内容，希望文章能够帮你解决vue-demo-collection 基于Vue2.x重构升级所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。