1. Node installation
1) If you are not sure whether you have installed node, you can execute it in the command line tool: node -v (check the version);
2) If the execution result shows: xx is not an internal command, it means that you have not installed node, node installation address: http://nodejs.cn/download/
Note: Installing the vue-cli scaffolding currently requires a node version of v4.0 or higher;
Second, vue-cli global installation
Command line execution: npm install -g vue-cli // Add -g to install globally
After the installation is complete, you can enter the command: vue press Enter, you can see the command line for vue;
**: If npm may be slow in domestic network environment, the solution:
Use Taobao mirror:
1>. Official website: http://npm.taobao.org ;
2>. Installation: npm install cnpm -g --registry=https://registry.npm.taobao.org; Note: After installation, it is best to check its version number cnpm -v or close the command prompt and reopen it. Direct use may cause errors;
3>. Note: The usage of cnpm is exactly the same as that of npm, except that npm is changed to cnpm when executing the command (the following operations will use cnpm instead of npm).
4> How to update npm: You can use npm install -g npm to update the version
3. Initialization project
Execute the command: vue init webpack demo (your new project name/file name)
After execution, a folder will be automatically initialized: demo
Manually open the demo folder to see that a basic project has been initialized:
Fourth, start the project
As shown in the figure above, after executing the initialization project, there will be corresponding commands below:
Go ahead and execute: cd demo (this is the command to go to the demo folder)
Then execute the installation: npm install
Note: npm install execution can install vue and vue plug-ins. In the third step, the project has been initialized, and there are already related configurations in package.json, so it can be installed directly here;
After the installation is complete, execute the command: npm run dev
The whole project has already started:
Five, project file configuration introduction
build and config are about webpack configuration, including some servers, and ports;
node_modules: install the dependent code base;
src : store the source code;
static: For storing third-party static resources, the .gitkeep in static can also be submitted to gitHub if it is empty. Under normal circumstances, it cannot be submitted.
.babelrc: compile es6 files to es5
.babelrc file
{
"presets": ["es2015", "stage-2"],//Represents presets, which means that babelrc conversion needs to be installed in advance
"plugins": ["transform-runtime"],//Convert the es6 method
"comments": false //false means that the converted code does not generate comments
}
.editorconfig: the editor's configuration
.editorconfig charset = utf-8 //encoding indent_style = space //Indent style, indent based on spaces indent_size = 2 //The indent size is 2 grids end_of_line = lf // style of newline insert_final_newline = true //When you create a file, it will automatically insert a new line at the end of the file trim_trailing_whitespace = true //Automatically remove extra spaces at the end of the line
.eslintignore directory file for ignoring syntax checking
Just ignore build/*.js and config/*.js
package.json :
{
"name": "demo",
"version": "1.0.0",
"description": "demoApp",
"author": "",
"private": true,
"scripts": { /*Indicates that some commands can be executed, for example: npm run dev will execute node build/dev-server.js, npm run build will execute node build/build.js, so you can configure scripts through scripts*/
"dev": "node build/dev-server.js",
"build": "node build/build.js",
"lint": "eslint --ext .js,.vue src"
},
"dependencies": { /*Project dependencies*/
"vue": "^2.2.2",
"vue-router": "^2.2.0"
},
"devDependencies": { //The dependencies required for compilation
.......................
},
"engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
Entry files: index.html and main.js