nodejs和vue安装步骤记录

文章目录

安装
配置
模块安装
vue相关

安装

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

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

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

NODE_HOME: <nodejs安装路径>

验证安装

powershell 复制代码

node --version
npm -verison

node_cache：缓存目录

node_global：安装的全局模块目录

配置

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

powershell 复制代码

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

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

powershell 复制代码

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

查看镜像配置

powershell 复制代码

npm config get registry

显示全部配置信息

powershell 复制代码

npm config list

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

检查镜像配置

powershell 复制代码

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

# 比如
npm info vue

模块安装

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

powershell 复制代码

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

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

powershell 复制代码

npm install npm -g

查看当前global有哪些模块

powershell 复制代码

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

vue相关

安装vue相关依赖模块

powershell 复制代码

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  # 旧版脚手架，已废弃

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

powershell 复制代码

vue --version

创建vue项目

powershell 复制代码

# 旧版操作，看执行后提示是还要安装@vue/cli-init
vue init webpack <项目名字>

# 新操作，create命令执行后会弹出选项，一般选default即可
vue create <项目名字>

创建后的项目结构

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

powershell 复制代码

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

npm install

运行项目

powershell 复制代码

cd <项目根路径>

npm run serve
# 或者用dev，可能没有dev脚本，看下package.json即可
npm run dev

# 点击url，会跳转到默认浏览器打开HelloWorld

项目打包

powershell 复制代码

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

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