vue搭建脚手架
Vue.js（读音 /vjuː/, 类似于view）是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。
Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时，Vue.js 也能完美地驱动复杂的单页应用。
BootCDN（国内） : https://cdn.bootcss.com/vue/2.2.2/vue.min.js
unpkg：https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。
cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js
使用<script> 直接引入这个地址即可使用
（3）NPM方法
Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。
1 # 全局安装 vue-cli 2 $ cnpm install --global vue-cli 3 # 创建一个基于 webpack 模板的新项目 4 $ vue init webpack my-project 5 # 这里需要进行一些配置，默认回车即可 6 This will install Vue 2.x version of the template. 7 8 For Vue 1.x use: vue init webpack#1.0 my-project 9 10 ? Project name my-project 11 ? Project description A Vue.js project 12 ? Author runoob <test@runoob.com> 13 ? Vue build standalone 14 ? Use ESLint to lint your code? Yes 15 ? Pick an ESLint preset Standard 16 ? Setup unit tests with Karma + Mocha? Yes 17 ? Setup e2e tests with Nightwatch? Yes 18 19 vue-cli · Generated "my-project". 20 21 To get started: 22 23 cd my-project 24 npm install 25 npm run dev 26 27 Documentation can be found at https://vuejs-templates.github.io/webpack
进入项目，安装并运行：
1 $ cd my-project 2 $ cnpm install 3 $ cnpm run dev 4 DONE Compiled successfully in 4388ms 5 6 > Listening at http://localhost:8080
这样就生成了一个新项目，然后我们看一项目结构：
然后看一下几个主要文件的内容：
index.html文件
1 <html> 2 <head> 3 <mate chaiset="utf-8"> 4 <title>vue-playlist</title> 5 </head> 6 <body> 7 <div id="app"></div> 8 </body> 9 </html>
main.js文件
1 improt Vue from 'vue' //可以将脚手架中下载的模块拿出来，可以直接使用new来实例化vue对象 2 improt App from './App' 3 4 Vue.config.productionTip = false 5 6 new Vue({ 7 el:'#app', //当前的vue要控制的容器是谁，要获取的这个容器元素是谁，#app是index.thml里的id=“app” 8 template:'<App/>', //模板，可以写对应的div，也可以写组件调用的标签，只要有一个根标签即可 9 components:{ App } //想要调用组件，必须在component里注册这个组件，这里的APP来源于引入的./App文件，即：App.vue文件 10 })
App.vue文件：
1 <!--1模板：html结构 --> 2 <template> 3 <div id="app"> 4 <img src="./assets/logo.png"> 5 <HelloWorld/> 6 </div> 7 </template> 8 9 <!--2行为：处理逻辑 --> 10 <script> 11 import HelloWorld from './components/HelloWorld' 12 13 export default { 14 name: 'App', 15 components: { 16 HelloWorld 17 } 18 } 19 </script> 20 21 <!--3样式：解决样式 --> 22 <style> 23 #app { 24 font-family: 'Avenir', Helvetica, Arial, sans-serif; 25 -webkit-font-smoothing: antialiased; 26 -moz-osx-font-smoothing: grayscale; 27 text-align: center; 28 color: #2c3e50; 29 margin-top: 60px; 30 } 31 </style>
模板：
template可以用它去包括一些内容，它本身并不会真正的渲染到dom里面去，可以直接使用template标签包括起来，注意：template里有且只能有一个根标签。
行为：
通过import来跟别的组件进行关联，然后通过
1 export default { 2 name: 'App', 3 components: { 4 HelloWorld 5 }
注册一下就可以调用了。
样式：
跟css样式一样,这里不再做说明。
项目加载过程
项目开始：index.html ----> main.js ----> App.vue
由index.html入口文件，他会执行main.js文件，main.js会实例化我们的Vue对象，接下来会执行App.vue组件，到了App.vue以后，如果模板有内容的话，他会将模板中的内容插入到index.html的容器当中，也可以在行为属性里设置对应的属性。
