vue-cli3 使用mint-ui


關於vue-cli3.x按需引入mint-ui問題記錄:

按需引入
借助 babel-plugin-component,我們可以只引入需要的組件,以達到減小項目體積的目的。

首先,安裝 babel-plugin-component:

npm install babel-plugin-component -D
然后,將 babel.config.js修改為: module.exports = {
  presets: ["@vue/app"],
  plugins:[
      [
        "component",
        {
          "libraryName": "mint-ui",
          "style": true } ] ] };
如果你只希望引入部分組件,比如 Button 和 Cell,那么需要在 main.js 中寫入以下內容:

import Vue from 'vue'
import { Button, Cell } from 'mint-ui'
import App from './App.vue'

Vue.component(Button.name, Button)
Vue.component(Cell.name, Cell)
/* 或寫為
 * Vue.use(Button)
 * Vue.use(Cell)
 */

new Vue({
  el: '#app',
  components: { App }
})

參考文檔:

vue-cli3.x  https://cli.vuejs.org/config/#pluginoptions

mint-ui  http://mint-ui.github.io/docs/#/zh-cn2/quickstart


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM