Vue.js学习初体验

一、环境搭建
根据上篇文章，电脑上已经安装了最新版的node和npm，执行以下命令：

$ npm install -g vue-cli

构建结束，进入一个文件夹，比如workspace，然后再文件夹中做初始化操作：

$ vue init webpack myProject

webpack 参数是指myProject这个项目将会在开发和完成阶段帮你自动打包代码，如将js文件统一合成一个文件，将css文件统一合并压缩等。

init的过程中会问你给项目定义一些描述，版本之类的信息，可以不管，一直输入y确定跳过，完成之后出现以下界面，红框部分会提示你接下来要做的操作，按照他的提示继续敲代码就对了。

cd myProject
npm install
npm run dev

npm install是安装项目所需要的依赖，简单理解就是安装一些必要的插件，经常用的就是:

cnpm install vue-router vue-resource --save

npm run dev 是开始执行项目

开发完成后执行：

npm run build 会编译我们的源代码生成最终的发布代码，在dist文件夹中。

二、项目目录结构
index.html使我们的首页；
package.json 文件中保存着一些包依赖信息；
config文件夹中 保存着一些项目初始化配置；
build文件夹中 保存着一些webpack的初始化配置；

最主要的代码都是在src文件夹中；

打开build目录中的 webpack.base.conf.js,会看到代码:

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },
  output: {

说明我们的入口js文件在src目录中的main.js

三、代码分析
Vue的核心架构，主要在于组件和路由两大模块。

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

import Vue from 'vue'

引入Vue

import App from './App'

引入了./App文件，也就是目录中和 main.js同级的App.vue文件；

App.vue文件，是一个视图。

import router from './router'

引入一段路由配置。

接下来的 new Vue 实例化，
然后声明 el：'#app' ,意思是将所有视图放在id值为app这个dom元素中，
components声明引入的文件，即上述的App.vue文件，这个文件的内容将以<App/>这样的标签写进去#app中，总的来说，这段代码意思就是将App.vue放到#app中，然后以<App/>来指代我们的#app。

import Vue from 'vue'
import App from './App'/*引入App这个组件*/
import router from './router'/*引入路由配置*/

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',/*最后效果将会替换页面中id为app的div元素*/
  router,/*使用路由*/
  template: '<App/>',/*告知页面这个组件用这样的标签来包裹着,并且使用它*/
  components: { App }/*告知当前页面想使用App这个组件*/
})

四、单页面组件
App.vue文件，官方叫作组件，单页面的意思就是 结构、样式、逻辑代码都写在同一个文件中，当我们引入了这个文件后，就相当于引入对应的结构、样式和js代码，这不就是我们做前端组件化最想看到的。

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

node端之所以能识别.vue文件，是因为前面说的webpack在编译时将.vue文件中的html，js，css都抽出来合成新的单独的文件。

看到文件内分为三大部分，分别为<template><script><style>，很好理解结构，脚本，样式；script就像node一样暴露一些接口，可以看到我们的template标签中除了一张图片之外就只有一行代码：<router-view/>

五、路由
由服务器端根据一定的url规则匹配来返回给前端不同的页面代码
App.vue文件中看这行代码

<router-view></router-view>

这句代码在页面中放入一个路由视图容器，当我们访问http://localhost:8080/#/about/的时候会将about的内容放进去，访问http://localhost:8080/#/recruit的时候会将recruit的内容放进去。
如此看来，无论我们打开 http://localhost:8080/#/about/ 还是http://localhost:8080/#/recruit页面中的图片都是公用部分，变得只是路由器里面的内容，那么路由器的内容谁来控制呢？

前面说 src/main.js中有一句引入路由器的代码。
import router from './router'
现在就让我们打开router目录下的js文件。

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import About from '@/components/about'
import Recruit from '@/components/recruit'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
},
    {
      path: '/about',
      name: 'about',
      component: About
},
    {
      path: '/recruit',
      name: 'recruit',
      component: Recruit
}
  ]
})

前面先引入了路有插件 vue-router，然后显示生命要用路由Vue.use(Router)。
注意到 Hello，About 等都是页面（也可以是组件），接着注册路由器，然后开始配置路由。
路由的配置应该一目了然，给不同的path分配不同的页面，name参数不重要指示用来做识别用的。看到这里就可以明白，前面说的固定内容，其实就是Hello里面的内容，打开components目录下的Hello.vue就能明白了。
到这里就可以完成路由的配置，有人喜欢把页面放在pages目录下，组件放在components目录下，可能有人会问如果要访问http://localhost:8080/#/about/me的话要如何配置呢，很简单只要给路由加多一个子路由配置，如下：

{
      path: '/blog',
      name: 'blog',
      component: Blog,
      children: [
        {
          path: '/',
          component: page1
        },
        {
          path: 'info',
          component: page2
        }
      ]
    }

访问/blog的时候会访问Blog页面，Blog里面放个路由器就可以了，然后访问http://localhost:8080/#/blog/的时候会往路由容器中放置page1的内容，访问http://localhost:8080/#/blog/info的时候会往路由容器中放置page2的内容

//blog.vue
<template>
    <div>公用部分</div>
    <router-view></router-view>
</template>

六、meditation
首先index.html ，引用main.js ，然后main.js引用App.vue；
主视图中包含共用部分和子路由部分，子路由部分中由router来填充，router引用了各个子组件。