按需要引入 Mint UI ,有两种情况:

  1. 引入全部组件

    如果项目会用到 Mint UI 里较多的组件,最简单的方法就是把它们全部引入。此时需要在入口文件 main.js 中:

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

  2. 按需引入

    如果你只需要使用某个组件,可以仅引入这个组件,Mint UI 能够保证在代码打包时,与这个组件无关的文件不会出现在最终代码里。比如需要引入 Button 组件,则在 main.js 中:

import Button from 'mint-ui/lib/button';
import 'mint-ui/lib/button/style.css';
Vue.component(Button.name, Button);

    上面两种引入方法都要单独引入相应的 CSS 文件。这很不方便,尤其当你使用按需引入的方法引入多个组件时。

1. 使用插件, 首先当然是安装它:

 cnpm i babel-plugin-component -D

 2. 然后在 .babelrc 中配置它:

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime",
    [
      "component",
      [
        {
          "libraryName": "mint-ui",
          "style": true
        }
      ]
    ]
  ]
}

 3. 这样上述两种引入方法就可以简化为:

复制代码

//import Mint from 'mint-ui';
//Vue.use(Mint);
//import 'mint-ui/lib/style.css';    //不需要手动导入mint-ui样式
import Button from 'mint-ui/lib/button';
Vue.component(Button.name, Button);

import { Swipe, SwipeItem } from 'mint-ui';   //按需引入部分组件
Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);

复制代码

    前面安装的插件会自动引入相应的 CSS 文件!

参考:在vue项目中安装使用Mint-UI

官方参考:https://mint-ui.github.io/docs/#/en2/quickstart

Element-ui按需引入

element UI组件的单独使用(第一种方法):
    1、cnpm install babel-plugin-component -D    
    2、找到.babelrc 配置文件
        plugins改为: 

  {
          "plugins": [
            [
              "component",
              {
            "libraryName": "element-ui",
            "styleLibraryName": "theme-chalk"
              }
            ]
          ]
        }

    3、
    import { Button, Select } from 'element-ui';

    Vue.use(Button)
    Vue.use(Select)


element UI组件的单独使用(第二种方法):

    import { Button, Select } from 'element-ui';

    Vue.use(Button)
    Vue.use(Select)

    引入对应的css

import 'element-ui/lib/theme-chalk/index.css';

同时引入两种ui库(思路)

1.采用单独的样式,手动引入控件

2.名字相同的控件起个别名

//引入element-ui的Button控件
import {Button} from 'element-ui';
import 'element-ui/lib/theme-chalk/button.css';

Vue.use(Button);

//引入mint-ui的Actionsheet控件,Actionsheet里面用到了Button
import {Actionsheet} from 'mint-ui';
//名字相同的控件起个别名,这里用MyButton代表mint-ui的Button
import MyButton from 'mint-ui/lib/button';
import 'mint-ui/lib/actionsheet/style.css'
import 'mint-ui/lib/button/style.css'

Vue.component(Actionsheet.name, Actionsheet);
Vue.component(MyButton.name, MyButton);

使用mint-ui的ActionSheet:

<mt-button @click.native="sheetVisible = true" size="large">点击上拉 action sheet</mt-button>
    <mt-actionsheet :actions="actions" v-model="sheetVisible"></mt-actionsheet>

使用element-ui的Button:

<el-button type="success">成功按钮</el-button>

 

Logo

前往低代码交流专区

更多推荐