开始用 vue 框架的时候，我只会
<script src="js/vue.min.js"></script>
然而这种方式可能比较适合入门和熟悉 vue，要进行开发的话还是要使用 vue 的官方命令行工具 vue-cli。
检查 node 和 npm 版本
第一次安装 vue-cli 要检查 node 和 npm 的版本，node 要 4.0 以上，npm 要 3.0 以上（node 和 npm 的安装就略过了）。
node -v
npm -v
如果不是所要求的版本需要升级，可参考：升级node.js和npm
全局安装 v-cli
npm install -g vue-cli
初始化
vue init <template-name> <project-name>
template-name 是 vue 提供的官方模板，这里我们使用的是 webpack 打包工具。可以使用 vue list 命令查看所有可用的官方模板。
vue init webpack vue-demo
然后会有一些选项：
| 选项 | 描述 |
|---|---|
| Project name | 项目名称 |
| Project description | 项目描述 |
| Author | github 用户名 |
| Vue build | 构建方式（独立构建、运行时构建，默认为独立构建） |
| Vue-router | vue 路由，其实并不建议第一次用 vue-cli 的时候使用 vue-router，因为自动生成的项目会变得有些复杂，不好分析，后面用到的时候可以再安装 |
| ESlint | js 的代码检查工具，默认为 standard 标准安装 |
| unit tests（Karma+Mocha） | 单元测试，暂时忽略 |
| e2e tests（Nightwatch） | 端到端测试，暂时忽略 |
然后进入文件夹，安装依赖，运行项目
cd vue-demo
npm install 安装所有依赖
npm run dev 运行
然后浏览器会自动打开 http://localhost:8080/，你就可以看到如下图所示的页面了。
到此为止，一个 vue 项目就基本搭建好了。
分析项目目录结构
接着我们来分析一下项目的目录结构：
| 文件 | 描述 |
|---|---|
| build 和 config | webpack 配置相关文件 |
| node_modules | 通过 npm install 安装的依赖代码库 |
| src | 存放项目源码（开发的所有代码） |
| static | 存放第三方静态资源 |
| .babelrc | babel 的一些配置，babel 的作用是将 ES6 转换成 ES5 |
| .editorconfig | 编辑器的配置（编码方式，缩进风格等等） |
| .eslintignore | 不对这些文件做语法检查 |
| .eslintrc | eslint 的配置，在这里你可以改变默认的一些代码风格，比如句末分号等等 |
| .gitignore | 上传到 git 仓库时，忽略这些文件 |
| .postcssrc.js | 加载配置文件 |
| index.html | 项目的入口 html 文件 |
| package.json | 包管理 |
| README.md | 项目说明文件 |
接着我们可以分析一下与界面直接相关的文件与代码。
先看主目录下的入口 html 文件：index.html
发现只有一个 id 为 app 的 div，接着看 src 文件夹中的项目代码：
- assets 文件夹中存放的是一些静态资源文件，这里只放了一张 logo
的图片。 - components 文件夹存放的是组件，在 vue 中一个组件对应就是一个 .vue 文件，可以看做是 html 标签的拓展与复用，这里只有一个 hello.vue。
- App.vue 这是整个页面的 vue 实例。
- main.js 是项目的入口 js 文件。
先看 main.js 入口文件：
// 使用 import from 的方式加载模块或组件
import Vue from 'vue'
import App from './App'
// 关闭生产模式下给出的提示
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app', // 挂载到一个 id 为 app 的元素上（见index.html）
template: '<App/>', // 渲染组件
// components 用来注册组件
components: { App } // 引入的组件
})
可以发现，main.js 引入了主实例 App.vue，并渲染到 index.html 上。
然后再看 App.vue：
<template>
<div id="app">
<hello></hello><!-- 使用 hello 组件 -->
</div>
</template>
<script>
// 引入了 hello 组件
import Hello from './components/Hello'
export default {
name: 'app',
components: {
Hello
}
}
</script>
<style>
...
</style>
我们发现在 App.vue 中引入并使用了 hello 组件，至此还没发现任何与看到的页面相关的内容，怀着终于走到终点的心情打开了最后一个文件，惊觉原来如此，所有的东西都在这啊。
总而言之，我们在页面上看到的内容（除图片外）都是在 Hello.vue 这个文件定义的，作为一个可以重复使用的组件，被引入了 App.vue 这个实例中，App.vue 这个组件可以看做整个项目的主实例，而 App 这个组件又是通过 main.js 初始化并挂载到 index.html 中渲染的，至于说为什么没有 <script> 这样显式关联的语句，就是 webpack 的功劳了。
