乐趣区

使用-mintui-开发手机移动端-switch-等组件采坑记录

需求

需要使用 mint-ui switch 等组件

引入 mint-ui,但是不想全部引用,按需引入

官方文档之快速入手篇

记录下爬坑之旅:


1.npm intall mint-ui  --save  

2.npm install babel-plugin-component  // 需要安装这个插件

3. 修改 babel.config.js 文件

module.exports = {
  presets: ['@vue/app'],
  plugins:[
      [
        "component",
        {
          "libraryName": "mint-ui",
          "style": true
        }
      ]
  ]
}

如果已经有值,在后面追加配置即可

module.exports = {
  presets: ['@vue/app'],
  plugins: [
    "transform-vue-jsx",
    "transform-runtime",
    ["component", [
      {
        "libraryName":"mint-ui",
        "style":true
      }
      ]
    ]
  ]
}

4. 在 main.js 中添加 引入组件的配置

需要什么组件,去 mint-ui,src 下面的 index.js 中找,默认会找这个文件,
看导出哪些组件名,需要就拿过来用

import {Switch, Range} from 'mint-ui' 
import 'mint-ui/lib/style.css'

Vue.component(Switch.name, Switch)
Vue.component(Range.name, Range)     //Vue.use 不行,抛弃

成功大吉!

顺便记录下全部引入

1.npm intall mint-ui  --save  

2. 在 main.js 中添加值

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

最后呈现的样子

//main.js

import {Switch} from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(Switch)
Vue.component(Switch.name, Switch)


// vue 文件中
<template>
  <div id="app">
        <mt-switch v-model="value" @change="turn">Switch</mt-switch>
  </div>
</template>

不需要再 import switch 组件,也不需要在 component 中注册了,在 main.js 中已经做了

参考

  1. https://www.cnblogs.com/holdo…
  2. http://www.pianshen.com/artic…
  3. https://blog.csdn.net/qq_4248…

注意点

部分引入使用 Vue.use 不行,but don’t know why

退出移动版