vue2.0之Mint-UI配置填坑

最新推荐文章于 2021-02-22 16:08:11 发布
VIP文章 最新推荐文章于 2021-02-22 16:08:11 发布
阅读量1w 收藏 6
点赞数 1
分类专栏： Vue Mint UI 文章标签： Vue Mint UI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qwezxc24680/article/details/78179283
版权

Vue项目搞了这么久，也差不多得给界面换换衣服，看起来专业一点。

网上搜了搜，选择了比较流行的饿了么出品的针对移动端的mint-ui，若是PC端可以用更全面的element-ui，这里就不多做介绍了。


起初以为看看文档就能直接上手用的东西愣是花了接近一天的功夫才跑起来，只能说文档在初始化引导方面还是存在缺陷，

像我这样的新手小白很可能就掉进坑里爬不起来。


首先按照使用文档一步步来：

1、npm安装

npm i mint-ui -S
2、引入Mint UI

这里有两种方式：完整引入or按需引入部分组件。

一：完整引入


                

        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  qwezxc24680
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    1
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    6
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                  6
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
vue中配置mint-ui报css错误问题的解决方法

				
			

			

				

					11-28
				

			

		

		

			
				
在vue2.0中引入了mint-ui后总是报一个css的错误 


但是package.json中已经配置了css-loader style-loader ，webpack.config中也已经配置了css，还是报这个错误，相反，如果把webpack.config中css的配置注释掉就不会出错，这是为什么呢？ 

因为 在webpack.config中没有设置好css引入的目录，因为默认情况下我们只会引入/src/目录下的css， 但是mint-ui是要冲node_modules目录去引入的，所以在webpack.config中css的配置中加入一项

{
    test: /\.css$/

			
		

	



                

              
                



	

		

			

				
					
Vue移动端UI框架

				
			

			

				

					u013573560的博客
				

				

					05-20
					
					3002
					
				

			

		

		

			
				
1. Vant UI

官网地址:https://youzan.github.io/vant/#/zh-CN/intro

简介：有赞公司开发的。

优点：社区活跃，有 50 多个个组件，80%多的单元测试覆盖率，完善的文档和示例,支持 babel-plugin-import,支持 TypeScript,支持 SSR。

同时它的默认主题适合做一些商城三级页面的开发，也支持开发者自定义主题。

2. Mint UI

官网地址:mint-ui.github.io/#!/zh-cn

简介： 饿了么公司基于v

			
		

	



                


  
              

                


	

		

			

				
					
【Vue2.0】mint-ui解决datetime-picker穿透滚动问题

				
			

			

				

					qq_26780317的博客
				

				

					09-15
					
					534
					
				

			

		

		

			
				
背景：在移动端开发中，使用了mint-ui组件库，其中，使用组件popup组件和datetime-picker组件存在滚动性穿透问题。

一、问题原因

HTML5触摸事件touchmove事件：当手指在屏幕上滑动的时候会连续触发；
	所以，当激发出组件popup组件和datetime-picker的弹出层时，我们在弹出层选择内容时，上下连续滑动是会触发该事件的。
二、解决思路

在弹出层出现之后阻止body的touchmove事件，在弹出层消失之后，移除阻止事件。
三、例外

   然而，Date...

			
		

	





	

		

			

				
					
vue用npm安装删除模块element-ui mint-ui

				
			

			

				

					weixin_30477797的博客
				

				

					01-18
					
					1806
					
				

			

		

		

			
				
vue用npm安装删除模块element-ui mint-ui
在vue项目中先引入了element-ui，后来发现移动版的需要用mint-ui，所以需要先卸载了再安装。卸载element-ui：npm uninstall element-ui
然后再安装mint-ui：npm i mint-ui -S详细文档请查看：ElemeFE/mint-ui: Mobile UI elements fo...

			
		

	



		

			
		



	

		

			

				
					
Vue2.0项目安装Mint-UI - cmd篇

				
			

			

				

					草巾冒小子的博客
				

				

					02-01
					
					1395
					
				

			

		

		

			
				
Vue2.0项目如何安装引入Mint-UI？

这里讲一下如何通过cmd指令安装mint-ui到vue2.0项目。


步骤说明：


和以前一样，先cd到项目根目录


然后cmd：npm i mint-ui -S （即： npm install mint-ui -save）


等待安装完成即可。



查看相关文章：百度经验 · 图文教程



以上就是关于“ Vue2.0项目安装Mint-...

			
		

	





	

		

			

				
					
mint-ui在vue中的使用。

				
			

			

				

					weixin_30879169的博客
				

				

					04-04
					
					947
					
				

			

		

		

			
				
首先放上mint-ui中文文档
近来在使用mint-ui，发现部分插件在讲解上并不是很详细，部分实例找不到使用的代码。github上面的分享，里面都是markdown文件，内容就是网上的文档
刚好自己在用，网上能找到的资料也不是很详细，自己写写咯。持续更新...emmmmm，应该可以吧，我这么懒。希望能给别人带来帮助。
介绍一下mint-ui的特性
特性介绍

Mint UI 包含丰富的...

			
		

	





	

		

			

				
					
详解Vue2.0配置mint-ui踩过的那些坑

				
			

			

				

					08-27
				

			

		

		

			
				
主要介绍了详解Vue2.0配置mint-ui踩过的那些坑，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

			
		

	





	

		

			

				
					
vue2.0+mintUI 实现的微信公众号投票系统前端代码

				
			

			

				

					03-11
				

			

		

		

			
				
vue2.0+mintUI 实现的微信公众号投票系统前端框架代码，可使用模拟数据测试。 npm install 安装，npm run dev 启动 调试端口8087

			
		

	





	

		

			

				
					
vue2.0-taopiaopiao-master.zip

				
			

			

				

					01-07
				

			

		

		

			
				
vue2.0与express构建淘票票页面  描述  写这个项目的目的一是为了学习vue2.0相关的知识点，二是为了给他想要了解vue2.0的童鞋提供一个学习demo。所以为了使这个项目更加完整，项目中加入一个server服务，模拟服务器...

			
		

	





	

		

			

				
					
分享几个实用的国内可访问Vue ui库

				
			

			

				

					wo240的专栏
				

				

					02-22
					
					457
					
				

			

		

		

			
				
前言：

Vue的ui库众多，大多的UI库都由国外小组开发制作，故访问外国官网龟速，笔者介绍几个国内能正常访问的库。



H5端：

1.Vant

轻量、可靠的移动端 Vue 组件库,色彩丰富，组件居多，更重要的是可搭配Uni-app运行到Android，Ios，微信小程序，以及H5上，适配性极强。

官网：https://youzan.github.io/vant/#/zh-CN/intro

2.Wux weapp

Wux Weapp是一套组件化、可复用、易扩展的微信小程序 UI 组件库。 样式.

			
		

	





	

		

			

				
					
基于vue20vcliaxiosvueroutermintui开发的商城项目

				
			

			

				

					08-12
				

			

		

		

			
				
基于vue2.0 v-cli axios vue-router mint-ui开发的商城项目

			
		

	





	

		

			

				
					
Vue.js 学习11 Mint UI基于Vue2.0的组件库

				
			

			

				

					编程圈子-谢厂节的博客
				

				

					06-03
					
					2300
					
				

			

		

		

			
				
官网  
http://mint-ui.github.io/#!/zh-cn安装npm install -g vue-cli
vue init webpack projectname修改main.jsimport Vue from 'vue'
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
import App from './

			
		

	





	

		

			

				
					
VUE2 配合mint-ui实现  自定义 loadmore(下拉刷新，上拉更多)

				
			

			

				

					weixin_40222803的博客
				

				

					02-16
					
					2079
					
				

			

		

		

			
				
<template>
  <div class="page-loadmore">
    <h1 class="page-title">Pull up</h1>
    <p class="page-loadmore-desc">在列表底部, 按住 - 上拉 - 释放可以获取更多数据</p&amp

			
		

	





	

		

			

				
					
 基于Vue2全家桶的移动端AppDEMO实现

				
			

			

				

					weixin_33906657的博客
				

				

					01-25
					
					457
					
				

			

		

		

			
				
好久没更新过Vue的小文章，上次做了一个基于Vue+Mint-ui的移动端AppDemo,集成了推送功能，然后通过cordova打包生成apk，移动端表现还不错，今天把这个小东西分享出来，希望有更多的小伙伴能够用Vue去做一些有意思的东西，本人才疏学浅，有说的不对的地方，还请大家多多指教。下面按照惯例放上demo地址和源码地址,希望大家能...

			
		

	





	

		

			

				
					
vue mint-ui 使用手册

					
热门推荐

				
			

			

				

					dkh_321的博客
				

				

					09-28
					
					3万+
					
				

			

		

		

			
				
npm 安装

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。
npm i mint-ui -S


CDN

目前可以通过 unpkg.com/mint-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。
link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/

			
		

	





	

		

			

				
					
vue mint-ui 项目常见报错问题与解决方法

				
			

			

				

					Wu_shuxuan的博客
				

				

					06-18
					
					9267
					
				

			

		

		

			
				
Use




npm install -g vue-cli

vue init webpack projectname


测试时 ：



npm run dev

打包时 ： 



npm run build



Notice

1 .  加上scoped说明该css只在该组件中生效。

<style scoped>
...
<style&amp

			
		

	





	

		

			

				
					
搭建VueMint-ui框架

				
			

			

				

					ChePQ的博客
				

				

					01-07
					
					6011
					
				

			

		

		

			
				
vueweb
  vue project
检查项目环境一、检查是否安装node.js# 检查node版本
$ node -v
# 如未安装
$ brew install node 
# 或者 
$ npm install node
二、安装vue.js环境
# 全局安装 vue-cli
$ npm install --global vue-cli
三、创建vue项目# 创建一个基于 webpack

			
		

	





	

		

			

				
					
Vue+vuex+vue-router+sass+webpack+mint-ui 全家桶 开发商城（购物车）

				
			

			

				

					麻球科技
				

				

					03-02
					
					4165
					
				

			

		

		

			
				
先上截图，项目跑起来就是这个样子，是不是符合你的购物车？哈哈哈哈哈哈哈，我就知道购物车实现的功能：添加购物车、选择某商家下所有商品、选择指定商品、更新指定商品数量(加减)、删除指定商品、全选商品、清空购物车，等功能；准备工作：使用Vue全家桶（vue2.0+vue-router+vuex+webpack+sass+mint-ui），由于都是静态数据，就没有使用axios;注：通常使用npm安装会出...

			
		

	





	

		

			

				
					
Vue2.0 + Element-ui2+axios实现分页 

					
最新发布

				
			

			

				

					05-14
				

			

		

		

			
				
1. 在Vue的data中定义一个数组，用于存放分页数据。 2. 在mounted函数中发起请求获取数据，并将数据存放到定义的数组中。 3. 在页面上使用Element-ui的Table组件展示数据，并且使用Pagination组件实现分页功能。 4. ...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		
评论 6

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值