Premise:

With the upgrade of VUE scaffolding, it is more and more convenient for developers to develop and maintain projects. In essence, VUE-CLI3 provides basic configuration and extensible space, but vuE-CLI3 official website for the new scaffold use cases are relatively simple, more content needs us to study, more are based on Webpack to expand. To get you started, I’ve written a quick summary of common configurations, so let’s see how quickly you can get started with the new scaffolding.

1. Install the vue – first cli3.0 (according to the official documentation walk side) : cli.vuejs.org/zh/guide/in…

2. Create a project:

A. Manual creation :vue create my-project

Cli.vuejs.org/zh/guide/cr…

Create it manually and add the options you need on demand

B. Create and manage projects using a graphical interface using Vue UI commands (recommended)

1). Select the project directory and enter the name of the folder where the project resides. The package manager can be NPM or YARN.


2). By default, many details are not known, so it is recommended to choose manual configuration for the first time

3). In the function section, just choose what you may need, and you can delete or add later

4). Routing mode, CSS preset processor, encoding format rules, testing and other Settings (all can be changed later).



5). Set the project name. If necessary, all the preset configurations of the project can be kept, so that the same configuration can be directly selected for the next project of the same type

3. Create vue. Config.

/** ** @2018-10-08 ** @author trsoliu ** @describe vue-cli 3.x configuration file */ const path = require('path');
const vConsolePlugin = require('vconsole-webpack-plugin'); / / the introduction of mobile end simulation developer tools plug-in (another: https://github.com/liriliri/eruda) const CompressionPlugin = require ('compression-webpack-plugin'); //Gzip
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; //Webpack file parser const baseUrl = process.env.node_env ==="production" ? "/static/" : "/"; / / font SCSS resource path switch control module. The different environment exports = {basic path / / / / baseUrl:'/',//vue-cli3.3以下版本使用
        publicPath:'/',//vue-cli3.3+ new version using // output file directory outputDir:'mcdonalds', // eslint-loader checks lintOnSave when saving:true, // Place the generated static resources (js, CSS, img, fonts) in the directory (relative to outputDir). assetsDir:'static', // Build the application in multi-page mode. Pages: undefined, // whether to use the Vue build with the runtimeCompiler runtimeCompiler:false, // Whether thread-loader is used for Babel or TypeScript. This option is automatically enabled when the CPU of the system has more than one kernel, only for production builds, when appropriate to enable several child processes to execute compression concurrently. Parallel: require('os').cpus().length > 1, // whether the production environment is generatedsourceMap file. It is not recommended to open productionSourceMap:false. / / / / webpack configuration webpack configuration of internal modified https://github.com/neutrinojs/webpack-chain see more granular https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md chainWebpack: Config = > {/ * * * delete the prefetch lazy loading module, reduce the bandwidth pressure * https://cli.vuejs.org/zh/guide/html-and-static-assets.html#prefetch*/ /config.plugins.delete() */ /config.plugins.delete('prefetch');
		//if(process.env.NODE_ENV === 'production'// Modify the configuration for the production environment... process.env.NODE_ENV ! = ='development'/ /}else{// Modify the configuration for the development environment... / /}}, / / adjust webpack configuration at https://cli.vuejs.org/zh/guide/webpack.html#%E7%AE%80%E5%8D%95%E7%9A%84%E9%85%8D%E7%BD%AE%E6%96%B9%E5%BC%8FConfigureWebpack: config => {// Production and test environmentletPluginsPro = [new CompressionPlugin({// Gzip can also be enabled via the server (e.g. nginx)(https://github.com/webpack-contrib/compression-webpack-plugin) filename:'[path].gz[query]',
				algorithm: 'gzip'.test: new RegExp('\ \. (' + ['js'.'css'].join('|') + '$', ), threshold: 8192, minRatio: 0.8,}), / / Webpack package file analyzer (https://github.com/webpack-contrib/webpack-bundle-analyzer) new BundleAnalyzerPlugin (),]; // Development environmentletPluginsDev = [/ / mobile terminal simulation developer tools (https://github.com/diamont1001/vconsole-webpack-plugin https://github.com/Tencent/vConsole) New vConsolePlugin({filter: [], // Import file to be filteredenable: true// Remember to change the code before releasing itfalse})];if(process.env.NODE_ENV === 'production'// Modify the configuration for the production environment... process.env.NODE_ENV ! = ='development'
			config.plugins = [...config.plugins, ...pluginsPro];
		} else{// Modify the configuration for the development environment... config.plugins = [...config.plugins, ...pluginsDev]; }}, CSS: {// enable CSS modules modules:false// Whether to use CSS extract:true// Enable the CSSsourceMaps is not recommendedsourceMap: false, // CSS presets loaderOptions: {sass: {// Sets the path of reference files in CSS and introduces common SCSS files (such as @mixin) data: '$baseUrl: "/";
				@import '@/assets/scss/_common.scss';
				`
                                //data: `
                                //$baseUrl: "/"; / / `}}}, / / webpack - dev - server configuration https://webpack.js.org/configuration/dev-server/ devServer: {/ / host:'localhost',
		host: "0.0.0.0", port: 8000, // HTTPS:false, // https:{type:Boolean}
		open: true, / / configuration automatically start the browser http://172.11.11.22:8888/rest/XX/ hotOnly:true// proxy:'http://localhost:8000'// Configure cross-domain processing with only one proxy: {// Configure automatic browser startup"/XX/*": {
				target: "http://172.11.11.11:7071",
				changeOrigin: true,
				// ws: true, / / the websocket support secure:false
			},
			"/XX2/*": {
				target: "http://172.12.12.12:2018",
				changeOrigin: true,
				//ws: true, / / the websocket support secure:false}}}, / / third party plug-in configuration https://www.npmjs.com/package/vue-cli-plugin-style-resources-loader pluginOptions: {'style-resources-loader': {//https://github.com/yenshih/style-resources-loader
			preProcessor: 'scss'// Declaration type'patterns': [
                                //path.resolve(__dirname, './src/assets/scss/_common.scss'), 
			],
                        //injector: 'append'}}};Copy the code


4. In order to ensure the compatibility of ES version, we also need to configure babel.config.js

//babel.config.js
module.exports = {
  presets: [
    [
      "@vue/app",
      {
        polyfills: ["es6.promise"."es6.symbol"[}]]};Copy the code

5. Browsers are CSS compatible with handling files. Browserslistrc and. Postcsrc

//.browserslistrc
> 1%
last 2 versions
not ie <= 8
Copy the code
//.postcssrc.js
module.exports = {
  plugins: {
    autoprefixer: {},
    //'postcss-px2rem': {
    //  remUnit: 75,
    //},
    'postcss-px2rem-exclude': {
      remUnit: 75,
      exclude: /node_modules|assets|login|main/gi,
    },
  }
};Copy the code

6.. The configuration of eslintrc.js can be directly configured on the graphical interface

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ["plugin:vue/essential"."@vue/prettier"],
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "error" : "off"."no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
  },
  parserOptions: {
    parser: "babel-eslint"}};Copy the code



I will continue to update this configuration for the project. If you have any suggestions or questions, you can add qq group to exchange 535798405

Just give a demo:https://github.com/trsoliu/vue-cli3.x-configure based on this configuration

Cooperate with automated post-processing command will get twice the result with half the effort, let your project https://github.com/trsoliu/vue-cli3-command (a key name and version number after the build, compression, upload, release, etc.)