使用 mint-ui 開發手機移動端 switch 等組件採坑記錄

需求

須要使用 mint-ui switch 等組件

引入mint-ui，可是不想所有引用，按需引入

官方文檔之快速入手篇

記錄下爬坑之旅：

1.npm install 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>

//methods
turn 事件，會自動改變 this.value 
不須要對this.value = ! this.value

不須要再 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