如何在Vue中使用MUI

最新推荐文章于 2024-04-04 19:47:31 发布
最新推荐文章于 2024-04-04 19:47:31 发布
阅读量543 收藏 4
点赞数 2
分类专栏： VUE 文章标签： Vue MUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42649842/article/details/102545448
版权

@TO关于Vue使用MUI注意事项C
1.到MUI官网下载MUI包（下载地址：https://github.com/dcloudio/mui）
在这里插入图片描述
2.将下载包的dist目录下的三个文件夹复制到Vue项目下的src目录下

在这里插入图片描述
3.在Vue项目中的js入口文件main.js中导入MUI的css样式
在这里插入图片描述
4.需要注意的是要在Vue的webpack.config.js中进行配置
在这里插入图片描述
5.特别注意将MUI中的样式mui.css中的.mui-spinner:after{background-image: url(""）}(即把url中的单引号改为双引号)。
在这里插入图片描述

weixin_42649842
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
mui+vue结合开发的商城APP实例
09-28
在网上花了很多时间找的mui+vue结合开发的商城APP实例，大家可以和学习借鉴一下，mui开发实例 ，vue开发实例
VUE中使用MUI方法_vue.js
weixin_44109689的博客
01-08 769
VUE中如何使用MUI 1、第一步：下载MUI 百度搜索MUI进入其官网点击右上角github地址，下载MUI文件 2、第二步：拷贝文件 拷贝下载文件的dist目录中的三个文件复制到自己项目中创建的mui目录中 。 若引入的mui.css报错,可能是mui中url会指向一些图片，将图片地址的单引号改为双引号就可以了。 3、第三步：引入MUI的样式 在main.js文件中...
vue项目中使用mui
weixin_30879169的博客
04-17 490
下载mui.js，放入static文件夹，直接在index.html中引入mui.js，之后就可以在整个项目中使用了， 获取APP版本号 mui.plusReady(function() { mui.getJSON("manifest.json",null,function(data){ alert（ data.version.name）; }) }); 转载于:...
vue 使用mui
weixin_43617604的博客
07-19 651
一 .vue使用mui的方法 与bootstrap一样 1.1 首先在github上下载mui项目包 (https://github.com/dcloudio/mui) Download.zip会快一点 1.2 然后在你的vue项目中src 目录下建立lib文件夹 这里是放入外部组件的不依赖vue 将mui加压后的mui-master里有个dist文件夹 将这个dist文件夹放入项目src/...
VUE中使用MUI方法
12-08
若引入的mui.css报错,可能是mui中url会指向一些图片，将图片地址的单引号改为双引号就可以了。 3、第三步：引入MUI的样式 在main.js文件中，引入mui的样式 import ‘mui.css文件的相对路径‘; 如 import ‘../mui/...
vue里面使用mui的弹出日期选择插件实例
01-19
因为index.html这个页面是每个组件即.vue都会引用的，所以你如果在这里面引入太多js肯定会影响网页的加载速度的。 对于页面加载以后需要引入的js你可以使用上面的方式引入。注意这个comm是comm.js里面有个load它是...
Vue cli+mui 区域滚动的实例代码
08-28
在这篇文章中，我们将学习如何使用 Vue cli 和 mui 实现区域滚动的效果。下面，我们将详细介绍这个实例代码，并对其进行详细的分析。 首先，让我们来看一下这个实例代码的结构。该代码主要分为两部分：HTML 结构和 ...
mui结合vue使用
热门推荐
a8725585的博客
05-15 4万+
vue加载完加载mui,当用到plus时先加载完plus基座再初始化muivar t=new Vue({ el:'#app', data:{ tabledata:[], countdata:[], nowtime:'', }, mounted (){ //mui mui.plusR
Vue 引入 mui 组件
唐僧的专栏
05-27 7769
由于 我们发的项目 主要是在 移动设备上跑的，为了达到更好的体验 我们将使用 mui 来实现 更接近原生的体验 我在集成的时候遇到的坑 在这里和大家一起分享下 首先我创建了一个static 文件夹。这个文件夹是用在存在第三方库的一个文件夹。 然后我们引入 mui 组件 .js , 以及对应的 .css 应为我这边额外 需要 一个 dtpicker 组件所以我引入了 周边的 js ...
vue-cli 引入mui时，生成项目mui的字体无法显示
ysm19950927的博客
05-28 1694
vue-cli 引入mui时，生成项目mui的字体无法显示解决方法：1.使用vue-cli生成的项目，需要找到build文件下的util.js文件                2.添加publishPath：'../../'                成功时效果图：                ...
vue2.0引用mui组件
加菲猫的鳄鱼的博客
05-12 4418
在vue_cli中使用mui的UI插件，我们需要去mui官网下载文件https://github.com/dcloudio/mui 我们点击下载按键，把文件下载下来后，解压选择dist文件， 文件下载后我们就需要引入vue_cli中，我们打开vue项目的文件，我是放置在src/assets/mui,把dist的文件都放置进去 这三个文件分别是css、icon、js样式文件。我们在v...
vue项目使用mui
呔！妖怪
09-07 512
vue使用mui mui github 链接：https://github.com/dcloudio/mui ​ 下载mui后将起文件dist下的文件复制到vue项目static下新建mui文件目录 [外链图片转存失败(img-YBZaNh96-1567855539775)(img/1567855142774.png)] ​ 再main.js中 // // 引入mui组件 import m...
vue配合mui框架详细讲解 上拉加载demo，微信web开发者工具使用教程
2401_84093443的博客
04-04 250
在page方法里面获取当前页和每页几条，算出一共多少页，截取（slice）总数组的第二页的10条数据，拼接（concat）到当前数组后面，依次往后，上拉加载一页，就让当前页加1。pullupRefresh去调用methods的page方法，contentnomore: ‘没有更多数据了’,currentPage: 0, // 当前页。limit: 10, // 每页显示行数。totalPage: 0, // 总页数。源码：所有涉及的导入文件均需要自行下载。思路是：mui.init() 初始化。
mui与vue结合 功能网址
qq_31971935的博客
08-10 1万+
Vue.js的组件和框架PC与移动 iView elementUI MintUIelementUI PC官网 http://element.eleme.io/ MintUI 移动端 http://mint-ui.github.io/ iView 是一套基于 Vue.js 的 UI 组件库，主要服务于 PC 界面的中后台产品。https://www.iviewui.com/components
vuemui框架_vue-cli项目中使用mui，亲测可用
weixin_36296864的博客
12-30 343
先来一堆基础工作npm install vue-clivue init webpack xiangmumingchengcd xiangmumingchengnpm installnpm run dev查看本地vue版本，没有的话返回empty，全局的话加上-g，其他依赖的版本也是用这种方法。(其实这个跟本文没有多大联系，突然想把这个记下来而已)npm ls vuenpm ls vue -g拷贝m...
“微商城”项目（2准备工作）
qq_68383591的博客
05-29 1986
本项目使用Vue.js前端框架进行开发，在创建项目之前需要先下载Node.js环境。Node.js是一个基于Chrome V8引擎的JavaScript运行环境，它可以让JavaScript运行在服务器端。接下来对Node.js的下载和安装进行详细讲解。打开Node.js官方网站，找到Node.js下载地址，如下图所示。从上图可以看出，Node.js有LTS和Current两个版本，在这里选择LTS版本进行下载即可。
java-js知识库之十四——vue使用mui开发
这是个什么的博客
01-06 503
一、下载mui文件 mui下载地址 二、vue引入mui 2.1 文件迁入 mui-master下载完成后，将mui-master\dist\目录下的文件夹放入vue项目中 本人在src目录下新建了mui目录，将css、fonts和js三个文件夹放入在该目录下。 2.2 修改webpack.config.js 在rules数组下最后一项增加 |ttf ，因为引入的mui文件包含.ttf文件 t...
vue mui创建项目
最新发布
05-30
Vue MUI是一款基于Vue.js和MUI的移动端UI框架，使用它可以快速构建高质量的移动应用程序。 创建Vue MUI项目的步骤如下： 1. 安装Vue CLI 如果你还没有安装Vue CLI，可以通过npm全局安装，执行以下命令： ``` npm install -g @vue/cli ``` 2. 创建项目 在命令行中执行以下命令来创建Vue MUI项目： ``` vue create my-project ``` 在弹出的选项中，选择“Manually select features”，然后按空格键选中“Babel”、“Router”、“Vuex”、“CSS Pre-processors”、“Linter / Formatter”和“Mocha”等选项，接着按下回车键。 3. 安装Vue MUI 进入到项目目录中，执行以下命令来安装Vue MUI： ``` npm install vue-mui --save ``` 4. 引入Vue MUI 在main.js中引入Vue MUI： ```javascript import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' import VueMUI from 'vue-mui' Vue.use(VueMUI) new Vue({ router, store, render: h => h(App) }).$mount('#app') ``` 5. 使用Vue MUI组件 现在你可以使用Vue MUI提供的各种组件来构建移动应用程序了。例如，在template中添加以下代码： ```html <mui-button type="primary" @click="handleClick">Click Me</mui-button> ``` 在script中添加以下代码： ```javascript export default { methods: { handleClick() { console.log('button clicked!') } } } ``` 这就是用Vue MUI创建项目的基本步骤。祝你好运！
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值