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 () => {})