vue1.0升级到vue2.0

最新推荐文章于 2025-11-18 09:35:02 发布

原创

最新推荐文章于 2025-11-18 09:35:02 发布 · 4.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue #升级

本文详细介绍了Vue1.0项目升级到Vue2.0的步骤，包括配置文件修改、升级方法以及代码调整。主要内容涉及package.json、build、config目录的更新，vue-router API变化，如初始化路由和v-link的替换，以及Vue2.0中的语法变化，如v-for、v-ref、模板结构、组件通讯和过渡效果的调整。

1.配置文件修改
1) Package.json文件修改
2) Build目录修改
3) Config目录修改
2.升级方法
升级的方法很简单，利用2.0的脚手架生成一个空文件夹，之后把pachage.json、build目录以及config目录覆盖1.0的版本。
3.vue1.0和vue2.0的区别
1.vue-router API变化
1)初始化路由变化
2)v-link指令替换为<router-link>组件
接下来开始升级
1.首先利用vue2.0的脚手架生成一个文件夹
2.将vue1.0的项目里面的src目录复制到vue2.0文件夹里面
这里我的vue1.0文件夹目录如下：
这里写图片描述
将src文件夹复制到了vue2.0脚手架生成的文件夹中，并且将index.html文件覆盖vue2.0脚手架生成的文件夹里面的index.html文件。在main.js中作修改，对比如下：
vue1.0的：
`

import Vue from ‘vue’;
import VueRouter from ‘vue-router’;
import VueResourse from ‘vue-resource’;
import App from ‘./App’;
import index from ‘./components/index/index.vue’;
import cart from ‘components/cart/cart.vue’;
import find from ‘components/find/find.vue’;
import my from ‘components/my/my.vue’;
import login from ‘components/login/login.vue’;
import ‘common/stylus/index.styl’;
import store from ‘./vuex/index’;
import ‘common/js/rem’;
Vue.use(VueRouter);
Vue.use(VueResourse);

vue2.0的：
import Vue from ‘vue’;
import VueRouter from ‘vue-router’;
import VueResourse from ‘vue-resource’;
import App from ‘./App’;
import index from ‘./components/index/index.vue’;
import cart from ‘components/cart/cart.vue’;
import find from ‘components/find/find.vue’;
import my from ‘components/my/my.vue’;
import login from ‘components/login/login.vue’;
import ‘common/stylus/index.styl’;
import store from ‘./vuex/index’;
import ‘common/js/rem’;
Vue.use(VueRouter);
Vue.use(VueResourse);
Vue.use(VueAMap);
const routes = [
{
path: ‘/’,
component: index
},
{
path: ‘/index’,
component: index
},
{
path: ‘/cart’,
component: cart
},
{
path: ‘/find’,
component: find
},
{
path: ‘/my’,
component: my
},
{
path: ‘/login’,
component: login
}
];
const router = new VueRouter({
linkActiveClass: ‘active’,
routes
});
/* eslint-disable no-new */
new Vue({
el: ‘#app’,
router,
store,
render: h => h(App)
});

做完以上工作之后，你以为就完成了吗？此时运行—–一大版错误
接下来在build目录下：
将vue1.0中的webpack.base.conf.js文件中的resolve覆盖vue2.0中同一目录同一文件的同一位置。在这里我的vue1.0里面webpack.base.conf.js的resolve做了配置如下：