欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue3.x:報(bào)錯(cuò)清單及解決記錄

 更新時(shí)間:2023年07月05日 14:54:45   作者:黑蘿卜不黑  
這篇文章主要為大家介紹了vue3.x:報(bào)錯(cuò)清單及解決記錄詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

報(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)文章!

相關(guān)文章

  • VUE微信H5生成二維碼海報(bào)保存在本地相冊(cè)的實(shí)現(xiàn)

    VUE微信H5生成二維碼海報(bào)保存在本地相冊(cè)的實(shí)現(xiàn)

    本文主要介紹了VUE微信H5生成二維碼海報(bào)保存在本地相冊(cè)的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-06-06
  • Vue自定義CSS變量的使用方法

    Vue自定義CSS變量的使用方法

    隨著前端技術(shù)的發(fā)展,CSS?變量(也稱為?CSS?定制屬性)成為了現(xiàn)代?Web?開(kāi)發(fā)中不可或缺的一部分,在?Vue.js?應(yīng)用程序中,使用?CSS?變量不僅可以增強(qiáng)樣式的靈活性,還能提高開(kāi)發(fā)效率,本文將詳細(xì)介紹如何在?Vue?項(xiàng)目中引入并使用?CSS?變量,需要的朋友可以參考下
    2024-09-09
  • Vue + Node.js + MongoDB圖片上傳組件實(shí)現(xiàn)圖片預(yù)覽和刪除功能詳解

    Vue + 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-04
  • Element?el-date-picker?日期選擇器的使用

    Element?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)列表功能

    這篇文章給大家介紹基于vue實(shí)現(xiàn)循環(huán)滾動(dòng)列表功能,給大家介紹了該組件的用法,通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧
    2021-09-09
  • websocket在vue2中的封裝使用方式

    websocket在vue2中的封裝使用方式

    這篇文章主要介紹了websocket在vue2中的封裝使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-08-08
  • 解決vue的component標(biāo)簽渲染問(wèn)題

    解決vue的component標(biāo)簽渲染問(wèn)題

    這篇文章主要介紹了解決vue的component標(biāo)簽渲染問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-03-03
  • vue fetch中的.then()的正確使用方法

    vue fetch中的.then()的正確使用方法

    這篇文章主要介紹了vue fetch中的.then()的正確使用方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-04-04
  • Vue 頁(yè)面跳轉(zhuǎn)不用router-link的實(shí)現(xiàn)代碼

    Vue 頁(yè)面跳轉(zhuǎn)不用router-link的實(shí)現(xiàn)代碼

    這篇文章主要介紹了 Vue 頁(yè)面跳轉(zhuǎn)不用router-link的實(shí)現(xiàn)代碼,文中給大家介紹了vue router-link跳轉(zhuǎn)傳值示例,需要的朋友可以參考下
    2018-04-04
  • vue實(shí)現(xiàn)彈窗引用另一個(gè)頁(yè)面窗口

    vue實(shí)現(xiàn)彈窗引用另一個(gè)頁(yè)面窗口

    這篇文章主要介紹了vue實(shí)現(xiàn)彈窗引用另一個(gè)頁(yè)面窗口,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-04-04

最新評(píng)論