Vue 脚手架的搭建流程

准备工作

在开始搭建脚手架之前，我们需要检查电脑环境，node的版本不能过低，版本过低可能会出现报错，如果你的node版本在8.9以下，建议你卸载安装8.9以上的版本。

安装脚手架

打开命令窗口，全局安装脚手架，用于生成项目。

npm install -g @vue/cli

快速原型的开发

可以直接去运行一个独立的vue文件。

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

卸载脚手架

npm uninstall vue-cli -g

转义工具

可以2.x的版本去写3.x的语法。

npm install -g @vue/cli-init

运行vue文件

文件名为App.vue的时候可以省略文件名。

vue serve App.vue

创建项目

创建项目有两种方法，第一种是通过命令行工具，第二种是通过UI界面操作，当然身为程序员，使用命令行工具更加有逼格。

UI界面操作

在命令行中输入 vue ui 后浏览器自动打开UI界面操作。

命令行工具

创建项目

输入以下命令创建一个项目名为 vue-app 的项目

vue create vue-app

是否使用淘宝镜像

在第一次创建的时候，会提醒我们是否使用淘宝镜像，一次性选择，下次创建时不会出现此项。由于之前设置过了，这里没有出现此项，所以没有截图。

选择创建方式

default 默认选择，我们通常一般选择 Manually 自定义配置 ，按需求添加依赖项。

选择依赖项

选择Manually后进入选择依赖项的界面，键盘上下移动发，空格键选中，系统默认是使用 Babel 和 Linter，我们前期只选择 Babel 即可。

选择配置文件类型

选择我们熟悉的json文件作为配置项。

是否存储为预设

输入y后设置预设名称，等待命令运行完成，脚手架的搭建完成了。

运行项目

在项目目录的根目录里运行项目

npm run serve

浏览器输入 locahost:8080 打开项目即可运行。

总结

总的来说脚手架的搭建还是非常简单的，脚手架搭建完成后我们就可以打开项目里去编辑项目了，下篇博客将记录一些vue项目的使用，尽情关注哦~