Vuejs 整合 MUi
整合方法和使用axios的方法类似.具体步骤如下:
- 引入mui的css和js
import mui from './lib/mui/js/mui.js'
import './lib/mui/css/mui.min.css'
Vue.prototype.$mui = mui; // mui 不能 use, 可以改写原型链,将 mui 改写为 Vue 的原型属性
- 因为 mui 使用了匿名递归不能直接 require 自然也不能用 amd 方式加载到 es6 代码中,vue 的严格模式下会报错
移除严格模式的方法:使用
$ npm install babel-plugin-transform-remove-strict-mode
修改.babelrc
{
"plugins": ["transform-remove-strict-mode"]
}
- mui 并不能 use,只能每个需要发送请求的组件中即时引入.
解决办法: 改写原型链
这时候如果在其它的组件中,是无法使用 mui 的方法。但如果将 mui 改写为 Vue 的原型属性,就能解决这个问题.
2.在组件中使用
mounted() {
var info = document.getElementById("info");
document.getElementById("alertBtn").addEventListener('tap', () => {
this.$mui.alert("欢迎使用Hello MUI");
});
}
Vuejs 整合 MUi的更多相关文章
- springboot+layui实现PC端用户的增删改查 & 整合mui实现app端的自动登录和用户的上拉加载 & HBuilder打包app并在手机端下载安装
springboot整合web开发的各个组件在前面已经有详细的介绍,下面是用springboot整合layui实现了基本的增删改查. 同时在学习mui开发app,也就用mui实现了一个简单的自动登录和 ...
- vue整合mui
步骤1:下载https://github.com/dcloudio/mui 步骤2:将下载来的包中的dist文件夹 放到vue项目的assets中 步骤3:修改webpack配置 找到build下 ...
- webpack整合 vue-router 路由,模块嵌套,整合Mint UI,MUI
webpack整合 vue-router 结构 各个文件内容,一共八个文件, 还有src components 目录 Login.vue <template> <div> &l ...
- 十一、VueJs 填坑日记之使用Amaze ui调整列表和内容页面
上一篇博文我们整合了Amaze ui,并且调整了一个头部header和底部footer文件,其实做起来也很简单,只要按照步骤来做,完全没有问题.今天我们来重新调整一下列表页面和内容页面,使我们做的后台 ...
- mui点击加载,下拉刷新,上下整合代码
mui点击加载,下拉刷新,上下整合代码 mui的是上拉加载,但是老大说要做成点击加载,所以就改了一些 代码应该是有些问题的,测到了大家就自己改下. 首先要说明的是,有下拉刷新的页面一定要是双webvi ...
- 整合.NET WebAPI和 Vuejs——在.NET单体应用中使用 Vuejs 和 ElementUI
.NET简介 .NET 是一种用于构建多种应用的免费开源开发平台,例如: Web 应用.Web API 和微服务 云中的无服务器函数 云原生应用 移动应用 桌面应用 1). Windows WPF 2 ...
- MUI - Scroll插件的使用
http://dev.dcloud.net.cn/mui/ui/#scroll 神坑1:如果在vuejs中使用,那么需要配合mui.ready(function(){}) 才能找到dom对象,具体de ...
- 【S】【S】【S】一大波前端干货整合(一)
前端交流站点 大前端 http://www.daqianduan.com/ V2EX http://www.v2ex.com/ W3cplus http://www. ...
- 选择移动web开发框架研究——有mui、frozenui以及Sencha Touch等
纯粹的总结一下移动web开发框架,移动 web开发框架有jQuery Mobile .Sencha Touch等等,他们都来源于web开发,是成熟的框架,jQuery Mobile出自于jQuery家 ...
随机推荐
- python 爬取网页内容
#encoding:UTF-8 import urllib import urllib.request import bs4 from bs4 import BeautifulSoup as bs d ...
- ISO 8895-1
https://en.wikipedia.org/wiki/ISO/IEC_8859-1#Codepage_layout http://czyborra.com/charsets/
- linux上安装tomcat
这里采用离线解压tar.gz的方式安装 下载: wget http://mirror.bit.edu.cn/apache/tomcat/tomcat-8/v8.0.33/bin/apache-tomc ...
- (矩阵快速幂) Fibonacci -- poj -- 3070
链接: http://poj.org/problem?id=3070 Fibonacci Time Limit: 1000MS Memory Limit: 65536K Total Submi ...
- node 问题
安装:使用.msi直接安装就好,环境变量已经设置好了 1.问题:验证node是否正确安装 办法:直接计算1+1:创建服务器. 在项目文件夹的路径下,输入node命令,会看到一个提示符,这里只能输入直接 ...
- WPF添加样式字典Style
新建Resource Dictionary文件,取名Style: 将常用的样式写入该文件: 在App.xaml中引用该文件: <Application x:Class="Machine ...
- dD Geometry Kernel ( Geometry Kernels) CGAL 4.13 -User Manual
1 Introduction This part of the reference manual covers the higher-dimensional kernel. The kernel co ...
- mui关闭侧滑
一个页面有多个webview时,其中一个可以侧滑,其它禁止侧滑 document.getElementsByClassName('mui-inner-wrap')[0].addEventListene ...
- C#多线程编程系列(五)- 使用任务并行库
目录 1.1 简介 1.2 创建任务 1.3 使用任务执行基本的操作 1.4 组合任务 1.5 将APM模式转换为任务 1.6 将EAP模式转换为任务 1.7 实现取消选项 1.8 处理任务中的异常 ...
- redis 数据备份持久化方案
本文链接:http://www.cnblogs.com/zhenghongxin/p/9050219.html 使用两种备份方案 备份方案选择RDB和AOF同时进行备份,必须打开AOF的持久化机制,除 ...