1. Vue.js 是什么
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
Vue 采用自底向上增量开发的设计，核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。其目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
2. 三种不同的构建 Vue 项目方法
一、直接引入 Vue.js
1. 下载 Vue.js
右键下方链接，将 Vue.js 另存为到相应的项目文件夹下，在 html 中直接引用文件
<script src="vue.js" type="text/javascript"></script>
2. 项目文件结构
.
└── testVue
├── Vue.js
└── index.html
3. 完整的 index.html 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> my first project </title>
<script src="vue.js" type="text/javascript"></script>
</head>
<body>
<div id="app">
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'hello world'
}
});
</script>
</body>
</html>
4. 优缺点分析
操作难度是最简单的，而且不需要再进行额外的操作，适合新手入门，上手快，适用于轻量级的设计。缺点是项目结构需要自己再进行完善，否则容易导致项目文件紊乱，缺乏条理，对于多人合作的项目需要一定的沟通交流，并且写好开发文档，相应的拓展也比较麻烦。
二、使用 CLI 快速搭建脚手架
1. 安装 vue-cli
NPM 是随同 Node.js 一起安装的包管理工具，能解决 Node.js 代码部署上的很多问题，常见的使用场景有以下几种：
-
允许用户从 NPM 服务器下载别人编写的第三方包到本地使用。
-
允许用户从 NPM 服务器下载并安装别人编写的命令行程序到本地使用。
-
允许用户将自己编写的包或命令行程序上传到 NPM 服务器供别人使用。
第二种方法需要使用到 NPM，这里提供 Node.js 的链接，在安装了 Node.js 后使用命令行工具输入
npm -v
//检测 npm 是否正确安装
npm install -g cnpm --registry=http://registry.npm.taobao.org
//安装淘宝镜像安装相关依赖
npm install -g vue-cli
//安装 vue-cli 脚手架构建工具
2. 构建项目
此时，我们已经正确安装好了 vue-cli 脚手架构建工具，这个时候我们就可以新建我们的项目了，假设我们要把项目建在 D:\WebProject 中时
cd D:\WebProject
//进入 D:\WebProject 目录
vue init webpack testVue1
//新建一个名为 'testVue1' 的项目，会询问相关配置，初学者可以先一路 Yes 过去就行
cd testVue1
//进入 testVue1 文件夹
npm run dev
//运行项目
在执行完 npm run dev 命令后，会生成一个链接
http://localhost:3000
将链接复制后在浏览器打开，就会显示出（不一定就是3000）初始化的界面
3. 项目文件结构
.
├── README.md
├── build
│ ├── build.js
│ ├── check-versions.js
│ ├── logo.png
│ ├── utils.js
│ ├── vue-loader.conf.js
│ ├── webpack.base.conf.js
│ ├── webpack.dev.conf.js
│ └── webpack.prod.conf.js
├── config
│ ├── dev.env.js
│ ├── index.js
│ ├── prod.env.js
│ └── test.env.js
├── node_modules
│ └── ...
├── src
│ ├── App.vue
│ ├── assets
│ │ └── logo.png
│ ├── components
│ │ └── HelloWorld.vue
│ ├── main.js
│ ├── App.vue
│ └── router
│ └── index.js
├── static
│ └── .gitkeep
├── test
│ ├── e2e
│ └── unit
├── .babelrc
├── .editorconfig
├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── .postcssrc.js
├── index.html
├── package.json
└── package-lock.json
4. 优缺点分析
Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本。CLI 工具假定用户对 Node.js 和相关构建工具有一定程度的了解。如果你是新手，建议在对 Vue 有一定了解之后，再使用 CLI。
三、使用 HBuilder X + uni-app 快速搭建项目
1. 下载 HBuilder X
HBuilder X 是目前对 Vue 开发者而言最适用的编辑器。HBuilderX中使用 Vue ，如果是打开 vue 文件，会自动挂载 vue 语法库。
如果是HTML文件里引用 Vue 框架，需要点右下角的语法提示库，选择 vue 语法库。我们更推荐开发者使用 vue 单文件规范，直接打开 vue 文件。 注意：如果文件不在项目下，而是单独的文件，无法挂载语法库，请在左侧项目管理器建个项目，打开项目里的文件进行体验。
2. 新建项目
3. 项目文件结构
.
├── pages
│ └── index
│ └── index.vue
├── static
├── main.js
├── App.vue
├── manifest.json
└── package.json
4. 优缺点分析
HBuilder X 对 Vue 的支持可谓尽善尽美，除了vue的普通语法高亮支持，HBuilderX还支持各种表达式语法，以及script和style支持的其他语言如less、scss、stylus、typescript等高亮，无需安装插件。 除了完善的提示，在代码助手右侧还能看到清晰的帮助描述，对api进行说明，还有vue官网的api链接，点击即可直达vue官网指定页面。非常适合学习参考。
用此方法新建的项目，具有基本的构成框架，可延展性强，上手难度简单，非常适合于中小型项目的开发，几乎没有缺点（有也被 HBuiler X 的强大功能掩盖，瑕不掩瑜）
