Vue.js环境安装教程及问题解决方法

梳理一下vue的环境配置及安装

1.安装node.js

先安装node.js。 去官网下载然后安装即可，
node.js网址https://nodejs.org/zh-cn/

下载第一个即可，然后双击下载的安装包安装即可，安装选项建议全部使用默认值。

在cmd控制台中使用

node -v

命令
如果出现了版本号证明安装成功啦

2.安装Git工具

1、 打开git的官网： https://git-scm.com/

2、 点击Downloads，跳转到下载页面，根据自己的系统下载

下载完成后双击即可安装，建议安装在d盘，安装好后如下图所示

点击第二个即可进入git工具

3.检测npm是否安装

检查npm是否安装成功，npm一般随node一起安装在电脑中，node如果成功了，npm也会自动安装上，
在git工具中或者cmd中使用

npm -v

检查是否安装成功

4.安装cnpm

现在node环境已经安装完成了，npm包管理器也有了。由于有些npm资源被屏蔽或者是国外资源的原因，经常会导致npm安装依赖包的时候失败，所以我们还需要npm的国内镜像----cnpm（淘宝的镜像）

在git工具中输入：

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装完成后使用命令

cnpm

检查是否安装成功

5.安装yarn

安装yarn
yarn安装参考网站：https://www.jianshu.com/p/4a225dcacd53
git工具中输入：

npm install -g yarn

检验是否安装成功：

yarn -v

6.Vue安装

cmd输入：

cnpm install vue

7.安装vue-cli脚手架工具

官方提供的项目搭建工具，vue-cli。

命令

cnpm install -g @vue/cli

8.打开图形界面

在git工具中输入命令：

vue ui

即可在浏览器中打开图形界面

在git工具中 用Ctrl+c即可结束程序

9.新建项目

在图形界面中点击创建项目

1.选择在哪个文件夹下创建，

然后创建项目即可
2.

输入项目名称，包管理器选择yarn，其他的默认即可，然后点击下一步。

点击默认，然后再点击创建项目即可。
创建项目之后等待的时间可能有些长。

然而到这还没有完全成功

4.运行项目

点击右上角的自定义按钮，

点击加号

再点击配置部件，选择sever

点击运行程序后稍等片刻

会弹出一个弹窗右下角，然后单击任务，sever，点击启动app。
弹出如下网页则说明大功告成。

10.在Visual Studio Code中对项目进行编辑

找到所创建文件直接用Visual Studio Code打开
然后ctrl + ~打开终端
然后输入命令：

yarn serve

显示如下图则说明成功

/
/
/
/
安装到这里差不多就结束了，下面跟大家说一说在安装中出现的一些问题及解决方法。
遇到的问题：

1.安装插件时

遇到这个问题是因为在安装脚手架的时候时间太长，我以为网络出问题了，就结束了进程，结果再进行安装直接报错。解决办法：

  1.清除缓存
  命令：npm cache clean --force
  2.然后再次进行安装即可

2.在Visual Studio Code的终端输入yarn serve时报错

解决方法：

1.右键开始菜单找到Windos PowerShell，直接搜也行
2.打开之后执行set-ExecutionPolicy RemoteSigned命令，
输入A即可，如下图所示

3.代码无法显示，在Visual Studio Code中全是白色的

解决方法：
在Visual Studio Code安装名为vetur的插件。

4.创建项目失败

这个原因很复杂，其中一部出现错误，就会创建失败，简单直接的方法就是用各种检查命令检查自己的每一步的安装是否成功。