node、cnpm、vue下载及自定义路径（目录结构！！！）_通过cnpm下载的vueu源码包在哪

又到了一期一会安软件的日子，每次都被自定义路径折磨致死。。。

 

一、node.js下载

官网地址：https://nodejs.org/en/

下载完后双击 node-v12.3.1-x64.msi 安装即可。

目录结构：我的node路径是 G:\Node，下面有node_modules文件夹、node文件、node.cmd，node_modules文件夹里有npm包。

这里先说一下环境变量，自己下载时候好多教程都说了要改环境变量，就找了下环境变量的对应关系。环境变量就是指向的.exe或者.cmd文件的路径，能告诉系统指令的路径在哪里，这里此电脑右键->属性->高级系统设置->环境变量->系统变量->path->G:\Node 就对应着npm、npm.cmd等的位置（可见下文目录结构），如果后期有报错'"node"' 不是内部或外部命令，也不是可运行的程序 或批处理文件”之类的，可能就是因为某些程序的环境变量对应位置不正确。

 

二、cnpm镜像下载

（因为cnpm是npm的镜像，我就把cnpm下到npm同目录下了）

cmd下指令 ：G:\Node>npm install -g cnpm  --registry=https://registry.npm.taobao.org

（如果因为网络问题可能进度条卡在那里没有动静，退出去多试几次）

 

目录结构：G:\Node下有node_modules文件夹、node文件、node.cmd、cnpm文件、cnpm.cmd，node_modules文件夹里有npm、cnpm包。（看着很整齐，很一一对应吧OvO）

检验指令：

G:\Node>npm -v
6.9.0

G:\Node>cnpm -v
cnpm@6.1.0 (G:\Node\node_modules\cnpm\lib\parse_argv.js)
npm@6.11.3 (G:\Node\node_modules\cnpm\node_modules\npm\lib\npm.js)
node@12.3.1 (G:\Node\node.exe)
npminstall@3.23.0 (G:\Node\node_modules\cnpm\node_modules\npminstall\lib\index.js)
prefix=G:\Node\node_global_modules
win32 x64 10.0.17134
registry=https://r.npm.taobao.org

 

*三、自定义npm指令的下载路径（cnpm同理）

（如果在cnpm下载前就重新定义了路径，cnpm就会被下载到G:\Node\node_global_modules里，或者报错'"cnpm 不是内部或外部命令，也不是可运行的程序 或批处理文件”，需要添加环境变量 系统变量->path->G:\Node\node_global_modules 就对应着cnpm、cnpm.cmd等修改过后的如下的下载位置。）

指令：G:\Node>npm config ls

; cli configs
metrics-registry = "https://registry.npmjs.org/"
scope = ""
user-agent = "npm/6.9.0 node/v12.3.1 win32 x64"

; userconfig C:\Users\lx\.npmrc             
prefix = "C:\Users\lx\AppData\Roaming"     //这里就是需要改的下载路径

; builtin config undefined

; node bin location = G:\Node\node.exe
; cwd = G:\Node
; HOME = C:\Users\lx
; "npm config ls -l" to show all defaults.

 

在G:\Node目录下建立文件夹node_cache、node_global_modules

（这里node_cache不添加的话，后面下载会在C:\Users\lx下出现cache文件夹）

cmd执行命令：

G:\Node>npm config set prefix "G:\Node\node_global_modules"  //这里以后就是全局位置,cnpm install -g xxx

G:\Node>npm config set cache "G:\Node\node_cache"

 

四、vue安装

cmd指令：

G:\Node>cnpm install -g webpack

G:\Node>cnpm install -g vue （-g 表示安装到全局位置，就是上文的G:\Node\node_global_modules）

G:\Node>cnpm install -g vue-cli

目录结构：G:\Node\node_global_modules下面有node_modules文件夹、vue文件、vue.cmd，node_modules文件夹里有webpack、vue、vue-cli包，，，就很整齐很像G:\Node的npm、cnpm的目录结构（因为原理本来就差不多呀~）

 

五、配置自己的vue project

进入vue文件夹，

cmd指令：G:\Node\node_global_modules\node_modules\vue>vue init webpack my-vue

下面会弹出project name、project description等空白区填写命名（最后一项选最后一个自己手动安装快一些）

进入到my-vue文件夹中，

cmd指令：G:\Node\node_global_modules\node_modules\vue\my-vue>cnpm install

然后my-vue里面会出现node_modules文件夹

 

检验指令：G:\Node\node_global_modules\node_modules\vue\my-vue>cnpm run dev

会告诉你你的项目是在哪里运行的。(http://localhost:8080，浏览器打开即可显示出my-vue里的index.html)

  

如果报错'"vue"' 不是内部或外部命令，也不是可运行的程序 或批处理文件”，需要添加环境变量 系统变量->path->G:\Node\node_global_modules 就对应着vue、vue.cmd等的位置（可见上文目录结构）。

 

参考教程：

vue安装：https://blog.csdn.net/m0_37920381/article/details/80462551

自定义路径：https://blog.csdn.net/u010249656/article/details/82187716

cnpm不是内部或外部命令的解决办法：https://blog.csdn.net/fighting_2017/article/details/76979844

（其实就是目录结构与环境变量对应的问题）