vue 框架的安装和入门介绍

Vue 是什么
是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。
Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

<router-view>  是什么  ？
<router-view> 组件是一个 functional 组件，渲染路径匹配到的视图组件。<router-view> 渲染的组件还可以内嵌自己的 <router-view>，根据嵌套路径，渲染嵌套组件。
More,please refer to this link ,https://router.vuejs.org/zh-cn/api/router-view.html

Vue 项目的最简单分析（主要是入口分析）

Vue 的安装

step 1 先安装vue 的依赖 Node.js  ，请到官网安装最新版本
    查看node ，npm  的版本

step 2 利用淘宝的npm 镜像安装相关的依赖
    npm install -g cnpm --registry=https://registry.npm.taobao.org

step 3 安装全局 vue-cli 脚手架 ，用于搭建所需要的模板
    cnpm install -g vue-cli

step 4  利用vue  cmd  创建项目

vue init webpack vue_test

step 5 cd 到 vue_test 下 安装依赖模块
      cnpm install

step6  npm run dev  启动 项目


step7 npm run build  用来webpack 打包项目 发布


the section  2  

在 项目创建后 ，使用atom 打开项目 后 发现 src  下面有 四个重要的文件和文件夹 分别是
components router  App.vue  and  main.js

但是项目的入口是 index.html

打开 index  会发现有个 div  id  ='app'

这个 id app  就是上文中的 main js  中的   el: '#app',

同时 本文件还引入了 APP.vue  文件   

app 文件 则引入了 router 下 的 index.js  中的路由规则


说明与比较：new Vue() 和 export default {}


在生成、导出、导入、使用 Vue 组件的时候，像我这种新手就会常常被位于不同文件的 new Vue() 和 export default{} 搞得晕头转向。它们含义到底是什么，又有什么异同呢？


首先，Vue 是什么？ po 主的理解是 Vue 就是一个构造函数，生成的实例是一个巨大的对象，可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。


所以渲染的时候，可以使用构造 Vue 实例的方式来渲染相应的 html 页面：

每个 Vue 应用的起步都是通过构造函数 Vue() 创建 Vue 的根实例：

new Vue({
    el: '#app'  绑定id  ，挂载点
    ...
})

一个 Vue 实例是一个ViewModel (MVVM 模式) 。
在实例化 Vue 时，要传入一个选项对象，它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。



那么 export default {} 又是来干嘛的？


这是在复用组件的时候用到的。假设我们写了一个单页面组件 A 文件，而在另一个文件 B 里面需要用到它，
那么就要用 ES6 的 import/export 语法 ，在文件 A 中定义输出接口 export **，在文件 B 中引入 import **，
然后再生成一个 Vue 实例 new Vue (**)，把引入的组件用起来，这样就可以复用组件 A 去配合文件 B 生成 html 页面了。


所以在复用组件的时候，export 和 new Vue 缺一不可。





入门 blog  http://blog.csdn.net/haoshidai/article/details/52244670