Vue+webpack+vue-cli+webstrom Project Building

Author qq:1095737364 QQ Group: 123300273 Welcome to join! 1. Install the Webpack and VUE-CLI modules: npm Install webpack-g npm Install vue-cli-g2. Go to the new project directory and execute the following command to create a new project: vue Init webpack hiibook_find3. Then go to use the CD command to go to the new Hiibook_find directory and install the module in Package.json: cnpm Install4. Then execute the command to see if it works: npm Run Dev5. Delete node_modules folder(Prevent Webstrom: mode_modules files can be very much, and Webstrom will index each file, so there will be a deadlock phenomenon), using Webstrom to open the Hiibook_find project: 6. New Node_modules, then right-click File--Select Make directory as-->excluded 7. Then click: Terminal8. Running cnpm Install9. Intellij IdeaInstallation vue.js Plug-in:setting-->plugins--> search vue, find vue.js---Install and restart Webstrom Configure Vue template tips setting--> search for file Types Default new Vue file version: template content:

 <template> <div class= "" > </div></template><script> export  default   return   {}}, props: {}, C omputed: {}, components: {}, methods: {}, watch: {},}  </script><style SCOPED>&L T;/style> 

Configure ECMAScript 6:settings---languages& frameworks--> JavaScript, select JavaScript, modify the content area's JavaScript language Version:ecmascript 6 Configuration: Webstorm Modify the file, Webpack-dev-server does not automatically compile the refresh 10. Configuring Edit_configurations 11. Setting Parameters: 12. Click Run, enter in the browser: HT  tp://localhost:8080/#/appear page, configuration successful, run normally!! 13. Note: ESLint requirements code must be standardized, affecting the development speed ESLint Delete: 1.Use ESLint to lint your code? (y/n) This step is selected NO2. Find Build-->webpack.base.conf.js Delete the following code: 3. Search Package.json file for "ESLint" keyword, delete all relevant plugins supplement: ESLint:1.ESLint mainly has the following characteristics:

• The default rules contain all the rules that exist in JSLint, Jshint, and are easy to migrate;
• Rules can be configured high: can be set "warning", "error" Two error level, or directly disable;
• Contains Code style detection rules (you can throw away Jscs);
• Supports plugin extensions, custom rules.

The configuration of the 2.Eslint can be configured in the following three ways eslint:1. eslintrc files (support JSON and YAML two syntax), 2) Add Eslintconfig configuration block in Package.json ; 3) defined directly in the code file. 14.vue Remove # Address: Find Router-->index.js, add the following code

Vue+webpack+vue-cli+webstrom Project Building