首先如果想要安装vue-cli ,webpack这些的时候我们都会用到node里边npm模块,但是有的初学者在安装时候总会出现一些问题,导致npm不能运作,致使vue-cli,webpack等不能安装。这时候帮助大家解决一下
npm :nodejs 中的包管理器
webpack:把所有的客户端需要发布的静态资源准备好,进行资源的打包,合并等
vue-cli :用户生成的Vue工程模板。
vue-router:路由(这个不用解释的)。
一、下载node 。 下载地址:http://nodejs.cn/download/
![](http://upload-images.jianshu.io/upload_images/4673327-1725da01f87b7ca3.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)
![](http://upload-images.jianshu.io/upload_images/4673327-080784daeccbc086.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/618/format/webp)
2345截图20180418115918.jpg
![](http://upload-images.jianshu.io/upload_images/4673327-b0bfb454f2777211.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/492/format/webp)
1.jpg
![](http://upload-images.jianshu.io/upload_images/4673327-cecf693df986b022.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/494/format/webp)
2.jpg
![](http://upload-images.jianshu.io/upload_images/4673327-31538a65626ddfb4.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/496/format/webp)
3.jpg
二、找得到安装nodejs那个文件夹
![](http://upload-images.jianshu.io/upload_images/4673327-665fdfba206b6972.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/770/format/webp)
4.jpg
打开cmd,检查一下
![](http://upload-images.jianshu.io/upload_images/4673327-06c4a199b4a25607.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/433/format/webp)
5.jpg
都已经安装好了。
但是本地仓库都跑到C盘了,所以我们需要修改路径
![](http://upload-images.jianshu.io/upload_images/4673327-b87fca55d7f4724e.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/804/format/webp)
6.jpg
//现在nodejs文件夹下创建node_global,node_cache这俩个文件
![](http://upload-images.jianshu.io/upload_images/4673327-829624f308aed76a.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/839/format/webp)
7.jpg
然后在cmd中运行
1.npm config set prefix ''G: odejs ode_globle"
2.npm config set cache ''G: odejs ode_cache"
![](http://upload-images.jianshu.io/upload_images/4673327-1cdb2c4d4f1bc1f3.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/580/format/webp)
8.jpg
输入npm config list查看所有的配置信息
![](http://upload-images.jianshu.io/upload_images/4673327-8eb329bc368b1bcd.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/805/format/webp)
9.jpg
检查镜像命令是否正常 npm config get registry
![](http://upload-images.jianshu.io/upload_images/4673327-c58e1d8561da7fc2.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/738/format/webp)
10.jpg
用npm info vue看看是不是能获取vue的信息
![](http://upload-images.jianshu.io/upload_images/4673327-1a8ff0b4dbf04636.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/755/format/webp)
11.jpg
然后用npm install npm -g将npm更新到最新版本
![](http://upload-images.jianshu.io/upload_images/4673327-8cddf2478ac74f45.png?imageMogr2/auto-orient/strip|imageView2/2/w/608/format/webp)
12.png
我们再查看一下npm list -g 会发现全局目录不是空目录了
![](http://upload-images.jianshu.io/upload_images/4673327-6b22e193ec01a8f5.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/610/format/webp)
14.jpg
这时,默认的模块路径G: odejs ode_modules变为G: odejs ode_global ode_modules,这个时候运行npm install命令会报错,如运行npm install vue
![](http://upload-images.jianshu.io/upload_images/4673327-3a5b4483868c5649.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/659/format/webp)
15.jpg
这时候我们需要在环境变量的系统变量里添加NODE_PATH,内容是G: odejs ode_global ode_modules
![](http://upload-images.jianshu.io/upload_images/4673327-68af2860f68b30a9.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/599/format/webp)
17.jpg
这里运行还会发生错误项目无法安装,那么这事后我们就要找到图片9中.npmrc对应的文件夹,
![](http://upload-images.jianshu.io/upload_images/4673327-f5d55ef807f00c2d.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/1057/format/webp)
18.jpg
把.npmrc文件删,之后就会下载对应文件
![](http://upload-images.jianshu.io/upload_images/4673327-7be90e413e5c4820.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/866/format/webp)
19.jpg
之后在把环境变量中的系统变量Path配置一下就好
![](http://upload-images.jianshu.io/upload_images/4673327-a5eeea45cd48a8e9.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/586/format/webp)
20.jpg
![](http://upload-images.jianshu.io/upload_images/4673327-848a1d6c94b49d1f.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/499/format/webp)
21.jpg
然后就可以安装 vue ,vue-cli ,
![](http://upload-images.jianshu.io/upload_images/4673327-28b851bfdd873983.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/856/format/webp)
22.jpg
注意:vue-cli工具是内置了模板,包括webpack 和 webpack-simple,并且他的配置并不是全放在了根目录下的webpack。config.js中
重新开启cmd
先初始化 vue init webpack-simple oneNight01,根据步骤生成成功界面
![](http://upload-images.jianshu.io/upload_images/4673327-038f1cc0e74a2f31.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)
25.jpg
![](http://upload-images.jianshu.io/upload_images/4673327-c6da601630f6081c.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/672/format/webp)
作者:舟渔行舟
链接:https://www.jianshu.com/p/9f11b367b900
来源:简书
著作权归作者所有。