Nodejs安装和创建Vue项目

• 1. Nodejs安装
• • 1.1 下载Nodejs
  • 1.2 安装Nodejs
  • 1.3 配置nodejs
• 2. 新建Vue3项目
• • 2.1 下载Vue3
  • 2.2 创建Vue3项目

1. Nodejs安装

参考内容
2021最新Node.js官网安装教程，配置环境变量（图文详细）

1.1 下载Nodejs

下载nodejs：nodejs官方网站，本文下载的是ZIP压缩包格式的内容

1.2 安装Nodejs

• 1. 解压下载好的文件，并新建两个文件夹node_global和node_cache
  • node_global是机器上node全局安装的文件夹
  • node_cache是机器上node的缓存文件夹

• 2. 配置系统的环境变量：将node的安装位置和node_global位置添加到系统的环境变量当中
     
• 3. 验证安装成功：CMD窗口输入node -v和npm -v查看是否安装成功

D:\Workspace\VMware\Temp\vueTest>node -v
v18.14.2D:\Workspace\VMware\Temp\vueTest>npm -v
9.5.0D:\Workspace\VMware\Temp\vueTest>

1.3 配置nodejs

• 1. 配置全局路径和缓存路径

npm config set prefix "D:\Nodejs\node_global"   
npm config set cache "D:\Nodejs\node_cache"

• 2. 配置镜像源：

// 配置
npm config set registry http://registry.npm.taobao.org/
// 查看
npm get registry

2. 新建Vue3项目

参考内容
node安装与环境搭建 + VUE项目搭建
使用Node.js+Vue—从零搭建一个Vue项目

2.1 下载Vue3

条件

• npm 已经换源成功
• node没有vue/cli，如果有查看升级的操作

• 1. 安装： npm install -g @vue/cli 全局安装vue3
• 2. 验证：vue -V

D:\Workspace\VMware\Temp\vueTest>npm install -g @vue/cli
... 省略 ...
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
... 省略 ...
npm noticeD:\Workspace\VMware\Temp\vueTest>vue -V
@vue/cli 5.0.8

2.2 创建Vue3项目

推荐查看内容：
node安装与环境搭建 + VUE项目搭建
使用Node.js+Vue—从零搭建一个Vue项目

• 1. 选择合适的文件位置打开CMD窗口
• 2. 创建项目：vue create demo2，其中项目名称为demo2，项目位置在当前的CMD窗口下
• 3. 对于测试使用，选择default vue3即可
     
• 4. 运行项目：首先切换目录，cd demo2然后输入npm run serve运行项目，运行成功之后输入http://localhost:8080/访问网页

D:\Workspace\VMware\Temp\vueTest>cd demo2D:\Workspace\VMware\Temp\vueTest\demo2>npm run serve> demo2@0.1.0 serve
> vue-cli-service serveINFO  Starting development server...DONE  Compiled successfully in 6431ms                                                                          00:25:42App running at:- Local:   http://localhost:8080/- Network: http://192.168.0.109:8080/Note that the development build is not optimized.To create a production build, run npm run build.