Vue2.0針對Vue1.0做出了部分改進,在官網上對於項目的遷移也做了較大的支持。
Vue2.0 文檔:https://vuefe.cn/guide/
Vue1.x的遷移方法等:https://vuefe.cn/guide/migration.html
在遷移的方法中介紹了對於1.0版本的改進。可以詳細的閱讀。本文主要針對你vue-cli腳手架工具編譯後的記錄與探究。
使用Vue腳手架進行項目的搭建大家可以參考:https://github.com/vuejs/vue-cli 。在安裝是目前會自動安裝2.0版本的Vue,如需安裝1.0版本的可以更改package.json中的dependencies的設置。此時只需將大版本好改爲1即可,即可安裝1.x.x的最新版
"dependencies":{
"vue": "^1.0.1"
},
在2.0版本中index.html中區別於1.0中的版本如下
<div id="app"></div> //2.0
<app></app> //1.0
相應的main.js中的文件如下
import App from './App'
new Vue({ //2.0
el: '#app',
template: '<App/>',
components: { App }
})
new Vue({ //1.0
el: 'body',
components: { App }
})
當我們將2.0中代碼轉化成1.0中的代碼的時候出現如下 禁止代碼的在html與body上掛載。
我們將app外圍包裹一層div時候在掛載在即可正常的展示
<div id="app"><app></app></div>
其實在2.0中建議將片斷的實例進行包裹。這裏設置template將直接覆蓋之前的index中div標籤。等價於局部註冊的使用只在父模板中使用
var App = {
template: '<div>....</div>'
}
new Vue({
// ...
components: {
'App': App
}
})