入手vuecli3的一些坑的解决

我之前用的是vuecli2，虽然看起来庞大但是上手之后非常好操作，脚手架提供的代码需要改动的不多，它几乎都帮你配置好了，看有人用vuecli3我就想着上手试试，它的目录看起来清爽简单，但是尝试时可能是误点了一些操作，然后发现有好多东西都需要自己按需配置，因此无可避免的踩了一些坑，把摸索出来的解决方法贴出来，希望帮到一些人。
其中的webpack.config.js和.eslintrc.js和vue.config.js是为难我最久的，因为 vuecli2只要你npm了就自动帮你配置好了，但是vuecli3不会，这三样需要自己手动添加文件配置，因此使用时就出现了如下问题：

导入element-ui时报错

导入语句：

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

结果报错了，是说找不到index.css这个模块，一查是需要手动配置 webpack.config.js，我目前的配置如下： loaders部分配置后问题解决

// webpack在执行时，除在命令行传入参数，还可以通过指定的配置文件来执行。默认会搜索当前目录下webpack.config.js。
// 这个文件是一个node.js模块，返回一个json格式的配置对象，或者通过--config选项来指定配置文件。
import webpack from 'webpack'
// var webpack = require('webpack');
module.exports = {
  entry: './entry.js',  // 入口文件
  // entry可以是个字符串或数组或者是对象。
  // 当entry是个字符串的时候，用来定义入口文件：
  // 当entry是个数组的时候，里面同样包含入口js文件，另外一个参数可以是用来配置webpack提供的一个静态资源服务器
  // ，webpack-dev-server。webpack-dev-server会监控项目中每一个文件的变化，实时的进行构建，并且自动刷新页面：
  // entry: [
  //      'webpack/hot/only-dev-server',
  //      './js/app.js'
  // ]
  output: {
    // node.js中__dirname变量获取当前模块文件所在目录的完整绝对路径
    path: __dirname, // 输出位置
    filename: 'build.js' // 输入文件
  },
  // output参数是个对象，用于定义构建后的文件的输出。其中包含path和filename


  module: {  // 关于模块的加载相关，我们就定义在module.loaders中。这里通过正则表达式去匹配不同后缀的文件名
    // ，然后给它们定义不同的加载器。比如说给less文件定义串联的三个加载器（！用来定义级联关系）：
    // loaders: [
    //     { test: /\.js?$/, loaders: ['react-hot', 'babel'], exclude: /node_modules/ },
    //     { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
    //     { test: /\.css$/, loader: "style!css" },
    //     { test: /\.less/, loader: 'style-loader!css-loader!less-loader'}
    // ]
    loaders: [
      {
        test: /\.css$/,      // 支持正则
        loader: 'style-loader!css-loader'
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        loader: 'file-loader'
      },
    ]
  },
  // 其他解决方案配置
  resolve: { // webpack在构建包的时候会按目录的进行文件的查找，
    // resolve属性中的extensions数组中用于配置程序可以自行补全哪些文件后缀
    extensions: ['', '.js', '.json', '.css', '.scss']   // 添加在此的后缀所对应的文件可省略后缀,
    // 然后我们想要加载一个js文件时，只要require(‘common’)就可以加载common.js文件了。
  },
  // 插件
  plugins: [
    new webpack.BannerPlugin('This file is create by baibai')
  ]

//   当我们想在项目中require一些其他的类库或者API，而又不想让这些类库的源码被构建到运行时文件中，
// 这在实际开发中很有必要。此时我们就可以通过配置externals参数来解决这个问题：
//
//  externals: {
//      "jquery": "jQuery"
//  }
//
//
// 这样我们就可以放心的在项目中使用这些API了：var jQuery = require(“jquery”);
}

配置vue.config.js

这部分文档很多，很乱，待整理，目前写了这样：

module.exports = {
  // baseUrl  type:{string} default:'/'
  // 将部署应用程序的基本URL
  // 将部署应用程序的基本URL。
  // 默认情况下，Vue CLI假设您的应用程序将部署在域的根目录下。
  // https://www.my-app.com/。如果应用程序部署在子路径上，则需要使用此选项指定子路径。例如，如果您的应用程序部署在https://www.foobar.com/my-app/，集baseUrl到'/my-app/'.

  baseUrl: process.env.NODE_ENV === 'production' ? '/online/' : '/',

  // outputDir: 在npm run build时 生成文件的目录 type:string, default:'dist'

  // outputDir: 'dist',

  // pages:{ type:Object,Default:undfind }
  /*
构建多页面模式的应用程序.每个“页面”都应该有一个相应的JavaScript条目文件。该值应该是一
个对象，其中键是条目的名称，而该值要么是指定其条目、模板和文件名的对象，要么是指定其条目
的字符串，
注意：请保证pages里配置的路径和文件名 在你的文档目录都存在 否则启动服务会报错的
*/
  // pages: {
  // index: {
  // entry for the page
  // entry: 'src/index/main.js',
  // the source template
  // template: 'public/index.html',
  // output as dist/index.html
  // filename: 'index.html'
  // },
  // when using the entry-only string format,
  // template is inferred to be `public/subpage.html`
  // and falls back to `public/index.html` if not found.
  // Output filename is inferred to be `subpage.html`.
  // subpage: 'src/subpage/main.js'
  // },

  //   lintOnSave：{ type:Boolean default:true } 问你是否使用eslint
  lintOnSave: true,
  // productionSourceMap：{ type:Bollean,default:true } 生产源映射
  // 如果您不需要生产时的源映射，那么将此设置为false可以加速生产构建
  productionSourceMap: false,
  // devServer:{type:Object} 3个属性host,port,https
  // 它支持webPack-dev-server的所有选项

  devServer: {
    port: 8080, // 端口号
    host: 'localhost',
    https: false, // https:{type:Boolean}
    open: true, // 配置自动启动浏览器
    // proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理
    proxy: {
      '/api': {
        target: '<url>',
        ws: true,
        changeOrigin: true
      },
      '/foo': {
        target: '<other_url>'
      }
    },  // 配置多个代理
  }
}

配置eslint（.eslintrc.js）

网上一搜一大把的是如何取消eslint，但是我觉得eslint是一种很好的规避风险，规范代码的东西，原来在vuecli2里用的极其舒适，但是在vuecli3里却一点作用都不起，试了好多办法，只有这个管用，手动建一个.eslintrc.js文件：

// https://eslint.org/docs/user-guide/configuring

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint',
    sourceType: 'module'
  },
  env: {
    browser: true
  },
  // https://github.com/standard/standard/blob/master/docs/RULES-en.md
  extends: [
    'plugin:vue/base'
  ],
  // required to lint *.vue files
  plugins: [
    'vue'
  ],
  // add your custom rules here
  'rules': {
    // allow paren-less arrow functions
    'indent': [2, 2], // 两个空格的缩进
    'quotes': [2, 'single'], // js必须使用单引号
    "linebreak-style": [0 ,"error", "windows"], //允许windows开发环境
    // 'semi': [2, 'always'], // 语句强制分号结尾
    'no-console': [1], // 不允许console语句
    'no-unused-vars': [1], // 声明了变量但是没有使用检测
    'space-unary-ops': [1, { 'words': true, 'nonwords': false }], // 一元运算符的前/后要不要加空格
    'brace-style': [2, '1tbs', { 'allowSingleLine': false }], // 大括号风格
    'comma-spacing': [2, { 'before': false, 'after': true }],   // 逗号后有空格，前没有空格
    'comma-style': [2, 'last'],  // 逗号跟在结尾
    'key-spacing': [2, { 'beforeColon': false, 'afterColon': true }], // 对象字面量中冒号的前后空格
    'lines-around-comment': [ // 行前/行后备注
      2, {
        'beforeBlockComment': false, // 段注释的前后
        'beforeLineComment': false, // 行注释的前面
        'afterBlockComment': false, // 块注释的后面
        'afterLineComment': false, // 行注释的后面
        'allowBlockStart': true,
        'allowObjectStart': true,
        'allowArrayStart': true
      }],
    'max-depth': [2, 4], // 代码最多允许4层嵌套
    'max-len': [1, 160, 2],
    'max-nested-callbacks': [2, 3], // 回调嵌套深度
    'max-params': [2, 5], // 函数最多只能有5个参数
    'max-statements': [1, 80],  // 单个函数最多80条语句
    'no-array-constructor': [2], // 禁止使用数组构造器
    'no-lonely-if': 2, // // 禁止else语句内只有if语句
    'no-multiple-empty-lines': [2, { 'max': 3, 'maxEOF': 1 }], // 空行最多不能超过2行
    'no-nested-ternary': 2,  // 不使用嵌套的三元表达式
    'no-spaced-func': 2, // 函数调用时 函数名与()之间不能有空格
    'no-trailing-spaces': 2, // 一行结束后面不要有空格
    'no-unneeded-ternary': 2, // 禁止不必要的嵌套 var isYes = answer === 1 ? true : false;简单的判断用三元表达式代替
    'object-curly-spacing': [2, 'always', { // 大括号内是否允许不必要的空格 always始终允许；never始终不允许
      'objectsInObjects': false,
      'arraysInObjects': false
    }],
    'arrow-spacing': 2, // =>的前/后括号
    'block-scoped-var': 2, // 块语句中使用var
    'no-dupe-class-members': 2,
    // 'no-var': 1, // 禁用var，用let和const代替
    'object-shorthand': [1, 'always'], // 强制对象字面量缩写语法
    'array-bracket-spacing': [2, 'never'], // 是否允许非空数组里面有多余的空格
    'operator-linebreak': [2, 'after'], // 换行时运算符在行尾还是行首
    'semi-spacing': [2, { 'before': false, 'after': true }], // 分号前后空格
    'keyword-spacing': ['error'],
    'space-before-blocks': 2, // 不以新行开始的块{前面要不要有空格
    'block-spacing': [2, 'always'],
    'space-before-function-paren': [2, 'never'], // 函数定义时括号前面要不要有空格
    'space-in-parens': [2, 'never'], // 小括号里面要不要有空格
    'spaced-comment': [1, 'always',
      { 'exceptions': ['-', '*', '+']
      }], // 注释风格要不要有空格什么的
    'arrow-parens': 0,
    // allow async-await
    'generator-star-spacing': 0,
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
  },
  globals: {
    '$': false,
    'jquery': false,
    'ActiveXObject': false,
    'arbor': true,
    'layer': false
  }
};

我熟悉和喜欢的规范与2里相同，因此这样写了，如果之后觉得那个规范不和心意，可以去官网的rules里找找填上去，或者找改的rules，删掉即可.