PHP笔记网

下载安装包

【官网】，【历史版本】下载 、安装多个版本Node.js

• 常用版本(1)：v14.21.3（node-v14.21.3-win-x64.zip）
• 常用版本(2)：v16.20.2（node-v16.20.2-win-x64.zip）
• 常用版本(3)：v18.18.0（node-v18.18.0-win-x64.zip）

安装步骤

1、安装node.js到目录：D:\nodejs\nodejs\

2、重新设置本地仓库目录：【这个很重要】

npm config set prefix "D:\nodejs\nodejs\node_global"        # 注意：手动新建好目录node_global
npm config set cache "D:\nodejs\nodejs\node_cache"          # 注意：手动新建好目录node_cache

3、配置淘宝镜像：

npm config set registry=https://registry.npmmirror.com 

4、配置系统环境：

(1) 增加环境变量 NODE_PATH，内容为：D:\nodejs\nodejs\node_global\node_modules

(2) 对环境变量 Path 增加

• D:\nodejs\nodejs
• D:\nodejs\nodejs\node_global

5、使用淘宝 NPM 镜像

大家都知道国内直接使用 npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像。

淘宝 NPM 镜像是一个完整 npmjs.org 镜像，你可以用此代替官方版本（只读），同步频率目前为 10分钟 一次以保证尽量与官方服务同步。

你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm：

$ npm install -g cnpm --registry=https://registry.npmmirror.com    # 默认安装最新版本 cnpm v9.x

安装指定版本的 cnpm 8 【注意：我购买的商业版后台 vue-admin-plus 只能安装cnpm8】

npm install -g cnpm@8.2.0 --registry=https://registry.npmmirror.com

推荐这种方式安装是因为既不会影响npm命令，又不用每次都写淘宝地址进行依赖包的安装！

这样就可以使用 cnpm 命令来安装模块了：

$ cnpm install [name]

更多信息可以查阅：https://developer.aliyun.com/mirror/NPM。

6、安装Vue相关套件：

cnpm install -g vue            # 或 npm install --global vue
cnpm install -g vue-router

# cnpm install --global vue-cli    # 注意：这个命令安装的是 vue-cli v2.x版本
cnpm install -g @vue/cli           # 安装新版的 vue-cli v3.x
cnpm install -g @vue/cli-init

cnpm install --g webpack
cnpm install --g webpack-cli

特别注意：如果不使用 --global 或 -g 参数，会在当前目录 自动新建子目录 node_modules，并把模块安装到此目录！

升级 vue-cli 2.x 至 vue-cli 3

新建Vue项目示例

1. 创建新项目

// 切换到 某个目录
// ......

// 创建一个基于 webpack 模板的新项目
vue init webpack my-project

// 这里需要进行一些配置，默认回车即可

2. 运行项目

cd my-project
cnpm run dev

成功执行以上命令后访问 http://localhost:8080/，输出结果如下所示：

参考：

[荐]Win10下 安装 node.js、npm 、vue.js