Vue笔记【Vue脚手架的安装配置】【保姆级教程】

Vue 的脚手架（Vue CLI: Command Line Interface）是 Vue 官方提供的标准化开发平台。它可以将我们.vue 的代码进行编译生成 html css js 代码，并且可以将这些代码自动发布到它自带的服务器上，下面我们就从零开始搭建脚手架环境。

注意：本篇教程是基于Vue-cli4.0以上版本的

23.1安装node.js

因为要确保npm命令能使用，所以我们需要安装node.js

网址:nodejs官网下载地址

安装过程中别忘了加入环境变量

检查是否安装完成

这一步就说明我们的nodejs已经安装完成了，npm命令就可以用了

23.2npm镜像

这个就相当于maven仓库中改变下载依赖的资源位置，默认是外国的网站，下载下来很慢，配置到国内的资源网站下载速度就快了。

npm config set registry https://registry.npm.taobao.org

检查是否更改成功(返回我们配置的仓库的网址就说明成功了)

npm config get registry

23.3配置全局的脚手架环境

配置全局的脚手架配置一次就行了，以后创建的项目就都有脚手架环境了

npm install -g @vue/cli

检查是否配置成功

到这里脚手架就配置完成了。

23.4创建项目

这里创建项目我使用vscode软件，在电脑上创建一个文件夹来存放项目文件，然后用vscode打开，然后终端打开，这里也可以使用cmd，看个人喜好吧。

创建项目的命令

vue create 项目名字

这里我们需要选择你使用Vue的版本，我这里使用的是Vue2

耐心等待…

成功页面

现在我们第一个脚手架程序就完成了，创建项目后会默认有一个Vue官方给的小程序，下面我们就运行一下吧。

23.5运行项目

我们按照上面的提示，我们首先进入我们项目中

运行项目 npm run serve

当我们看到链接地址时，就说明我们的项目是正确的，无错误，然后点击链接地址，就是对应我们的项目的链接地址了。

成功页面

到此我们就完成了全部的工作了。我们就可以开始写属于我们自己的Vue项目了。