配置vue脚手架

  • 首先先安装完vue脚手架,执行vue-create 项目名
  • 选择一些配置vuex,vue-router 等等
  • 完成后,配置vue.config.js
const path = require('path')
const resolve = function(dir) {
  return path.join(__dirname, dir)
}
const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = {
  configureWebpack: {
    plugins: [
      new CopyWebpackPlugin({
        patterns: [
          {
            from: './static',
            to: 'static'
          }
        ]
      })
    ]
  },
  //   publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
  publicPath: './',
  outputDir: 'dist',
  assetsDir: 'static',
  lintOnSave: true, // 是否开启eslint保存检测
  productionSourceMap: false, // 是否在构建生产包时生成sourcdeMap
  chainWebpack: (config) => {
    config.resolve.alias
      .set('@', resolve('src'))
      .set('@v', resolve('src/views'))
      .set('@c', resolve('src/components')) // 公共组件
      .set('@u', resolve('src/utils')) // 工具库
    // .set('@s', resolve('src/service')) /* 别名配置 */
    config.optimization.runtimeChunk('single')
  },
  devServer: {
    host: 'localhost',
    port: '8080',
    hot: true,
    /* 自动打开浏览器 */
    open: false,
    overlay: {
      warning: false,
      error: true
    },
    // 代理
    proxy: {
      '/api': {
        /* 目标代理服务器地址 */
        target: 'http://localhost:3000',
        /* 允许跨域 */
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}
  • npm run serve 启动服务.

配置eslint+prettier

在vscode插件商店,下载上面2个插件

  • vscode左上角,文件件->首选项->设置 ,查找setting.json
{
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "workbench.colorTheme": "Dracula",
  "editor.fontSize": 23,

  /* eslint插件配置 */
  "eslint.enable": true,
  //"eslint.autoFixOnSave": true,//此选项最新版已被editor包含,变为editor.codeActionsOnSave
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true //eslint保存文件时自动修复
  },
  "eslint.alwaysShowStatus": true,
  // "eslint.nodePath": "c:\\Users\\node_modules",//这个会防止项目打开其他项目文件时路径改变,导致eslint不会出现提示,最好将此设置为工作区中
  "eslint.run": "onType",
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact", "html", "vue", "jsx"],
  // "eslint.validate": [//最新版Auto Fix is enabled by default. Use the single string form.
  //   {
  //     "language": "javascript",
  //     "autoFix": true
  //   },
  //   "javascriptreact",
  //   "jsx",
  //   {
  //     "language": "html",
  //     "autoFix": true
  //   },
  //   {
  //     "language": "vue",
  //     "autoFix": true
  //   }
  // ],
  "eslint.options": {
    "extensions": [".js", ".vue"]
  },
  /* prettier格式化插件配置 */
  "prettier.jsxBracketSameLine": true,
  "prettier.semi": false, // 句尾添加分号
  "prettier.printWidth": 150,
  "prettier.singleQuote": false,
  /* vetur插件配置 */
  "vetur.validation.template": true, //eslint-plugin-vue校验打开
  "vetur.format.defaultFormatter.js": "vscode-typescript", //vue文件中js默认格式化
  "vetur.format.defaultFormatter.html": "js-beautify-html", //vue中格式化html
  "vetur.format.defaultFormatterOptions": {
    //vue文件格式化配置
    "js-beautify-html": {
      "wrap_line_length": 150,
      "wrap_attributes": "auto",
      "end_with_newline": false
    },
    "prettyhtml": {
      "printWidth": 150,
      "singleQuote": false,
      "wrapAttributes": false,
      "sortAttributes": false
    }
  }
}

根目录下创建.eslintrc.js,.eslintignore ,并配置

to be continued...


爬。