Vue-cli 使用说明

vue2 vue-cli vuex vue-router

使用 vue-cli 创建模板

$ vue init webpack vue-demo
// 此处开启 vue-router
$ cd vue-demo
$ npm install 

补充插件：
babel-runtime

$ npm install babel-runtime

babel-polyfill 辅助 es6 编译

$ npm install babel-polyfill --save-dev
// 在 main.js 顶部引入
import 'babel-polyfill'
// 如果按需引入的话
// 在模块内按需引入
const Promise = require('babel-runtime/core-js/promise')
// 全局引入
import 'core-js/es6/promise'

fastclick 解决 300ms 点击延迟

$ npm install fastclick
// 在 main.js 
import fastclick from 'fastclick'
fastclick.attach(document.body);
会默认拦截 click 事件
如果某个元素需要 click 事件的时候，或者需要手动派发时
给这个标签增加`needsclick`的 class ，就不会拦截了

jQuery基本库

在 index.html 全局引入
<script src="xxx">

页面逻辑

入口网页：

index.html 通用 js 可直接在 index 引入

入口文件：

src 里面的 main.js 这个文件主要用来引入一些公共组件和整体设置

// 这个模板使用 import 引入组件
// 在 build/webpack.base.conf.js 中进行 webpack 的基本设置
// 都是套路
import 'babel-polyfill' // 引入 es6 垫片
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
  el: '#app', // 钩在 index.html 的 #app 上
  router, // 传入 vue-router
  template: '<App/>', 
  components: { App } // 传入组件 App
})

路由文件：

src/router/index.js

// 前两行是套路
import Vue from 'vue' 
import Router from 'vue-router'
// 从这里开始引入组件，@ 是别名，指向 src 文件夹
// 组件首字母大写
import Hello from '@/components/Hello'
import My from '@/components/My.vue'
import Purse from '@/components/Purse.vue'
import Coupon from '@/components/Coupon'
// 套路
Vue.use(Router)
// 输出 Router
export default new Router({
// Router.routes 一个路由数列
// 每个对象里面有path 路径 name（用来引用） component 指向已引入的组件，还可以加一些钩子
  routes: [
    {  // 默认访问根路径的时候，重定向至 /my 路径
        path: '/',
        redirect: '/my'
    },
    {
      path: '/my',
      name: 'my',
      component: My，
      // 组件可以是一个类似树状的结构
      // children 属性是一个数组，可以放多个子路由
      // 需要在 My 这个组件里面放 router-view 标签来挂载子路由
      // 组件内编程式跳转到子组件
      // this.$router.push({
      //    path: `/my/purse`
      // })
      children: [
        {
            path: ':id', // ':' 表示可以传入不同的 id 来展示不同的数据
            conponent: Purse
        }
      ]
    }
  ],
// Router.beforeEach 钩子函数，回头补充介绍
  beforeEach:((to, from, next) => {
      // ... 可以配置每个页面的
      next(function(vm))
  })
})

路由的跳转

<router-link tag="div" :to="{ name: '', params: {} }" class="">
</router-link>

默认会渲染成一个<a>标签
tag 属性可以指定渲染成什么样子的标签可以加 class 样式，
to属性对应一个对象:
name 对应 routes 里面的路由的 name
params 可以传入一个对象，可以在子组件的$route.params获取
当这个 <router-link>被激活时，vue 会给这个标签加一个router-link-active的class，可以写样式来标记这个标签

主要用来操作的组件 App.vue，

<template>
    <div id="app">
        <keep-alive>
            <router-view></router-view>
        </keep-alive>
    </div>
</template>
<script>
    export default {}
</script>
<style lang="css" scoped>
</style>

大部分组件都在这里引入

对于单个组件ComponentA 的使用

1.在 script 内引入
import ComponentA from './src/component/ComponentA.vue'
2.注册组件

export default {
    components: {
        ComponentA
    }
}

3.在模板(<template></template>)里面使用

<component-a><component-a>

router-view 的注意事项

单独使用 <router-view> 标签时，切入组件一次,会调用 created() 一次,切出时调用 destroy() 一次。切出再切入，组件的生命周期会重新走一遍，重新渲染dom重新加载数据。
用 <keep-alive></keep-alive>将其包起来，就可以将dom 缓存在内存中，切换时不会出现闪屏。切出的时候会调用 destroy()，这时要记得清理组件的计时器。

• 补充，给部分 router 设置 keep-alive 的做法
• 在标签内绑定 :include=['name1','name2'] 属性，name 匹配的组件会被缓存
  
• 具体会调用哪些[生命周期]钩子1，keepalive的组件切换时：activated() 和 deactivated()