使用vue Cli
这里使用webStrom生成vue文件

2019-06-01-18-43-27----

主文件

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  el: '#app',
  render: function (createElement) {
    return createElement(App);
  }
})

使用渲染函数,Vue文件导入,挂载到appDom节点上

路由

这里使用vue全家桶的route https://router.vuejs.org/zh/
根据Url 分发视图

这个需要好好学。。。。

Vue中最重要的一块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
    <h1>Hello App!</h1>
    <p>
        <!-- 使用 router-link 组件来导航. -->
        <!-- 通过传入 `to` 属性指定链接. -->
        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
        <router-link to="/foo">Go to Foo</router-link>
        <router-link to="/bar">Go to Bar</router-link>
    </p>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
</div>
<script>
    const Foo = {
        template: '<div>foo</div>',
    }
    const Bar = {
        template: '<div>bar</div>'
    }
    const routes = [
        {path: '/foo', component: Foo},
        {path: '/bar', component: Bar}
    ]
    const router = new VueRouter({
        routes: routes
    })
    const app = new Vue({
        router
    }).$mount('#app')
</script>
</body>
</html>

动态路由匹配

会进行匹配,参数值会进行替换

嵌套路由

状态管理

这里使用vuex
https://vuex.vuejs.org/zh/
所有分散的共享数据由状态管理器保管
使用vuex
当store中状态发生变化,视图重新渲染

改变store中的状态进行提交

state维护应用层状态。。

在项目中使用vuex

使用脚手架搭建出vuex

new Vue({
  // state
  data () {
    return {
      count: 0
    }
  },
  // view
  template: `
    <div>{{ count }}</div>
  `,
  // actions
  methods: {
    increment () {
      this.count++
    }
  }
})
这个状态自管理应用包含以下几个部分:

state,驱动应用的数据源;
view,以声明方式将 state 映射到视图;
actions,响应在 view 上的用户输入导致的状态变化。

驱动映射的数据源 -> 声明state映射到视图,-> actions 响应变化,形成闭环

加数器

创建目录如下

2019-06-02-02-31-21----

定义数据仓库

// 加数器模块

export default {
    namespaced: true,   // 独立命名空间
    // 维护应用层状态,确保应用有唯一数据源
    state: {
        count: 0
    },
    // 唯一数据源的缓存值 定义获取数据的方法
    getters: {
        tenTimesCount: (state, getters, rootState, rootGetters) => {
            console.log(state, getters, rootGetters, rootState);
            return state.count * 10;
        }
    },
    // 定义修改数据的方式
    mutations: {
      addCount: (state, num) => {
          // 若num值为空赋值为1
          state.count += num || 1
      }
    },
    // actions 提交mutations 执行异步操作
    actions: {
        addCountAsync: (context, num) => {
            // 这里异步执行
            setInterval(() => {
                // 提交mutations
                context.commit('addCount', num || 100)
            }, num || 100)
        }
    }
}

导出数据仓库

// 输出文件
import Vue from 'vue'
import Vuex from 'vuex'
import count from './modules/counter'

Vue.use(Vuex)

// 导出实例化仓库
export default new Vuex.Store({
    modules: {
        count: count
    }
})