vue日常笔记

一、npm run server 报错：Failed to resolve loader: less-loader

样式中使用了 less，所以要安装less-loader

npm i less less-loader --save-dev

安装less-loader之后运行报错： this.getOptions is not a function
less-loader过高，安装低版本less-loader：

npm install less-loader@7.3.0 --save-dev

二、npm run server 报错： resolve is not defined

缺少辅助函数，在webpack的配置文件中加上就好了

const path = require('path')

const resolve = dir => {
    return path.join(__dirname, dir)
}

三、 引入全部样式变量

先按照两个插件：

npm i style-resources-loader
npm i vue-cli-plugin-style-resources-loader

在vue.config.js中配置

const path = require('path')

const resolve = dir => {
    return path.join(__dirname, dir)
}
module.exports = {
  pluginOptions: {
    'style-resources-loader': {
         preProcessor: 'less',
          patterns: [
              resolve('./src/assets/css/base.less'),
          ]
      }
  }
}

四、vscode Vue格式化HTML标签换行问题

"vetur.format.defaultFormatterOptions": {
  "js-beautify-html": {
  "wrap_attributes": "auto"
  // #vue组件中html代码格式化样式
   // 对属性进行换行。
  // - auto: 仅在超出行长度时才对属性进行换行。
  // - force: 对除第一个属性外的其他每个属性进行换行。
  // - force-aligned: 对除第一个属性外的其他每个属性进行换行，并保持对齐。
  // - force-expand-multiline: 对每个属性进行换行。
  // - aligned-multiple: 当超出折行长度时，将属性进行垂直对齐。
  }

五、解决Parsing error: Invalid ecmaVersion问题

遇到这个问题时，需要检查项目中的.eslintrc.js文件中，ecmaVersion的数值是否与环境一致。历代版本如下：

ecmaVersion - 默认设置为 3，5（默认）， 你可以使用 6、7、8、9 或 10 来指定你想要使用的 ECMAScript 版本。
你也可以用使用年份命名的版本号指定为 2015（同 6），2016（同 7），或 2017（同 8）或 2018（同 9）或 2019 (same as 10)