Before using, let's understand that these things are used to doing.
- node.js : javascript one kind of operating environment, enables javascript from browser to run.
Node.js appearance, making use of the front and rear ends of the dream the same language, unified model can be achieved. - npm: Package Manager under Nodejs.
- webpack: Its main purpose is to put all through grammar CommonJS browser need to publish static resources to do the appropriate preparation, such as mergers and packaging resources.
- VUE the -cli: user-generated Vue project template. (To help you quickly start a project vue, that is, to give you a vue structure, comprising a base dependent libraries, only npm install can be installed)
The first step, the installation nodejs
nodejs Chinese network: http://nodejs.cn/
After downloaded, it is recommended to change the path in the root directory.
(Here because my other disk partitions installed other OS, only the C drive, and if you have other disk recommended into the other tray)
The default will be automatically added to the path environment variable
Finally, to complete the installation.
Use command Cmd (Windows Key + R)
- View environment variables:
echo %PATH% - View Node Version:
node -v - View npm version:
npm -v
The second step, change the default module and cache directory
Immediately after installation, NMP local repository folder generated in the user directory, not to say NodeJS and the NPM installed here can be used directly, and this is one of a novice mistake often made. Because by default, NPM installed modules will not install the program directory of NodeJS. Instead, install the files in the system folder path to the user group, if you do not modify npm module installation directory, which by default will be installed here, as you test various development projects, more and more installed modules , then the volume of this folder will become larger and larger until fill your C drive. This is why the reason you want to modify the configuration of npm. .
因为博主电脑就一个盘了，只能安装到C盘，给大家演示下安装C盘自定义路径。（其他盘方法同）
我打算把这两个路径换到安装nodejs的目录，C:\nodejs
在C:\nodejs新建两个文件夹
- node_global
- node_cache
- § 这两个文件夹是全局模块目录和缓存目录
然后运行以下2条命令（后边的是路径，根据自己实际情况修改）
npm config set prefix "C:\nodejs\node_global"npm config set cache "C:\nodejs\node_cache"
命令: npm list -global
更改前:
更改后:
第三步、接下来配置镜像站
配置淘宝镜像站:
命令: npm config set registry=http://registry.npm.taobao.org
检查镜像站是否配置成功: npm config get registry
- 国内镜像站，速度更快，加速安装。
第四步、查看配置文件 （安装可忽略）
输入命令 npm config list 显示所有配置信息，会生成一个配置文件
生成的配置文件路径 C:\Users\Administrator\.npmrc
使用文本编辑器编辑它，可以看到刚才的配置信息（只是让你看到修改，so安装可忽略这一步）
第五步、安装npm
安装npm : npm install npm -g
默认的模块C:\nodejs\node_modules 目录
将会改变为C:\nodejs\node_global\node_modules 目录，
如果直接运行npm install等命令会报错的。
增加环境变量NODE_PATH 内容是：C:\nodejs\node_global\node_modules
（然后，需要重新打开CMD让上面的环境变量生效）
第六步、npm安装vue.js
命令：npm install vue -g
- 这里的 -g 是指安装到global全局目录去
命令： npm install vue-router -g
- vue-router 是专为 Vue.js 开发的便于实现单页应用的工具库，能够以声明式的方法编写页面的导航和跳转信息。
命令： npm install vue-cli -g
⊗ 因为vue脚本在自定义的global目录下，不在path环境变量。我们需要去系统变量里添加。
- 对path环境变量添加
C:\nodejs\node_global - ⊕ Note: win10 version of the following, landscape PATH, noting added to the end, do not have a semicolon [;]
(Cmd variable will need to re-open the top changes take effect after the modified path)
command:vue -V
- The version number appears that is configured correctly note that
-VV is capitalized
The seventh step, after vue configuration is complete, the configuration first project
vue-cli tool is a built-in templates include webpack and webpack-simple
Here I chose to create the built-in webpackproject to the C drive nodejs folder (according to their own path selection)
I.e. firstly to install cd path (the path can be selected according to their own)
command: cd C:\nodejs
Creating webpack project: vue init webpack vue01
- Into the project:
cd C:\nodejs\vue01 - Installation depends:
npm install - Run the project:
npm run dev
Successful interface, prompted to open the address http: // localhost: 8080
command: npm run build
The end result is generated in dist folder
