1. Install node
End development framework and environment are required Node.js, install node.js development environment, vue operation is dependent on the node's npm management tools to achieve, download https://nodejs.org/en/, the installation is complete after that, start typing cmd to open the command. (Requires administrator privileges cmd).
2. Check the version number of the node
After downloading a good node (installed by default to automatically configure the environment variables), open an administrator cmd management tool, enter node -v, enter, view node version number, the version number appears the installation was successful.
3. Install Taobao npm mirror
Since npm is abroad, to use slower, we use here Taobao cnpmmirror to install vue.
Taobao cnpm command management tool can replace the default npm management tools.
input the command:
npm install -g cnpm -registry=https://registry.npm.taobao.org
4. Scaffolding mounting global vue-cli
After Taobao image is successfully installed, we can globally vue-cli scaffolding.
Enter the command: cnpm install --global vue-cli Enter;
verify that the installation is successful, the command input vue, vue out information, and the installation was successful;
enter the command: cnpm install --global vue -cli
The project to build a new
After completion of building scaffolding, we want to start to build a new project, this time I suggest, try not installed in C drive, since vue downloaded files are large, if you want to change the disc, then directly enter D: Enter to direct change the disk
enter the command: vue init webpack my-project-first
enter, my-project-firstis the name of my own folder, is based webpack project has been entered after a carriage return until you whether you want to install vue-route,
which we project to use, so we enter y a carriage return
6. Note
Here there will be the need js syntax check, we do less than this, you can directly input no, can be directly entered the back no, are we being less than the
open D drive look, you will find more than just a creation of folder
7. Enter the project folder
Folder has been downloaded Well, now you can enter a folder, enter: cd my-project-firstEnter into the new project.
8. Installation depends in the project
Because between the various templates are interdependent, so now we want to install dependencies, enter the following command in the project.
Enter the command: npm install
it may be forced to use slow installation cnpm install
Note: cnpm There may be unknown error occurred, please try to use:npm install
9. Run
All rely on the installation environment is ready, we have to test the operation of their new projects vue, enter the command: npm run devjust press Enter.
It will pop up a browser to access the address defaults to localhost: 8080
Note: run devonly vue in package.jsonpackaged way, the default initialization project is run devlate packaged items can be custom settings, run buildempathy
10. Verify access
8080It is the default port, to access it, enter directly in the browser localhost:8080can open the default template; so far, vue development environment set up is completed.
Finally, how to change the default port?
We can see that there is a root directory of the initialization of configthe folder, see the name to know about the configuration, open the configdirectory index.js, you can modify hostand port, where not only can change the ip and port, can also modify other configuration information as needed.