第二章-使用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…