1. Introduction to vue-cli
vue-cli is a scaffolding provided by vue.js, which can quickly construct the project structure.
vue-cli itself integrates a variety of project templates:
1. simple is rarely simple, just one html page
2. webpack includes ESLint code specification checks and unit unit tests, etc.
3. webpack-simple has no code specification checks and unit tests
4. browserify is also used more
5．browserify-simple
2. Create a vue-cli project
1. Download address: https://github.com/vuejs/vue-cli
2. cnpm install vue-cli -g Install vue-cli globally and configure the vue command environment
3. vue --version View installed version
4. vue list View the list of installed templates
5. cmd to enter your own workspace
6. vue init webpack vue-cli-webpack creates a project named vue-cli-webpack with webpack as a template; it can be executed by default according to the prompt.
7. cd vue-cli-webpack into the generated project directory
8. cnpm install installs dependent module packages
9. npm run dev to start the test service
3. Introduce view
1. cd vue-cli-webpack to enter the project directory
2. cnpm install iview --save install view dependencies
3. Introduce iview in vue-cli-webpack\src\main.js file
import iView from 'iview' import 'iview/dist/styles/iview.css' Vue.use (iView)
4. Test
1. Create an iview component: create a component in the vue-cli-webpack\src\components directory, such as: table.vue code is copied from the official iview component
2. Configure routing: Add the following code to the vue-cli-webpack\src\router\index.js file (the code in the red box is to be added)
5. Pack it into a formal environment
1. npm run build will package the project and output the dist directory. If the project is online, copy the dist directory to the server
6. Possible problems
1. Encountered es6 syntax error when compiling
Reason: Most of the json formats are not indented, spaces, and semicolons removed according to the ES6 syntax specifications.
Processing method:
1. Use the eslint tool to also format.
2. Remove the detection rules in the vue-cli-webpack\build\webpack.base.conf.js file
3. When creating a project, Use ESLint to lint your code? (Y/n) Select no for this step