vue3.x:報(bào)錯(cuò)清單及解決記錄
報(bào)錯(cuò)提示
component name “index“ should always be multi-word
在組件命名的時(shí)候不夠規(guī)范,根據(jù)官方風(fēng)格指南,除了根組件(App.vue)外,自定義組件名稱應(yīng)該由多單詞組成,防止和html標(biāo)簽沖突。vue-cli創(chuàng)建的項(xiàng)目使用了最新的vue/cli-plugin-eslint插件,在vue/cli-plugin-eslint v7.20.0版本之后就引用了vue/multi-word-component-names規(guī)則,所以在編譯的時(shí)候判定此次錯(cuò)誤。
解決方式
1. 修改文件名稱
修改組件名為多個(gè)單詞,使用大駝峰或是小駝峰命名規(guī)則。
2. 關(guān)閉eslint校驗(yàn)
在根目錄下找到vue.config.js文件(如果沒(méi)有則新建一個(gè)),添加下面的代碼:
const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ transpileDependencies: true, // 添加此行代碼 lintOnSave:false })
3. 關(guān)閉命名規(guī)則校驗(yàn)
在根目錄下找到 .eslintrc.js 文件,同樣如果沒(méi)有則新建一個(gè)(注意文件前有個(gè)點(diǎn)),添加下面的代碼:
"vue/multi-word-component-names":"off",
示例
module.exports = { root: true, env: { node: true }, 'extends': [ 'plugin:vue/essential', 'eslint:recommended' ], parserOptions: { parser: '@babel/eslint-parser' }, rules: { 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', // 在rules中添加自定義規(guī)則 // 關(guān)閉組件命名規(guī)則 "vue/multi-word-component-names":"off", }, overrides: [ { files: [ '**/__tests__/*.{j,t}s?(x)', '**/tests/unit/**/*.spec.{j,t}s?(x)' ], env: { jest: true } } ] }
4. 官方建議忽略個(gè)別組件名
module.exports = { root: true, env: { node: true }, 'extends': [ 'plugin:vue/essential', 'eslint:recommended' ], parserOptions: { parser: '@babel/eslint-parser' }, rules: { 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', // 在rules中添加自定義規(guī)則 // 添加組件命名忽略規(guī)則 "vue/multi-word-component-names": ["error",{ // 需要忽略的組件名 "ignores": ["index"] }] }, overrides: [ { files: [ '**/__tests__/*.{j,t}s?(x)', '**/tests/unit/**/*.spec.{j,t}s?(x)' ], env: { jest: true } } ] }
以上就是vue3.x:報(bào)錯(cuò)清單及解決記錄的詳細(xì)內(nèi)容,更多關(guān)于vue3.x報(bào)錯(cuò)解決的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
- vue報(bào)錯(cuò)Not?allowed?to?load?local?resource的解決辦法
- 解決vue3報(bào)錯(cuò):找不到模塊或其相應(yīng)的類型聲明
- Vue報(bào)錯(cuò):Injection?"xxxx"?not?found的解決辦法
- 報(bào)錯(cuò)[vuex] unknown action type: userLogin問(wèn)題及解決
- vue-router報(bào)錯(cuò):uncaught error during route navigati問(wèn)題及解決
- vue 解決報(bào)錯(cuò)問(wèn)題小結(jié)
相關(guān)文章
VUE微信H5生成二維碼海報(bào)保存在本地相冊(cè)的實(shí)現(xiàn)
本文主要介紹了VUE微信H5生成二維碼海報(bào)保存在本地相冊(cè)的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-06-06Vue + Node.js + MongoDB圖片上傳組件實(shí)現(xiàn)圖片預(yù)覽和刪除功能詳解
這篇文章主要介紹了Vue + Node.js + MongoDB圖片上傳組件實(shí)現(xiàn)圖片預(yù)覽和刪除功能,結(jié)合實(shí)例形式詳細(xì)分析了Vue + Node.js + MongoDB基于圖片上傳組件實(shí)現(xiàn)圖片預(yù)覽和刪除功能相關(guān)操作技巧,需要的朋友可以參考下2020-04-04Element?el-date-picker?日期選擇器的使用
本文主要介紹了Element?el-date-picker?日期選擇器的使用,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04基于vue實(shí)現(xiàn)循環(huán)滾動(dòng)列表功能
這篇文章給大家介紹基于vue實(shí)現(xiàn)循環(huán)滾動(dòng)列表功能,給大家介紹了該組件的用法,通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2021-09-09解決vue的component標(biāo)簽渲染問(wèn)題
這篇文章主要介紹了解決vue的component標(biāo)簽渲染問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-03-03Vue 頁(yè)面跳轉(zhuǎn)不用router-link的實(shí)現(xiàn)代碼
這篇文章主要介紹了 Vue 頁(yè)面跳轉(zhuǎn)不用router-link的實(shí)現(xiàn)代碼,文中給大家介紹了vue router-link跳轉(zhuǎn)傳值示例,需要的朋友可以參考下2018-04-04vue實(shí)現(xiàn)彈窗引用另一個(gè)頁(yè)面窗口
這篇文章主要介紹了vue實(shí)現(xiàn)彈窗引用另一個(gè)頁(yè)面窗口,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04