1 Nodejs安装和创建Vue项目

爬楼的猪

已于 2023-03-16 22:02:09 修改

阅读量257

点赞数 2

分类专栏： Vue3前端基础文章标签： vue.js npm 前端

于 2023-03-11 23:41:03 首次发布

本文链接：https://blog.youkuaiyun.com/qq_42727752/article/details/129394241

版权

Vue3前端基础专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何在Windows环境下安装Nodejs，包括下载、安装、配置环境变量和全局路径。接着，文章讲解了如何创建Vue3项目，包括全局安装VueCLI，创建新项目并启动开发服务器。整个过程还涉及到了npm源的配置和项目运行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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的缓存文件夹

在这里插入图片描述

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

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

D:\Workspace\VMware\Temp\vueTest>npm -v
9.5.0

D:\Workspace\VMware\Temp\vueTest>

1.3 配置nodejs

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

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

1. 配置镜像源：

// 配置
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
1. 验证：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 notice

D:\Workspace\VMware\Temp\vueTest>vue -V
@vue/cli 5.0.8

2.2 创建Vue3项目

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

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

D:\Workspace\VMware\Temp\vueTest>cd demo2

D:\Workspace\VMware\Temp\vueTest\demo2>npm run serve

> demo2@0.1.0 serve
> vue-cli-service serve

 INFO  Starting development server...


 DONE  Compiled successfully in 6431ms                                                                          00:25:42


  App 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.

在这里插入图片描述