使用之前,我们先来明白这几个东西是用来干什么的。
nodejs中文网:http://nodejs.cn/
下载后安装,路径推荐更改在盘根目录。
( 这里因为我的另一个磁盘分区装了其他OS,只剩C盘了,如果你有其他盘推荐放到其他盘里 )
默认会自动添加到path环境变量
最后完成安装。
安装完成 查看变量和版本
使用Cmd命令(Windows键+R)
echo %PATH%
node -v
npm -v
刚安装后,nmp本地仓库文件夹生成在用户目录,并不是说NodeJS和NPM安装好了到这里就能直接使用了,这也是新手经常犯的一个错误之一。因为默认情况下,NPM安装的模块并不会安装到NodeJS的程序目录。而是安装到系统用户组路径下的文件夹,如果不修改npm的模块安装目录,那么它默认情况下都会安装到这里,随着你测试开发各种不同的项目,安装的模块越来越多,那么这个文件夹的体积会越来越大,直到占满你的C盘。这就是为什么要修改npm的配置的原因。。
因为博主电脑就一个盘了,只能安装到C盘,给大家演示下安装C盘自定义路径。(其他盘方法同)
我打算把这两个路径换到安装nodejs的目录,C:\nodejs
在C:\nodejs新建两个文件夹
然后运行以下2条命令(后边的是路径,根据自己实际情况修改)
npm config set prefix "C:\nodejs\node_global"
npm config set cache "C:\nodejs\node_cache"
查看npm的本地仓库路径:
命令: 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 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 install vue -g
安装 vue-router
命令: npm install vue-router -g
安装 vue脚手架
命令: npm install vue-cli -g
⊗ 因为vue脚本在自定义的global目录下,不在path环境变量。我们需要去系统变量里添加。
C:\nodejs\node_global
(修改path后需要重新打开cmd 才会上边更改的变量生效)
测试vue是否可用
命令:vue -V
-V
V是大写的vue-cli工具是内置了模板包括 webpack 和 webpack-simple
这里我选择创建内置webpack
项目到 C盘的nodejs文件夹下 (可根据自己路径选择)
创建一个webpack项目
即首先cd到要安装的路径(可根据自己路径选择)
命令: cd C:\nodejs
创建webpack项目: vue init webpack vue01
初始化,安装依赖
cd C:\nodejs\vue01
npm install
npm run dev
成功界面,提示打开地址http://localhost:8080
打包生成项目(编译成已构建文件)
命令: npm run build
最终结果生成在 dist 文件夹
NMP下新建出来的vue01的目录描述:
相关链接:
我的博客即将同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=7x3d1ef6mcj3