Vue2.0總結———vue使用過程常見的一些問題
Vue目前的的開發模式主要有兩種：
1.直接頁面級的開發，script直接引入Vue
2.工程性開發，webpack+loader或者直接使用腳手架工具Vue-cli，裏面的文件都配置好了
webpack可以進行配置，配置多文件入口，進行多頁面開發
第二種Vue開發，結合webpack打包完文件會很大，怎麽解決這個問題?
1.webpack代碼拆分：code-spliting
2.提取公共（如提取css,js）
3.預渲染：使用prerender-spa-plugin插件
4.後臺————開啟壓縮，gzip (會很有用)
5.異步加載組件：require.ensure
Vue常見錯誤解決方法：
1.[Vue-warn]: Missing required prop: "to" (found in component <router-link>)
這個錯誤是<router-link>少了個to或者是寫錯 ，正確寫法為：<router-link to="/home">
並且路由在做字符串拼接的時候，to要作為一個屬性綁定 <router-link :to="‘/home/‘+item.id">
2.端口沖突錯誤：需要改端口
當然現在vue2.0中的webpack 已經自己會根據你的端口號進行改正，從8080往後面進行遞增，
3.[Vue-warn]:Unknown custom element: <router-link> - did you register the component correctiy?
錯誤1：引進來的vue-router沒有use()
import Vue from ‘vue‘
import VueRouter from ‘vue-router‘
Vue.use(VueRouter);
錯誤2：在生成路由實例之後，沒有將路由掛到我們的Vue實例上面
const router=new VueRouter({
mode:‘history‘,//切換路徑模式，變成history模式,不然路徑為/#/home
y:0
}),
// 註意這裏的名稱
routes
});
new Vue({
/* 4.最後掛到vue上 */
router,
el: ‘#app‘,
render: h => h(App)
});
4.Uncaught TypeError: _vuex2.default.store is not a constructor
這個報錯的是_vuex2.default.store 不是一個構造函數
因為在我們用vuex的時候需要將用到的actions，mutations模塊最終導出，
在導出的時候new Vuex.Store中的Store小寫了，這裏的一定要大寫，
就相當於我們在使用構造函數(類)的時候首字母要大寫
import mutations from ‘./mutations.js‘
import actions from ‘./actions.js‘
export default new Vuex.Store({ //Vue.Stroe()首字母大寫
modules:{ //這裏註意mutations導出的是一個模塊
mutations
},
actions
});
5. Moudel not found:Error:Can‘t resolve "style" in ‘D:\vue-demo‘
在vue1.0中，在webpack.config.js中配置css文件時
module:{
loaders:[
{
test:/\.css$/,
loader:‘style!css‘
}
]
}
在vue2.0中，在webpack.config.js中配置css文件時，必須要寫全，不能和vue1.0一樣簡寫
module:{
rules:[ //這裏改成了rules
{
test:/\.css$/,
loader:‘style-loader!css-loader‘ //這裏必須要寫全，不能和vue1.0一樣簡寫
}
]
}
6.組件之間的通信從1.0過渡到2.0時引發的錯誤：
vue1.0實現父子組件的通信 -->通過props屬性-->並且子組件可以更改父組件的數據 通過sync同步
當在vue2.0裏面不允許直接給父級數據做更改,並且把這個方法.sync去掉了，
當子組件再試圖更改父組件的數據時，就會報錯。
解決方法：
1.$emit()——單一事件管理
經常遇到的問題是找不到$emit()或$on(),這時需要單獨準備一個文件Store.js
在文件裏面需要:var oEvent =new Vue();
這個這個文件裏的數據一定要導出去才可以使用：export default oEvent
2.對象之間的引用：(推薦使用)
vue1.0傳數據：msg:‘welcome‘ -->傳給子級
vue2.0直接將數據定義成對象json的形式，這樣傳給子級的數據是對象的屬性，即msg.title
這樣子級修改父級的數據，修改的也是這個對象的一個屬性msg.title
msg:{
title:‘welcome‘
}
msg.title
7.用vuex用來管理組件狀態：（增加/減少，顯示/隱藏）
8.axios目前不可以use，因為axios裏面沒有install這個方法
使用axios的時候，可以這樣來使用：
1.將axios導入文件
import axios from ‘axios‘
2.將axios放入到Vue實例上面，這樣在其他組件中，可以直接通過this.$https.get/post使用
在main.js中寫：Vue.prototype.$http = axios
其他組件可以直接使用：
this.$http.get(‘data.txt‘).then((res)=>{
console.log(res.data);
}).catch((err)=>{
console.log(err);
});
10) element.ui表頭點擊事件
使用element.ui之後 @click="" 無法對表頭等元素添加點擊事件，正確的寫法應該是@click.native=""
11)webpack2.0 插件的配置需要放到 plugins裏面進行配置，不可放到rules裏面進行配置
https://www.cnblogs.com/yufann/p/Vue-Node10.html
Vue2.0總結———vue使用過程常見的一些問題