虾米带你轻松搞定Vuejs 系列

（一）开篇：Vue 脚手架3.X项目创建基础

概述
Vue.js 作为一门轻量级、易上手的前端框架，从入门难度和学习曲线上相对其他框架来说算是占据优势的，越来越多的人开始投入 Vue.js 的怀抱，走进 Vue.js 的世界。那么接下来屏幕前的你不妨一起来和我从零开始构建一个 Vue 项目，体会一下 Vue.js 的精彩绝伦。

依赖工具
在创建一个Vue项目前，我们先要确保你本地安装了Node环境已经包管理工具 npm,打开终端运行：

#查看node版本

#查看npm版本

如果未打印出版本号，说明你本地并未安装node运行环境，去node官网下载node安装包，注意需要安装对应自己机器位数的安装包。

脚手架
当我们安装完毕node运行环境后，可以开始后续的构建工作了，那么我们赶紧介绍一下脚手架构建吧。

1、什么是脚手架
“脚手架”无论是前端还是后端，其实他在生活中意义，是为了保证各项施工过程中顺利进行而搭建的工作平台。因此作为一个工作平台，前端的脚手架可以理解为能够帮助我们快速搭建前端项目的一个工具或者平台。

2、vue-cli
其实说到脚手架，目前前端各大主流框架都提供了自己的脚手架工具，帮助开发者快速构建自己的项目，比如：Vue、React、Angular等等。这里我们介绍的是Vue项目，脚手架当然是用Vue-cli.
vue-cli经历了几个版本的迭代，截止到我写这个比较版本是3.2.1。下边我们一起来看一下构建的流程吧：
2.1、安装
我们可以通过终端执行全局安装vue-cli脚手架：
建议使用管理员权限打开命令面板执行
npm i -g @vue/cli 全局安装vue-cli；

如果你习惯用yarn,你也可以这样操作：
全局安装yarn
npm i -g yarn
yarn global add @vue/cli

这里需要注意，因为是全局安装。脚手架安装的是全局包，跟实际你要开发的项目目录没有什么直接的关系。注：vue-cli 3.X和2.X版本存在这很大的差别。具体在项目中遇到了我再记录下来。

2.2、构建
安装完vue-cli后，你可以在你想创建的项目目录下执行构建命令
vue create my-project # my-project表示你的项目名称。

2.3、启动
构建完成后，就可以运行命令启动你的Vue项目

如果你是yarn 脚手架，你可以在打开项目目录，然后执行
cd my-vue
yarn serve
or
npm run serve
为了防止启动时候的出现报错或者是包丢失的情况，最好将node或者yarn更新到最新版本

成功后打开浏览器（以我本地为例子）：

打开浏览器可以看到这样的界面：

2.4、目录结构
最后脚手架生成的目录结构如下：

3、可视化界面
除了使用上述的命令，vue-cli 3.X还提供了可视化操作界面，我们看一下在项目的目录下执行命令开启图形化界面：

vue ui

执行上述命令后浏览器会自动打开本地

如果你还没有任何项目，那么可以点击创建或者直接导入现有的项目。创建项目和我们使用命令行的步骤基本相同，完全可视化操作，一定程度上降低了构建和使用的难度。项目创建或导入成功后你便可以进入项目进行可视化管理了。

你可以管理的vue项目安装插件，如下：

在整个管理界面中，我们可以为自己的项目安装cli 提供的插件，比如安装vue-router

我们可以再依赖中看到

如果你不习惯用UI界面操作，你也可以进入你的项目，执行
npm i vue-router
也可以达到一样的效果.
我们验证一下，效果是否一致，可以打开项目package.json这个文件

总结
使用vue-cli 成功生成了一个最简单的vue项目，看源码发现很少的文件和代码，好像都全了。但是如果想在项目中实践起来，还需要对他不断的丰富。未完待续。。。