nodejs和vue安装步骤记录

---

安装

• 下载并解压nodejs安装包，这个直接官网下就完事

🔗下载地址：https://nodejs.cn/en/download

• 配置环境变量，msi安装的可跳过

NODE_HOME: <nodejs安装路径>

• 验证安装

node --version
npm -verison

• 在nodejs安装目录下创建两个子目录

node_cache：缓存目录
node_global：安装的全局模块目录

配置

• 配置全局依赖模块和缓存目录，默认是会放在C:\Users\<用户名>\AppData\Roaming\下

npm config set prefix "<nodejs安装路径>\node_global"
npm config set cache "<nodejs安装路径>\node_cache"

• 配置淘宝镜像站，不配的话后面下载依赖会很慢，甚至下不了，懂得都懂

npm config set registry=http://registry.npm.taobao.org

• 查看镜像配置

npm config get registry

• 显示全部配置信息

npm config list

• 配置信息保存在用户目录下的.npmrc：C:\Users\<用户名>\.npmrc

• 检查镜像配置

# 能输出指定依赖的信息即可
npm info <依赖模块名># 比如
npm info vue

模块安装

• 全局安装依赖模块（-g表示全局安装）

npm install <模块名字>@<版本号> -g

• 更新npm，也就是重新安装npm，nodejs自带的npm可能比较老，可以更新一下

npm install npm -g

• 查看当前global有哪些模块

# 如果还没安装过模块，会显示empty
npm list -global

vue相关

• 安装vue相关依赖模块

npm install vue@<版本号> -g
npm install vue-router@<版本号> -g# 脚手架的版本跟vue关系不大，如果是vue3直接安装最新即可，我还是用的vue2，所以指定安装了@vue/cli 4
npm install @vue/cli<版本号> -g
npm install vue-cli<版本号> -g  # 旧版脚手架，已废弃

• 查看脚手架安装，安装完脚手架后，要重新打开命令行再查看

vue --version

• 创建vue项目

# 旧版操作，看执行后提示是还要安装@vue/cli-init
vue init webpack <项目名字># 新操作，create命令执行后会弹出选项，一般选default即可
vue create <项目名字>

• 创建后的项目结构

• 手动安装/更新依赖模块，上面如果选default，会自动安装依赖

# 记得先切到项目里面
cd <项目根路径>npm install

• 运行项目

cd <项目根路径>npm run serve
# 或者用dev，可能没有dev脚本，看下package.json即可
npm run dev# 点击url，会跳转到默认浏览器打开HelloWorld

• 项目打包

# 打包后生成dist目录
npm run build

🔗参考：https://www.cnblogs.com/liluxiang/p/9592003.html