vue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目。 下面我将从零介绍 vue-cli 的整个搭建过程。

注意：以下内容是基于Vue-cli4.0以上版本的

安装npm

NPM（node package manager）是随同node.js一起安装的包管理工具，能解决前端代码部署上的很多问题，常见的使用场景有以下几种：

1.允许用户从NPM服务器下载别人编写的第三方包到本地使用。
2.允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
3.允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

实际上，npm就是前端的Maven。

从node官网下载并安装node，安装步骤很简单，只要一路next就可以了。 安装完成后，打开命令行工具输入命令node -v，如下图，如果出现对应版本号，就说明安装成功了。

C:\Users\Administrator>node -v
v12.18.0

我们所需要的npm也已经安装好了，输入如下命令，显示出npm的版本信息。

C:\Users\Administrator>npm -v
6.14.4

到这里node的环境已经安装完了,npm包管理工具也有了，但是由于npm的有些资源被墙，为了更快更稳定,所以我们需要切换到淘宝的npm镜像——cnpm。

安装cnpm

点击进入淘宝的cnpm网站,里面有详细的配置方法。 或者直接在命令行输入：

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

然后等待，安装完成。 输入cnpm -v，可以查看当前cnpm版本，这个和npm的版本还是不一样的。

C:\Users\Administrator>cnpm -v
cnpm@6.1.1

使用cnpm的方法就是，需要用到npm的地方直接使用cnpm替换就可以了。

全局安装 vue-cli

全局安装vuecli（就相当与在本机的npm仓库中有了vuecli）：

//安装最新@vue/cli版本
npm install -g @vue/cli
//安装指定的@vue/cli版本
npm install -g @vue/cli@4.1.1

安装完成后，使用 vue -V 显示版本号来测试vue是否安装成功。

C:\Users\Administrator>vue -V
@vue/cli 4.1.1

创建vue-cli工程

我是在桌面上建立了个文件夹存放项目，你们根据自己的情况找个合适的地方放工程。
1. 在命令行下进入到工作空间文件夹(存放工程的目录)中，输入如下命令：

vue create hello

hello是工程名（注意：工程名必须全部小写）

2. 出现下面的情景，按一下回车，默认即可。

3. 然后就是这样，耐心等待，需要一会时间。

4. 最后这样就ok了，就是成功了。

5. 按照指示依次输入那两个命令。
如果当初创建的工程名不是hello的话就不是cd hello，根据你们的提示来。

cd hello
npm run serve

回车，稍等片刻。
这样就是ok了。

6. 在浏览器中输入：http://localhost:8080

这样就是一切搞定了。

看完如果对你有帮助，感谢点赞支持！
如果你是电脑端，看到右下角的 “一键三连” 了吗，没错点它[哈哈]

加油！

共同努力！

Keafmd