vue 项目配置

  • 安装 vue cli
  • 创建项目: vue create xxx, 选择自定义配置
  • 配置 eslint:
// .eslintrc.js
module.exports = {
  "root": true,
  "env": {
    "node": true
  },
  "extends": [
    "plugin:vue/essential",
    "@vue/airbnb"
  ],
  "rules": {
    "semi": [
      "error",
      "never"
    ],
    "comma-dangle": [
      "off",
      "never"
    ],
    "space-before-function-paren": [
      "error",
      "always"
    ],
    "import/extensions": [
      "off",
      "never"
    ],
    "import/no-unresolved": [
      "off",
      "never"
    ],
    "import/no-dynamic-require": [
      "off",
      "never"
    ],
    "global-require": [
      "off"
    ],
    "max-len": [
      "warn",
      {
        "code": 100,
        "ignoreTemplateLiterals": true,
        "ignoreUrls": true,
        "ignoreTrailingComments": true,
        "ignoreComments": true
      }
    ]
  }
  • 配置 husky, link-staged: npm i -D lint-staged husky@next
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,vue}": "eslint"
  }
  • 配置端口, sass 全局文件
const fs = require('fs')

module.exports = {
  lintOnSave: false,
  devServer: {
    port: 2019,
    disableHostCheck: true,
  },
  css: {
    loaderOptions: {
      sass: {
        data: fs.readFileSync('src/assets/styles/variables.scss', 'utf-8'),
      },
    },
  },
}