vue的ui組件的按需導入和自定義主題

按需導入

現在的開發如果注重視效就需要手寫組件樣式，如果是注重功能多一些的話就會通過用一些ui庫來幫助完成項目，大大減少開發周期，偶爾一些特殊的需求通過二次分裝組件來完成開發，在使用第三方ui組件的時候有些組件我們根本就不到，如果全部引入，項目體積就會很大，下面說下我的開發過程

如果不想手動的按需導入的還也可以通過vue ui這個可視化面板來完成。在可視化面板中當你安裝一個ui庫的成功之后會有一個提示

 

它默認是全部導入的，選擇important on demand這個選項就會配置相關的文件，之后你的項目中src文件夾下面多一個叫plugins的文件夾

里面的js文件就是你要按需導入的組件了  就和button的格式一樣   》》》》》》》》》》》》如果當你遇到不alert之類的組件的時候。j建議把他綁定在vue的原型上

 

首先創建項目 （我的vue/cli 4.0）  然后npm install 自己使用的ui庫  我們以餓了么（element ui）為例 官方也給出了相關的按需導入的操作方法（https://element.eleme.cn/#/zh-CN/component/quickstart）  

在我們沒有按需引入之前 打包的時候就會把element整個文件打包到項目中去  。如何我們想要按需引入就只能手動的去找對應組件的路徑才能按需引入

這個會很麻煩每一個組件你都要去引入對應的js和css 很影響效率

我們借助插件來幫我們完成工作 babel-plugin-component

npm install babel-plugin-component -D

然后在babel.config.js，添加一個配置

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

如果沒有按需引入功能的組件不能按需引入

咱們按需引入的組件只是用了import { button } from 'element-ui'   但是element 中在  export defaule { button } 的時候引入了

import Button from 'element-ui/lib/button.js'

import 'element-ui/lib/theme-chalk/button.css'

 

 

自定義主題