最近在學習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往后面進行遞增,不會發生端口號沖突的情況,在vue1.0中會經常出現
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 scrollBehavior:()=>({ // 滾動條滾動的行為,不加這個默認就會記憶原來滾動條的位置 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'
新聞熱點
疑難解答
圖片精選