Vue 笔记三：Vue2.0与1.0的区别

客官°小女子只卖身不卖艺 2022-07-10 04:56 142阅读 0赞

## 升级的区别 ##

与angular的断层式升级不同，vue延续了自己的风格。在命名方式和API上有一些区别，掌握它们是你升级整个项目的关键。以下内容都是来源于个人项目的一些经验之谈，并非系统性的阐述。如果需要系统的说明，参考官网。

*  [从 Vue 1.x 迁移][Vue 1.x]
 *  [从 Vue Router 0.7.x 迁移][Vue Router 0.7.x]
 *  [从 Vuex 0.6.x 迁移到 1.0][Vuex 0.6.x _ 1.0]

#### 命名方式的不同 ####

参考[聊聊 Vue 组件命名那些事][Vue]，Vue的关键字有所变化。一方面，你要注意大小写。另一方面，你要控件命名的过程中避免关键字，参考[\[Vue warn\]: Do not use built-in or reserved HTML elements as component id: text][Vue warn_ Do not use built-in or reserved HTML elements as component id_ text]，在1.0中并不会出现这样子的问题。

#### API的变化 ####

*  [\[译\] Vue 2.0 的变化（一）之基本 API 变化][Vue 2.0 _ API]
 *  [\[译\] Vue 2.0 的变化（二）之其他重大更改][Vue 2.0]  
    详情参考英文原文[vue 2.0 Changes][]。

#### render格式的必需性 ####

在2.0中，每个vue文件当中必须要有一个template。而1.0可以不需要。

## Vue2.0构建工具 ##

以下两个项目都支持Vue1.0和2.0。

#### [vue cli][] ####

官方尤大出品，使用[vue cli][]创建项目，有五种模板满足你的需求，分别是：

*  [webpack][] 运用webpack打包 + 测试
 *  [webpack-simple][] 运用webpack打包
 *  [browserify][] 运用browserify打包 +测试
 *  [browserify-simple][] 运用browserify打包
 *  [simple][] - 最简单的html文件

##### 使用方法 #####

其中初始化`init`的过程中，`webpack-simple`是指webpack的简易模板，可以被替换。

npm i vue-cli -g
    vue init webpack-simple projectname

#### [Cooking][] ####

饿了么出品，提供两种模板，[文档][Link 1]：

*  [simple][simple 1] 单页面Vue项目
 *  [multiple-pages-vue][] 多页面Vue项目

##### 使用方法 #####

其中创建`create`的过程中，`vue`指的是单页面的vue模板，可以被替换。

npm i cooking-cli -g cooking create my-project vue cd my-project && cooking watch cooking build

## Vue2.0样例 ##

> github源码在此，记得点星:  
> [https://github.com/brandonxiang/vue-leaflet-sync][https_github.com_brandonxiang_vue-leaflet-sync]
> 
> 该项目由vue 2.0开发

转载，请表明出处。[总目录前端经验收集器][Link 2]

转载自：http://www.jianshu.com/p/3b9ec883a915

好了，下面是广告时间。前端学习群，每天讨论技术问题。现在还不满，从速哦！入群加 **笑笑微信：iamaixiaoxiao**。

![Center][]

[Vue 1.x]: http://cn.vuejs.org/v2/guide/migration.html
[Vue Router 0.7.x]: http://cn.vuejs.org/v2/guide/migration-vue-router.html
[Vuex 0.6.x _ 1.0]: http://cn.vuejs.org/v2/guide/migration-vuex.html
[Vue]: http://cnodejs.org/topic/5816aabdcf18d0333412d323
[Vue warn_ Do not use built-in or reserved HTML elements as component id_ text]: https://github.com/sebastian-software/vue-locale/issues/46
[Vue 2.0 _ API]: https://segmentfault.com/a/1190000007012940
[Vue 2.0]: https://segmentfault.com/a/1190000007018605
[vue 2.0 Changes]: https://github.com/vuejs/vue/issues/2873
[vue cli]: https://github.com/vuejs/vue-cli
[webpack]: https://github.com/vuejs-templates/webpack
[webpack-simple]: https://github.com/vuejs-templates/webpack-simple
[browserify]: https://github.com/vuejs-templates/browserify
[browserify-simple]: https://github.com/vuejs-templates/browserify-simple
[simple]: https://github.com/vuejs-templates/simple
[Cooking]: https://github.com/ElemeFE/cooking
[Link 1]: http://cookingjs.github.io/zh-cn/intro.html
[simple 1]: https://github.com/cooking-demo/simple
[multiple-pages-vue]: https://github.com/cooking-demo/multiple-pages-vue
[https_github.com_brandonxiang_vue-leaflet-sync]: https://github.com/brandonxiang/vue-leaflet-sync
[Link 2]: http://www.jianshu.com/p/c1e3b96c1293
[Center]: /images/20220709/084e35f2750f4ecbaf2a812affd00419.png