VUE-脚手架搭建

文章目录

一、概述
二、前提准备
- 1. 安装 node-js
- 2. npm 镜像设置
- 3. 安装 vs-code
三、脚手架搭建
- 1. Vue-2 搭建
- 1. Vue-3 搭建

一、概述

官网：http://cn.vuejs.org/

在这里插入图片描述

vue 有两个大版本，分别是 vue-2 和 vue-3，目前新项目的话用 vue-3 的会比较多

vue-2 官方文档：https://v2.cn.vuejs.org/v2/guide/installation.html

vue-3 官方文档：https://cn.vuejs.org/guide/introduction.html

以下我会分别提供搭建 vue-2 和 vue-3 脚手架的过程。

二、前提准备

1. 安装 node-js

为什么要下载 node-js ？

node 提供了 Javascript 的运行环境，可以让 Javascript 运行在服务端的开发平台

node-js 下载：https://nodejs.org/en/download/

在这里插入图片描述

一般会选择在 LTS 下进行下载，因为 LTS 是稳定版本的，然后根据自己电脑的系统选择安装，比方说我电脑是 windows-64x 的，那我就点击 Windows Installer（.msi） > 64-bit 就会开始下载

在这里插入图片描述

如果想要下载旧版本可在 Previous Release 中查询

在这里插入图片描述
点击 Releases 就能跳转到对应的下载界面

在这里插入图片描述
或者直接在地址上面输入，点击 enter 也能获取

在这里插入图片描述

PS：建议 node-js 的版本最好在 16 以上

点击对应的包即可下载完成

在这里插入图片描述

下载好安装程序包之后，只需要双击打开即可进行安装

在这里插入图片描述

node 的安装也是傻瓜式的，一直 next 即可

在这里插入图片描述

然后点击 finsh

检测 node-js 是否安装成功，只需要 win + R 调起 运行命令框，输入 cmd 打开 cmd窗口，再输入 node -v 查看 node 的版本，如果有显示版本信息，就表明 node-js 安装成功了

在这里插入图片描述
npm 是 node-js 的包管理和分发工具，当安装完成 node-js 后 npm 也随之安装完成，可以通过 npm -v 来校验是否安装成功

在这里插入图片描述

2. npm 镜像设置

在 vue 中经常会使用 npm 来安装一些包，而 npm 的下载镜像是在国外，所以使用 npm 下载会非常的慢，这里有两种方式来解决这个问题：

方式一：使用 yarn 进行安装

使用 yarn 安装就需要保证当前系统有下载过 yarn，同样可以在 cmd窗口 中输入 yarn -v 来检测是否安装过 yarn

如果没有就下载，输入：npm i -g yarn，下载完成之后仍旧可以输入 yarn -v 来进行检测
方式二：设置 npm 镜像为国内的
可以在 cmd窗口 中通过 npm config get registry 命令来查询 npm 所使用的镜像

默认使用的镜像是：https://registry.npmjs.org/，如果你 npm 所使用的镜像是这个的话，就换成国内的，比如：
（1）https://registry.npm.taobao.org/
（2）https://registry.npmmirror.com
比如我使用 https://npmmirror.com/ 所提供的镜像 https://registry.npmmirror.com

那就可以通过 npm config set registry https://registry.npmmirror.com 这行命令将镜像设置为 https://registry.npmmirror.com 即可

3. 安装 vs-code

vue 推荐使用 Visual Studio Code 作为编辑器，如果你之前用的是其它的编辑器进行开发，建议换成 vs-code

Visual Studio Code 下载：https://code.visualstudio.com/Download

在这里插入图片描述
这个安装就不多做演示了

三、脚手架搭建

1. Vue-2 搭建

（一）安装 vue-cli：

vue-cli 就是 Vue 的脚手架

vue-cli 官方文档：https://cli.vuejs.org/zh/guide/

在这里插入图片描述

可以看到目前 vue-cli 已经处于 维护模式 了，但并不影响对它的使用

从官方文档上可以看到安装 vue-cli 可以执行以下任一命令即可：

npm install -g @vue/cli

或者

yarn global add @vue/cli

例如：在 终端窗口 输入 npm install -g @vue/cli 进行安装

在这里插入图片描述

可以通过 vue --version 查看是否安装成功

在这里插入图片描述

如果能看到版本信息就表明安装成功

升级 vue-cli

如果是通过 npm install -g @vue/cli 进行安装的，那么就用 npm update -g @vue/cli 进行升级
如果是通过 yarn global add @vue/cli 进行安装的，那么就用 yarn global upgrade --latest @vue/cli 进行卸载

卸载 vue-cli

如果是通过 npm install -g @vue/cli 进行安装的，那么就用 npm uninstall -g @vue/cli 进行卸载
如果是通过 yarn global add @vue/cli 进行安装的，那么就用 yarn global remove @vue/cli 进行卸载