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'

 

 

自定义主题