初识vue（6）—— Mint UI 的完全引入和按需引入

超、凢脫俗 2022-12-19 13:24 134阅读 0赞

###### Mint UI 是基于 Vue.js 的移动端组件库，包含丰富的 CSS 和 JS 组件，能够满足日常的移动端开发需要。 ######

###### 关于如何安装 vue 脚手架项目，请看我的博客 [初识vue（2）——如何搭建脚手架项目][vue_2] ######

#### 先安装 Mint UI ####

npm install --save mint-ui

#### 一、完全引入 ####

**在 main.js 文件中写：**

import Vue from 'vue'
    import MintUI from 'mint-ui'
    import 'mint-ui/lib/style.css'
    import App from './App.vue'
    
    Vue.use(MintUI)
    
    new Vue({ 
      el: '#app',
      components:{ 
        App
      },
      template:'<App/>'
    })

**在 App.vue 中写：**

<template>
      <div>
        <mt-button type="default" size="large">default</mt-button>
        <mt-button type="primary" size="large">primary</mt-button>
        <mt-button type="danger" size="large">danger</mt-button>
      </div>
    </template>
    
    <script>
    export default { 
      
    }
    </script>
    
    <style>
    
    </style>

**运行效果如下图所示：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center]

#### 二、按需引入 ####

##### 1. 安装 babel-plugin-component： #####

npm install --save-dev babel-plugin-component

##### 2. 将 .babelrc 文件中的 plugins 修改为： #####

"plugins": ["transform-vue-jsx", "transform-runtime",["component", [
        { 
          "libraryName": "mint-ui",
          "style": true
        }
      ]]]

##### 3. 在 main.js 文件中写： #####

import Vue from 'vue'
    import {  Button} from 'mint-ui'
    import App from './App.vue'
    
    Vue.component(Button.name, Button)
    /* 或写为 * Vue.use(Button) */
    
    new Vue({ 
      el: '#app',
      components:{ 
        App
      },
      template:'<App/>'
    })

##### 4. 在 App.vue 中写： #####

<template>
      <div>
        <mt-button type="primary" size="large" @click.native="handleClick">primary</mt-button>
      </div>
    </template>
    
    <script>
    import {  Toast } from 'mint-ui'
    export default { 
      methods:{ 
        handleClick(){ 
          Toast('提示信息')
        }
      }
    }
    </script>
    
    <style>
    
    </style>

##### 5. 运行结果如下图所示： #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 1]

[vue_2]: https://blog.csdn.net/qq_43652492/article/details/105471691
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/fedf5d0f7b41403ea93d700447d2c274.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20201110090628826.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky,size_16,color_FFFFFF,t_70#pic_center