vue使用mint-ui

最新推荐文章于 2025-08-15 09:01:53 发布

weixin_34146986

最新推荐文章于 2025-08-15 09:01:53 发布

阅读量121

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ui ViewUI

原文链接：https://segmentfault.com/a/1190000010426793

本文档介绍了如何使用 npm 安装 Mint UI，并提供了两种引入方式：整体引入和按需加载组件。通过 babel-plugin-component 插件可以方便地实现组件的按需加载并自动引入 CSS 文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

installation

npm i mint-ui -S
 
# for Vue 1.x 
npm i mint-ui@1 -S

Usage

Import all components.

import Vue from 'vue';
import Mint from 'mint-ui';
import 'mint-ui/lib/style.css';
 
Vue.use(Mint);

Or import specified component. (Use babel-plugin-component)

  import { Cell, Checklist } from 'mint-ui';
     
    Vue.component(Cell.name, Cell);
    Vue.component(Checklist.name, Checklist);

Equals to

import Vue from 'vue';
import Mint from 'mint-ui';
import 'mint-ui/lib/style.css';
 
Vue.use(Mint);
 
// import specified component 
 
import Popup from 'mint-ui/lib/popup';
import 'mint-ui/lib/radio/style.css';
 
Vue.component("mt-popup", Popup);

babel-plugin-component
Auto import css file ,Modular import component

Installation
npm i babel-plugin-component -D

Usage

.babelrc

{
  "plugins": ["other-plugin", ["component", [
    { "libraryName": "mint-ui", "style": true }
  ]]]
}

popup.vue

<mt-popup
  v-model="popupVisible"
  position="bottom">
  ...
</mt-popup>
//其中popupVisible绑定在vue组件data里面，用来控制popup的显示与关闭。
//position 属性指定了 popup 的位置。比如，position 为 'bottom' 时，popup 会从屏幕下方移入，并最终固定在屏幕下方。移入/移出的动效会根据 position 的不同而自动改变，无需手动配置。

mint-ui开发文档