VUE-CLI 零基础配置 并导入GIT资源 -（小白必看）

VUE-CLI安装

在写这篇文章之前，我非常有理由相信有很多很多的VUE小白跟我一样，配置很久很久都不会成功，而且错误很多，虽然网上有很多的技术、教程，但是各种坑会更多（当然并不是说别人的方法不对，很有可能是我们的操作系统、本地环境有差异，导致找的解决方案越看头越大，问题越多），于是经过近两个星期的、不下3位数的尝试次数后，我终于算是基本明白了整体的配置流程，本篇将会为很多像我这样的小白扫清VUE项目配置的绝大多数路障，也希望有更多像我这样既热爱技术，又对VUE刚入门的小伙伴多多分享自己在成长道路上解决各种问题较完善的解决方案！！

本次操作的基础配置信息：

系统：windows 10 x64（虚拟机）
内存：8G
核心：4
硬盘：500G
网络：100M宽带

一般来说只要是我们正常用的电脑基本上就没啥问题，基本上都可以安装好。

安装基本组件node.js

在浏览器输入如下链接node.js官网https://nodejs.org/zh-cn/

大家选择自己合适的系统下载安装，我的是windows平台，我选择了长期支持版本下载安装，安装过程中，大家选择自己的路径安装即可。

安装完毕后，大家可以输入node -v和npm -v检查下结果，如果出现如下的版本号，就说明你已经安装成功。

安装基本组件cnpm （解决npm速度太慢或者卡住的问题方法之一）

安装cnpm的作用主要是用来解决npm下载速度慢的问题，当然也可以使用其他的方式，下面我将会提到使用其他的方式。

打开命令行面板，输入npm install -g cnpm --registry=https://registry.npm.taobao.org回车就可以从国内镜像安装cnpm组件了，安装完毕之后还是老规矩，咱们检测一下：输入cnpm -v查看一下是否有版本号等信息显示，有显示就说明已经安装成功，如果出现cnpm不是内部或者外部命令的错误，请点击这里（感谢 uniapp的文章）。

设置npm的源为国内的资源 （解决npm速度太慢或者卡住的问题方法之二）

通过对npm源进行全局配置方式，我们可以很轻松的解决npm下载太慢或者卡住的情况。在命令行面板中输入npm config set registry https://registry.npm.taobao.org即可，设置完查看下设置结果，在命令行面板中输入npm config get registry查看结果，如下图所示（npm更多设置请点击这里，感谢博主俊俊的小熊饼干）：

通过以上两种方法可以完全解决大家在使用npm命令时出现卡住的问题。

安装VUE-CLI

安装vue-cli之前，大家可以先打开vue-cli官网看下具体的介绍 （点击这里进入VUE-CLI官网）。

这里大家可能会用到的两个命令分别为：

安装命令

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

更新/升级命令

npm update -g @vue/cli
# OR
yarn global upgrade --latest @vue/cli

查看版本命令

vue --version

查看版本命令

vue --version

全局扩展安装命令

npm install -g @vue/cli-service-global

当然，你可以使用 vue serve 和 vue build 命令对单个 *.vue 文件进行快速原型开发，不过这需要先额外安装一个全局的扩展：npm install -g @vue/cli-service-global。

创建项目

vue create 项目名称

创建项目【图形化界面】

vue ui

在现有项目中安装插件

vue add 插件名称

运行项目

npm run serve
# OR
yarn serve
# OR
npx vue-cli-service serve（该命令最新版本的npm支持）

不过我建议小白们还是使用图形化界面比较好，毕竟很直观。

安装webpack

全局安装方法原文请参照这里， 全局安装 webpack 命令：

npm install -g webpack

安装特定版本 webpack（比如 3.x.x）：

npm install -g webpack@3

看 webpack 是否安装成功（下面命令都可以）：

webpack -v
#OR
webpack --version

全局安装成功的话，可以在这里看到对应文件：

同时使用命令

webpack -v
#OR
webpack --version

（webpack4.0使用上面的命令时会提示需要安装对应的依赖，输入yes即可安装）
当然也可以使用如下命令，一次性解决：

# 【全局安装 webpack】
npm install webpack -g

# 【webpack 4.X 开始，需要安装 webpack-cli 依赖】
npm install webpack webpack-cli -g

至此，咱们VUE的就安装好了，这是我们无论任何时候开发VUE都需要提前这么做的，如果你只需要这部分内容，那么恭喜你，看到这里就已经结束了。

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

从GIT上安装项目

写这一章节的主要原因是我想对vue-element-admin进行二次开发，但是由于我本身是使用HbuilderX作为开发工具的，所以必须要通过git获取资源（主要是担心自己下载下来的数据可能会存在问题），废话不多说，就开始干吧！！

安装GIT组件

git安装非常简单，在对应网站下载安装包就可以了，因此这里大家点击这里获取组件安装包：

大家下载好，一路下一步就行，安装结束后会在鼠标右键出现

这两个选项的含义：

第一个：打开git图形界面
第二个：在当前位置打开git命令面板（和cmd命令行类似）

其中第二个是以后我们主要用的对象

以上为我们安装git的全部过程。

正式拉取git项目到本地

安装好git之后，我们就可以在我们的项目根目录（项目文件夹）下，右键选取Git Bash Here命令进行拉取，但是大家都知道git拉取文件的速度堪称龟速，因此为了解决这个问题，我找了很多的资源，并进行测试，最终确定一种方法确实可行，那就是对git的拉取链接进行改造，主要的改造部分如下（以 vue-element-admin项目为例）：

# clone the project
git clone https://github.com/PanJiaChen/vue-element-admin.git
# 改造为
git clone https://github.com.cnpmjs.org/PanJiaChen/vue-element-admin.git

大家一定要注意下，是把git clone链接中的域名做了修改

https://github.com
# 改造为
https://github.com.cnpmjs.org

改造的git拉取速度比之前快了很多倍

如果使用中文版的请记得切换到分支再拉取，分支地址：【git clone -b i18n git@github.com:PanJiaChen/vue-element-admin.git】

当然，这只是其中的方法之一，点击这里还有更多方法。项目拉取完毕之后，开始部署项目！

部署项目

git拉取完毕之后，我们就可以根据，主要的改造部分如下（以 vue-element-admin项目为例）：
打开cmd面板，输入cd 项目目录命令，进入项目目录界面，执行如下操作：

# install dependency  安装项目依赖，初始化，这一步可能会出现各种各样的问题，如果使用npm确实无法安装辖区，可以使用cnpm install 的方式安装，不过这种方式一定要慎用，开发文档中已经讲过
npm install

# develop
npm run dev

操作过程中如果遇到一些问题，请点击这里，里面有我在实践中遇到的问题，以及解决方案

运行效果如下所示：

至此：从git拉取项目并运行就将完了，写的不好，还望各位看官多多体谅，本文仅仅是记录自己排坑的过程，也希望本文可以给更多小白更多指引！！