vuecli 3のいくつかのピットの解決を着手します

私は以前vuecli 2を使っていましたが、大きく見えますが、上手になってからとても操作が上手で、足場が提供するコードは変更する必要は多くありません.ほとんど構成してあげました.vuecli 3を使っている人がいるのを見て、上手にやってみたいと思っていました.カタログはさっぱりしていますが、試してみると操作が間違っているかもしれません.そして、自分で必要に応じて配置する必要があるものがたくさんあることに気づきました.そのため、避けられないことはいくつかの穴を踏んで、模索した解決方法を貼って、いくつかの人を助けたいと思っています.その中のwebpack.config.jsと.eslintrc.jsとvue.config.jsは私を最も困らせています.vuecli 2はnpmさえあれば自動的に構成してあげますが、vuecli 3はできません.この3つは自分で手動でファイル構成を追加する必要があります.そのため、使用時に次のような問題が発生しました.
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: '',
        ws: true,
        changeOrigin: true
      },
      '/foo': {
        target: ''
      }
    },  //       
  }
}

eslint(.eslintrc.js)の構成
ネット上で大きなものを探してどのようにeslintをキャンセルするのか、しかし私はeslintが1種のとても良いリスクを回避することだと思って、規範コードのもの、もとはvuecli 2の中で使うのはきわめて快適で、しかしvuecli 3の中で少しも役に立たないで、多くの方法を試して、この管理だけあって、手動で1つ建てます.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を探して、削除すればいいです.