vue相关环境搭建一条龙

前言

如题，基于很多朋友对于环境配置及搭建存在疑问或者不熟悉的情况，因此整理一篇完整的环境搭建说明，在此默认各位到手的电脑是需要从0开始配置环境。

 nvm的安装

很多同学过去可能安装node都是直接采用下载安装包，直接进行软件的安装，当然这没什么问题，但是我在这里建议使用nvm来管理node，你要问我应用场景，那可能是因为你没遇到过，多个项目所需node环境版本不一致的情况，即便是没有这种情况，使用nvm来管理node还是极为方便的，那么nvm是什么？简而言之：nvm是让你在同一台机器上安装和切换不同版本的node的工具

nvm下载地址：https://github.com/coreybutler/nvm-windows/releases

•nvm-noinstall.zip： 这个是绿色免安装版本，但是使用之前需要配置

•nvm-setup.zip：这是一个安装包，下载之后点击安装，无需配置就可以使用，方便。

•Source code(zip)：zip压缩的源码

•Sourc code(tar.gz)：tar.gz的源码，一般用于Linux系统

如上，此处建议选择 nvm-setup.zip 下载安装（傻瓜式安装），无需配置，解决一些朋友不会做环境配置的困扰。

安装完成后，测试安装是否成功,在控制台输入如下命令，出现版本号信息，则安装成功。

nvm --version

在此简单介绍几个nvm的常用命令，不做过多阐述

nvm list	查看已经安装的版本
nvm install [arch]	安装制定版本的node 并且可以指定平台 version 版本号 arch 平台
nvm uninstall	卸载制定的版本
nvm use [version] [arch]	切换制定的node版本和位数
nvm version	查看当前的版本

node的安装 （可指定安装版本号）

nvm install 12.16.2

安装完成后,执行如下命令，出现版本号信息即为安装成功

node -v

全局vue-cli脚手架的安装（3.x）

npm install -g yarn  //  安装yarn包管理工具，非必须，自行选择

注意：若电脑之前有2.x版本的脚手架，需要先进行移除，若没有安装过脚手架，可忽略

npm uninstall vue-cli -g  //（若存在2.x，先移除）或者执行，yarn global remove vue-cli

安装3.x脚手架

npm install -g @vue/cli
# OR
yarn global add @vue/cli

查看是否安装成功，若出现版本号信息即为安装成功

vue -V

创建项目

vue create project-name
//OR
vue ui

后面则是根据需要对要创建的项目选择基础配置，此处不再过多赘述。

友情链接：

FatTiger's Blog  https://wangshenjie.com

郭永昌的博客      https://www.guoyongchang.me