Build the development environment based on VUE-CLI and Webpack

1. Install the VUE development environment

node,vue-cli

2. Initialize the project

vue init webpack ProjectName

Set your project information as prompted

cd ProjectName

code instructions Is it necessary (recommended)
npm install vue-router –save For details about routing management, see Vue Router is
npm install vuex –save For global status management, see Vue Store no
npm install axios –save Promise based HTTP client for browsers and Node.js no
npm install qs –save Using axios, serialize the string no
npm install sass-loader node-sass –save-dev The introduction of SCSS/less no
npm install js-base64 –save The text is converted to base64 no
npm install MD5 –save encryption no
npm install vue-svg-icon –dev-save Loading SVG ICONS no
npm install wdxx-ui –save Custom UI no
## 3. Custom configuration

Change the port

src: ProjectName/config/index.js

Change the content

Port :8080 host:'localhost' -> host:'0.0.0.0Copy the code

Change the package name

src: ProjectName/config/index.js

Change the content

index: path.resolve(__dirname, '.. AssetsRoot: path.resolve(__dirname, '.. /dist') as in assetsPublicPath: '/' -> assetsPublicPath: './' change absolute path to relative pathCopy the code

src:ProjectName/build/util.js

Changed contents:

   if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader'.publicPath: '.. /.. / '})}else {
      return ['vue-style-loader'].concat(loaders)
    }
Copy the code

4. Customize ESLint rules

ProjectName/.eslintrc.js

Function test rule

Command: space – before – function – paren

Note: This rule aims to enforce consistent spacing before function parentheses, so a warning is issued whenever whitespace does not match the specified preference.

Usage:

"space-before-function-paren": ["error", {
    "anonymous": "always",
    "named": "always",
    "asyncArrow": "never"
}]
Copy the code

Always (default) requires a space, followed by (arguments.

Never does not allow any Spaces after the (argument.

Anonymous is used for anonymous function expressions (such as function () {}).

Named is used to name function expressions (such as function foo () {}).

AsyncArrow is used for asynchronous arrow function expressions (e.g. Async () => {})