一、前言

在搭建vue3脚手架之前，我们要先聊聊vue和nodejs的关系，并且要先学习nodejs，还有nodejs内置的npm。

1.1 什么是nodeJs

简单的说，node.js类似于jdk，它可以使JavaScript运行在服务端，并且可以跨平台，而不仅在局促于只可以运行在浏览器中。

学过java的可以理解下面的对照关系：
java => javascript
jdk => nodeJs
V8引擎 => jvm

1.2 什么是npm

npm是随同nodeJs一起安装的包管理工具，能解决nodeJs代码部署上的很多问题。如今的nodeJs已经内置了npm（npm跟nodeJs的关系就像maven跟java的关系），所以在后面的安装nodeJs介绍中，就不在提及如何安装npm了。

常见的使用场景有以下几种：
允许用户从npm中央仓库下载别人编写的第三方包到本地使用。
允许用户从npm中央仓库下载并安装别人编写的命令行程序到本地使用。
允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

1.4 什么是vue

 类似于传统的jquery，vue是一个javascript框架。使用JavaScript框架，可以让我们不在写原生js，并且框架内置了很多特性和方法，加快我们的开发效率。
 vue官网：https://v3.cn.vuejs.org/

1.5 vue跟nodeJs的关系

 如果web项目中没有前后端分离，直接使用<script src=“https://cdn.bootcss.com/vue/2.5.20/vue.min.js”></script>的方式引入vue，可以不安装nodeJs。因为这时候当客户端访问网页，网页中使用了vue，然后网页是运行在客户端的浏览器中的，vue.js是js文件，浏览器本来就可以执行js文件，因为浏览器底层有js引擎。
 如果web项目中有前后端分离，前端项目想单独运行在服务器端，那么就要依赖nodeJs，不管前端项目是用vue技术栈还是react技术栈！因为项目想要运行，就必须依赖服务器，传统的nodejs可以用express充当服务器；而vue生态圈中有vue-cli脚手架，它已经实现服务器的功能，并且可以在它里面运行vue前端项目。

1.3 什么是vue脚手架

vue脚手架也称为vue-cli，它类似于spring Initializr，可以快速生成一个可以运行的springboot项目。使用vue脚手架可以快速生成一个可独立运行的vue前端项目，因为它是可以独立运行的，所以需要依赖nodeJs。

二、安装

2.1 安装nodeJs

nodeJs下载地址：http://nodejs.cn/download/

2.2 配置npm

• 设置npm中央仓库为淘宝镜像源

#推荐使用华为的，会比较稳定
npm config set registry https://registry.npmjs.org # 官方仓库
npm config set registry http://registry.npm.taobao.org #淘宝镜像源
npm config set registry https://mirrors.huaweicloud.com/repository/npm/ #华为镜像

npm cache clean -f # 清空缓存

npm config get registry # 查看npm设置的仓库地址，检查是否设置成功

• 设置npm本地仓库的地址

npm本地仓库默认在C盘：C:\Users${user}\AppData\Local\npm-cache

# 设置npm本地仓库的地址
window:
	npm config set cache "F:\npm_repository\npm_cache"
	npm config set prefix "F:\npm_repository\npm_global"
mac os:
	npm config set chache "/Users/xxx/dev/npm_repository"
	npm config set prefix "/Users/xxx/dev/npm_repository"

# 验证是否设置成功
npm config ls -l #获取npm配置列表，然后会显示下图所示

2.3 安装vue-cli脚手架

vue-cli官网：https://cli.vuejs.org/zh/

# 安装vue
npm install vue

# 安装vue-cli
npm install -g @vue/cli

2.3.1 小插曲

在这里博主遇到了个小插曲，就是npm一直卡住不动，如下图所示

解决方法：
使用 npm install vue --verbose 代替 npm install vue，–verbose可以打印详细日志，让你能看到具体遇到什么错了，博主就发现是因为淘宝镜像源没有npm install要的资源，所以一直卡住。所以博主就将npm中央仓库设置为华为镜像：npm config set registry https://mirrors.huaweicloud.com/repository/npm/

三、使用vue-cli脚手架创建项目

# 创建一个项目（dos命令的路径要在npm仓库下，或者配置环境变量）
vue create my-project #使用命令行方式创建
# OR
vue ui #使用ui界面创建，如下图所示

3.1 vue create my-project方式

创建项目的路径要全小写，最好只能有英文和下划线，还不能过长。
终端进入到npm的本地仓库，本地仓库下会有刚刚下载好的vue-cli，执行命令：vue create ${projectname}。注意的是，projectname只能包含小写和下划线！

小提示：使用这种方式生成项目后，项目会当前路径下，这时候可以把整个项目复制粘贴到你想放置的路径下。

3.2 vue ui方式

3.3 查看效果

使用脚手架创建项目成功后，会有如何运行项目的提示。

按提示运行项目，并访问成功！