首先我们打开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/1190000015123061https://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...