Build Vue.Js development environment under window

1. Nodejs official website http://nodejs.cn/ download the installation package, you can install it locally without special requirements, here choose v6.10.3 released on 2017-5-2

2. cmd command line:

   node -v //Display node version v6.10.3

   npm -v // show npm package manager version 3.10.10

3. Due to the fact that some npm resources are blocked or foreign resources, it often leads to failure when installing dependent packages with npm, so I still need the domestic mirror of npm---cnpm

4. Enter npm install -g cnpm --registry=http://registry.npm.taobao.org in the Cmd command line

5.  Install the vue-cli scaffolding build tool

6. At this point, the environment and tools we need are ready.

   Next, we use vue-cli to build the project.

7. First of all, we first choose to enter our working directory as E:\personal\VueJS. This directory needs to be built first. It is currently empty. This working directory will add various project directories in the future.
8. In the VueJs directory, run the command vue init webpack firstVue. Among them, webpack is a build tool and module bundler, that is, the entire project is based on webpack. Among them, firstVue is the name of the project folder, which will be automatically generated in the working directory of vuejs.

9. 

   During the installation process, we need to enter the project name, description, author, version (independent version), use the ESLint specification, etc. At this time, we see that the directory firstVue has been automatically generated in the working directory, as shown below.

10. 

     

11.  The main packages are in package.json, as shown below

12.  

     

13.  cd to our project folder firstVue, run the command cnpm install to install the package, (note: we have used Taobao mirror cnpm)

14. 

     

15. After the installation, we found that there is a node_modules directory under the project folder, which is the project dependency package resources

16. 

     

17. After installing the dependencies, you can run the entire project. Run the project in the project directory, run the command npm run dev , it will run our application in the way of hot loading. Hot loading allows us to see the modified effect in real time without manually refreshing the browser after modifying the code.

18. 

     

19. 

     

20. 如果启动过程中出现下方问题，只需要将config目录下的index.js文件中dev端口由8080改为8088

21. 

     

22.