// Vue單頁面實例
<template>
    標簽...
</template>
<script>
    export default {
      data () {},
      methods: {},
      computed: {},
      watch: {}
    }
</script>
<style>
    樣式...
</style>

data() {
    return {
        count: 2
        copyCount: 1
    }
}

// 使用
this.count // 2

// 計算屬性不接受參數(shù)，會緩存依賴數(shù)據(jù)，必須要有return
computed：{
    doubleCount: function () {
      return this.count *= 2
    },
}

// 使用
this.doubleCount // 4

methods: {
    cLog(msg) {
        console.log(msg)
    }
}

// 使用
this.cLog('調(diào)用了函數(shù)') // 控制臺輸出：調(diào)用了函數(shù)

watch: {
    count(value, [oldValue]) {
        // value：改變后的值 
        this.copyCount = value + 1
    }
}

// 當count發(fā)生改變時自動觸發(fā)
this.count = 2
this.copyCount // 3

import UploadImg from 'xxxx'

components: { UploadImg }

// template
<upload-img>

// NPM下載
npm install vue-router
// router.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

// 定義頁面路由（路徑、組件）
export default new Router({
    { path: '/foo', component: () => import('/pages/foo') }, // 路由組件懶加載
    { path: '/bar', component: '/pages/bar'}
})
// main.js
import router from './router.js'
new Vue({
  el: '#app',
  router, // 掛載路由到Vue實例
  render: h => h(App)
})

// page.vue
<!-- 要重點區(qū)分開兩者的關系 -->
this.$router // 訪問路由器，內(nèi)置push、replace的路由方法
this.$route // 訪問當前路由，內(nèi)置path、query等路由屬性
// app.vue
<!-- 路由匹配到的組件將渲染在這里 -->
<router-view></router-view>

<router-link :to="...">
<router-link :to="..." replace>

this.$router.push({ path: 'register', query: { plan: 'private' }})
this.$router.replace(...)   // 與push區(qū)別在不插入history記錄
this.$router.go( [Number] n )   // 在 history 記錄中向前或者后退多少步

// 路由傳參攜帶中文時建議先使用encodeURLComponent轉碼，以免顯示亂碼。

// 用戶未能驗證身份時重定向到 /login
router.beforeEach((to, from, next) => {
  // to 即將要進入的路由對象，from 來源路由，next 鉤子函數(shù)，是否放行
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  else next()
})

router.beforeResolve((to, from, next) => {
  // ...
})

router.afterEach((to, from) => {
  // 該路由守衛(wèi)不接受 next 鉤子函數(shù)
  // ...
})

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

beforeRouteEnter
beforeRouteUpdate (2.2 新增)
beforeRouteLeave

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
...

export default new Vuex.Store({
  state,
  getters,
  mutations,
  actions,
  modules
})
// main.js
import store from './store'

Vue.prototype.$store = store

// store.js
const state = {
    name: 'zzz'
}

<!--page.vue-->
// 1.直接調(diào)用
this.$store.state.name // 'zzz'
// 2.輔助函數(shù)映射
computed: {
    ...mapState(['name'])
}
this.name // 'zzz' 

const mutations = {
    updateName(state, newName) {
        state.name = newName
    }
}

<!--page.vue-->
// 1.直接調(diào)用
this.$store.commit(updateName, 'zzh') // state.name: 'zzh'
// 2.輔助函數(shù)映射
methods: {
    ...mapMutations(['updateName'])
}
this.updateName('zzh') // state.name: 'zzh'

const actions = {
    asyncUpdateName(context) {
        // 異步操作，例如發(fā)起http請求去獲取更新后的name，假設name=xxx
        ...
        context.commit('updateName', res.name) // state.name: 'xxx'
    }
}

<!--page.vue-->
// 1.直接調(diào)用
this.$store.dispatch(asyncUpdateName)
// 2.輔助函數(shù)映射
methods: {
    ...mapActions(['asyncUpdateName'])
}
this.asyncUpdateName()

const getter = {
    formatName(state) {
        return state.name + '2021'
    }
}

<!--page.vue-->
// 1.直接調(diào)用
this.$store.getter.formatName() // 'xxx2021'
// 2.輔助函數(shù)映射
computed: {
    ...mapGetters(['formatName'])
}
this.formatName() //  // 'xxx2021'

// 模塊內(nèi)部
this.$store.state.name  // 內(nèi)部訪問無須使用命名空間
// 模塊外部
this.$store.state.login.name  // login是模塊命名空間
...
其他屬性類似

<!-- api.js -->
import axios from 'axios'

// 創(chuàng)建并配置實例
axios.create({
    baseURL: 'http://www.baidu.com',    // 請求基準地址
    timeout: 1000   // 請求超時時間
    ...
})

// 請求攔截器
axios.interceptors.request.use(request => {
    request.headers['Content-Type'] = 'application/json'
    ...
})
// 響應攔截器
axios.interceptors.response.use(response => {
    ...
    return response.data
})
// 配置請求
export default {
    getId: () => axios.get('/getId'),
    getNameById: id => axios.post('/getNameById', id)
}

<!-- main.js -->
import api from './api.js'

Vue.prototype.$api = api
<!-- page.vue -->
this.$api.getId().then(res => {
    ...
}).catch()