Vue報錯Component?name"Home"should?always?be?multi問題
Vue報錯Component name"Home"should always be multi
原因
報錯的大概意思是: 組件名“Home”應該總是多字的vue/多字的組件名
解決辦法
package.json
"vue/multi-word-component-names": 0 // 多字符組件名稱,不設置檢測
如圖
看了網(wǎng)上很多人都去把eslint關了╮(╯▽╰)╭
個人建議千萬不要,團隊開發(fā)eslint是一定要開的,至于為什么自己可以找點資料看一下。
vue常見錯誤解決
最近在做vue項目的時候遇到了幾個報錯,這幾個報錯在vue項目還算常見,因此記錄下來解決方法。
Error in render: “TypeError: Cannot read property ‘list’ of undefined”
報錯: 渲染錯誤:“未定義的Type Error:無法讀取屬性”列表
原因: 沒給list定義,也就是說在temple中用到list了,但是在data中沒定義這個字段,如果已經(jīng)定義了但是還是報錯,請檢查下自己是否拼錯了單詞,因為我就是這么蠢了= =
解決:
data () { ? return { ? ? list: [] ? } },
[Vue warn]: Property or method “message” is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property
報錯: message沒定義
原因: 跟上面的一樣,message在data那里沒有定義,定義一個初始值就好
解決:
data() { ?return { ? ? ?message: '' ? } },
Module build failed: Error: No parser and no file path given, couldn’t infer a parser.
報錯: 沒有語法分析器和文件路徑,無法推斷解析器
原因: 依賴包出現(xiàn)問題,prettier 一個vue-cli的依賴,把一個feature 的移除當作次版本發(fā)布
解決: npm install --save-dev prettier@1.12.0(刪除 node_modules下_prettier@1.13.0@prettier文件夾)
routes forEach is not a function
原因: forEach routes沒有發(fā)現(xiàn)里面有值
解決:
1.查看import {routes} from './routes’這個路徑是否正確
2.routes是一個數(shù)組,檢查routes是否是一個數(shù)組
3.是否已經(jīng)new了一個router,又再次new一遍?
// main.js // 路由配置 const RouterConfig = { ? // 使用HTML5的History模式 ? mode: 'history', ? routes: Routers } // new VueRouter const router = new VueRouter(RouterConfig) // router.js // 在router中又再次new一遍,重復了?。。?! export default new Router({ ? routes: [ ? ? { ? ? ? path: '/', ? ? ? name: 'home', ? ? ? component: home ? ? } ? ] }) 改為: // router.js const routers = [ ? { ? ? path: '/home', ? ? meta: { ? ? ? title: '主頁' ? ? }, ? ? component: (resolve) => require(['../page/home.vue'], resolve) ] export default routers
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the “name” option.
原因: 被引用的組件頁面沒有進行export,導致尋找不到瀏覽器console報錯,但是編譯的時候沒有語法問題不報錯
解決:
export { default as AppMain } from './AppMain'
TypeError: Cannot read property ‘vue’ of undefined
報錯信息:ERROR in ./src/login.vue Module build failed (from ./node_modules/_vue-loader@13.7.3@vue-loader/index.js): TypeError: Cannot read property ‘vue’ of undefined at Object.module.exports (F:\VistualStudioCode\threess\node_modules_vue-loader@13.7.3@vue-loader\lib\load er.js:61:18) @ ./src/main.js 7:13-35 @ multi ./node_modules/_webpack-dev-server@3.1.10@webpack-dev-server/client?http://localhost:3000 (webpack)/h ot/dev-server.js ./src/main.js
原因: vue-loader這個插件被破壞了
解決:
// 重新安裝依賴 npm install vue-loader@latest --save-dev
route內(nèi)的query參數(shù)沒有實時監(jiān)聽,放在data中
報錯信息: 導致query參數(shù)改變之后,頁面并沒有發(fā)生變化
解決:
? watch: { ? ? $route: { ? ? ? handler (newVal, oldVal) { ? ? ? ? this.isBindInfo = newVal.query.isBindInfo ? ? ? ? this.isRealName = newVal.query.isRealName ? ? ? ? this.sessionId = newVal.query.sessionId ? ? ? ? this.showNo = newVal.query.showNo ? ? ? ? // 判斷newVal有沒有值監(jiān)聽路由變化 ? ? ? }, ? ? ? deep: true, ? ? }, ? },
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
Vue3監(jiān)聽store中數(shù)據(jù)變化的三種方式
這篇文章給大家介紹了Vue3監(jiān)聽store中數(shù)據(jù)變化的三種方法,使用watch和storeToRefs函數(shù),使用計算屬性computed和使用watchEffect函數(shù)這三種方法,文中通過代碼講解非常詳細,需要的朋友可以參考下2024-01-01在Vue里如何把網(wǎng)頁的數(shù)據(jù)導出到Excel的方法
這篇文章主要介紹了在Vue里如何把網(wǎng)頁的數(shù)據(jù)導出到Excel,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-09-09