最通俗易懂的ui组件,全部引入,按需引入,elementUi按需引入

用户7079239376116
834 阅读2分钟

初次发文, 主要和大家分享一下在项目中按需引入ui框架的组件,本文以 elementui 组件库为例, 技术比较简单,如果哪里写错了请大家及时指出,如果感觉本文还不错,可以顺手点个赞支持一下!

一、前提条件 (首先得有一个项目)

1.1、创建的项目,目录结构大概是这样的 image.png

二、安装elementUi

2.1、ui库都需要先下包大家应该都懂 npm i element-ui -S 2.2、直接在项目中使用会报错,这个大家要知道

image.png

三、使用

3.1、使用,不按需引入**

  • 3.1.1、 main.js 文件中加入 三行代码 即可使用

image.png

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
  • 3.1.2、 之后在任意组件都可以使用elementUi 的组件了

image.png

3.2、按需引入 ( 在实际工作一般都会进行按需引入 )

  • 3.2.1、按需引入和全部引入的区别在于打包后的体积 npm run build 之后可以看到全部引入后的 js 和 css 体积

image.png

  • 3.2.2、按需引入的具体步骤

    • 借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

      npm install babel-plugin-component -D

    • 在 babel.config.js 文件中添加相应配置（这里要注意的是element官方文档中写的是将 .babelrc 文件进行修改, 然而用 vue 搭建的项目中在 babel.config.js 文件中修改即可）

module.exports = {
  presets: [["@vue/cli-plugin-babel/preset", { modules: false }]],
  plugins: [
    [
      "component",
      {
        libraryName: "element-ui",
        styleLibraryName: "theme-chalk",
      },
    ],
  ],
};

image.png

  • 3.2.3、在 src 目录下新建 /element/index.js 文件用于书写我们需要引入的部分组件，详细目录参照[ 组件完整引入列表 ](组件 | Element)
// 导入自己需要的组件
import Vue from 'vue'
import { Button } from 'element-ui'
Vue.use( Button )
  • 3.2.4、最后在 main.js 文件中引入,就可以在浏览器中看到效果了
import './element/index'
  • 3.2.5、值得小伙伴注意的是按需导入遵循先入后使用的原则 如果在项目中出现了类似 2.2 中的报错 ，那肯定是使用了未导入的组件
  • 3.2.6、最后再执行 npm run build 命令就可以看到 打包后的js 和 css 文件明显变小了

image.png

本文到这里就结束了,有问题的小伙伴可以及时在评论区提出,如果本文对你有帮助,点个赞支持一下呗!

avatar
文章
阅读
粉丝