Vue.js frame is a gradual build user interface. Other heavyweight frame is different, Vue incremental development bottom-up design. Vue core library focus only on the view layer, and very easy to learn, is based on a lightweight framework MVVM structure, very easy to integrate with other libraries or existing project.
Npm install vue need the help of the instruction set, it will normally install node.js environment.
1. Download node.js environment
Open node.js official website Download: http://nodejs.cn/download/
to choose their own system installation package, paper windows x64 system as an example.
After downloading the installation package installed properly, can be replaced during installation default installation path
after installation, open cmd, respectively, enter the command verification has been successful, the figure shows the version number is the normal installation, the remainder is abnormal.
2. Configure node.js and npm environment variables
After installing, on the path and the path npm cache modules installed globally, environmental configurations. After performing similar because: npm install express -g(-g behind optional parameter representative g global global mounting means) during mounting statement, the module will be mounted to the mounting C:\Users\用户名\AppData\Roaming\npmpath, accounting C disc space.
First, two new folder in the installation path of node.js, respectively, and the global cache folder as the installation folder.
- node_cache
- node_global
Enter the following in cmd, set the cache and global folder for mounting the above-described new folder. Please D:\Program Files\nodejsreplace your own path for the installation of node.js.
npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache"
Open the "Environment Variables."
- New Environment Variables
Variable Name: NODE_PATH
variable value: D: \ Program Files \ nodejs ; D: \ Program Files \ nodejs \ node_global \ node_modules
- new path variable
%NODE_PATH%;D:\Program Files\nodejs\node_global
3. Configure cnpm
Due to network reasons, the domestic npm access speed is very slow, can be accessed by setting npm domestic Taobao mirror.
Open cmd, execute the following command.
npm install -g cnpm --registry=https://registry.npm.taobao.org
Open cmd, execute the following command.
npm -v
cnpm -v
Use cnpm build express environment, open cmd, execute the following command.
cnpm install express -g
4. Scaffolding vue vue-cli development environment
Global vue-cli install scaffolding, used to help build a template project vue framework.
Open cmd, execute the following command.
cnpm install vue-cli -g
Close cmd reopen, execute the following command to verify that the installation was successful vue
vue
vue -V
5. Use webpack packaging tools, project start vue
Create a work space for storing items, such as used herein D:\workspace\vs_workspace
open cmd, enter the directory by cd command
Enter the following command to create hellovue project
vue init webpack hellovue
All the way round, in addition vue-router choose yes, all no rest
After confirmed all the way to give the FIG.
Follow the prompts, cmd execute the subsequent instruction, the instruction npm prompt all the instructions replace all cnpm
The middle of something slightly
Do not close the cmd window , according to the command prompt, visit our Web site: HTTP: // localhost: 8080 , you can see vue page
6. vscode development tools installed
In vscode official website download page to download vscode installer, recommended to choose system version
The installation process can no brain the next step, you can also adjust the installation location and whether to create a shortcut set according to the actual situation
7. vscode npm integrated development project vue
Start vscode, click on the "open folder",
Just select the directory where webpack use package generated vue projectD:\workspace\vs_workspace\hellovue
By shortcut ctrl + ` or View -> Terminal to open the console
Vue can control the start of the project through the console input commands in Terminal
