内容简介:首先我们打开vux的官网查看相关文档传送门:安装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...
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- vue日历组件
- 原生JavaScript实现造日历轮子
- uiw 1.4.0 发布,新增日历控件
- uiw 1.4.3 发布,增强日历控件
- Flutter日历,可以自定义风格UI
- 日程日历系统,顶级插件FullCalendar使用说明
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
C语言算法速查手册
程晓旭、耿鲁静、张海、王勇 / 2009-10 / 49.00元
《C语言算法速查手册》用C语言编写了科研和工程中最常用的166个算法,这些算法包括复数运算、多项式的计算、矩阵运算、线性代数方程组的求解、非线性方程与方程组的求解、代数插值法、数值积分法、常微分方程(组)初值问题的求解、拟合与逼近、特殊函数、极值问题、随机数产生与统计描述、查找、排序、数学变换与滤波等。同时结合这些算法列举了将近100个应用实例,对其进行验证和分析。 《C语言算法速查手册》适......一起来看看 《C语言算法速查手册》 这本书的介绍吧!