第二章 使用VUX創建日曆

首先咱們打開vux的官網查看相關文檔
傳送門：https://doc.vux.li/zh-CN/

1.根據官網文檔進行配置

安裝VUX
npm install vux --save

2.配置VUX

在webpack.base.conf.js最後加入如下代碼

// 原來的 module.exports 代碼賦值給變量 webpackConfig，
//即將原來的module.exports 改成 const originalConfig (請查看前面的配置)

const vuxLoader = require('vux-loader')
const webpackConfig = originalConfig // 原來的 module.exports 代碼賦值給變量 webpackConfig
 
module.exports = vuxLoader.merge(webpackConfig, {
  plugins: ['vux-ui']
})

3.爲了驗證是否配置成功，咱們在helloword頁面輸出一下

3.1npm run dev 啓動後提示

Error: Cannot find module 'vux-loader'

安裝 vux-loader

npm install vux-loader --save-dev

3.2 再次啓動以後，成功顯示

3.3 helloword頁面代碼：

<template>
      <alert v-model="show2" title="測試" :content="'Your Message is sent successfully~'"></alert>
</template>

<script>
import { Alert } from 'vux'
export default {
  name: 'HelloWorld',
  components: {
    Alert
  },
  data () {
    return {
      show2: ''
    }
  },
  created () {
    this.$vux.alert.show({
      title: 'VUX is Cool',
      content: this.$t('Do you agree?'),
      onShow () {
        console.log('Plugin: I\'m showing')
      },
      onHide () {
        console.log('Plugin: I\'m hiding now')
      }
    })
  }
}

</script>

4.在src裏面新建文件夾views，而後建一個日曆文件夾（calendar），在新建index.vue文件

將日曆的demo代碼粘貼上去

而後咱們添加一個路由指向剛纔添加的vue文件

科普下路由（兩位大神講解都很清晰），說白就是無刷新跳轉：

https://segmentfault.com/a/1190000015123061
https://www.jianshu.com/p/4295aec31302

添加路由：
https://router.vuejs.org/zh/（官方文檔）

路由對象屬性
$route.path
類型: string
字符串，對應當前路由的路徑，老是解析爲絕對路徑，如 "/foo/bar"。
$route.params
類型: Object
一個 key/value 對象，包含了動態片斷和全匹配片斷，若是沒有路由參數，就是一個空對象。
$route.query
類型: Object
一個 key/value 對象，表示 URL 查詢參數。例如，對於路徑 /foo?user=1，則有 $route.query.user == 1，若是沒有查詢參數，則是個空對象。
$route.hash
類型: string
當前路由的 hash 值 (帶 #) ，若是沒有 hash 值，則爲空字符串。
$route.fullPath
類型: string
完成解析後的 URL，包含查詢參數和 hash 的完整路徑。
$route.matched
類型: Array<RouteRecord>

若是你看完相關的知識，那麼咱們如今就來配置路由

export default new Router({
  routes: [
    {
      path: '/', //url#後面的名稱
      name:'calendar',
  //文件路徑
      component: () => import('@/views/calendar/index.vue'),
      meta: { title: '日曆' } //相關參數  
    }
  ]
})

刪除APP.VUE 裏面的圖片，最終效果，以下：

demo傳送門：https://github.com/CharlesQia...