第二章 使用VUX建立日历

栏目: 编程语言 · 发布时间: 5年前

内容简介:首先我们打开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页面输出一下

第二章 使用VUX建立日历

3.1npm run dev 启动后提示

Error: Cannot find module 'vux-loader'

安装 vux-loader

npm install vux-loader --save-dev

3.2 再次启动之后,成功显示

第二章 使用VUX建立日历

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 里面的图片,最终效果,如下:

第二章 使用VUX建立日历

demo传送门: https://github.com/CharlesQia...


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

新机器的灵魂

新机器的灵魂

Tracy Kidder / 龚益、高宏志 / 机械工业出版社华章公司 / 2011-10 / 45.00元

计算机从1981年开始发生巨大的变化。《新机器的灵魂》完整地记录下了当时一家公司齐心协力把一种新的小型计算机推向市场的过程中所发生的一系列戏剧性的、充满戏剧色彩的、激动人心的故事。 本书以美国通用数据公司研制鹰电子计算机的全过程为主线,对美国计算机工业的发展和管理中鲜为人知的侧面,作了条理清晰、颇具诗情画意的描述。 你想知道一代新型计算机怎样诞生,精明干练而又富于幽默感的工程技术人员怎......一起来看看 《新机器的灵魂》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

MD5 加密
MD5 加密

MD5 加密工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具