有必要。

1、elementui框架有必缓余要去学习谈核，使用方便，一次引入后就能够直接使用所有样式。

2、组件操作几乎都有动画效果，组件较为丰富。

3、简化了常用组件的封装，扰侍滚提高了可复用性的原则。

1：npm 安装

推荐使用 npm 的方式安装，它能更好地和  webpack  打包工具配合使用。

npm i element-ui -S，

2：引入 Element

你可以引入整个 Element，或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Element。

2.1完整引入

在 main.js 中写入以下内容：

import Vue from 'vue'

import App from './App.vue'

import ElementUI from 'element-ui';//全局引入

import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false

//Vue.use(ElementUI)

Vue.use(Button)

Vue.use(Aside)

Vue.use(Main)

Vue.use(Container)

new Vue({

  render: h = h(App),

}).$mount('#app')

2.2按需引入

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

首先，安装 babel-plugin-component：

在命令行输入

npm install babel-plugin-component -D

然后，将 .babelrc 修改为：//等同于 babel.config.js文件

module.exports = {

  presets: [

 镇简   '@vue/cli-plugin-babel/preset',

    ["@babel/preset-env", { "modules": false }]

  ],

  "plugins": [

    [

      "component",

      {

        "libraryName": "element-ui",

        "styleLibraryName": "theme-chalk"

      }

    ]

  ]

}

2.2.1在main.js配置

import Vue from 'vue'

import App from './App.vue'

 import {Button,Aside,Main,Container} from 'element-ui';//按需引入 注：Container首字母大写

import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false

//Vue.use(ElementUI)

Vue.use(Button)

Vue.use(Aside)

Vue.use(Main)

Vue.use(Container)

new Vue({

  render: h = h(App),

}).$mount('#app')

小菜刚学会element_ui组件使用，如何全局引入库文件太大，开发时浪费资源，御纳裤希望大神们多指教

1.什么是elementUI?

ElementUI是饿了么前端团队推出的一款基于Vue的桌面端UI框架

大白话: 和Bootstrap一样对原生的HTML标签进行了封装, 进行了美化, 让我们能够专注于业务逻辑而不是UI界面

2.elementUI使用

3.elementUI优化

默认情况下无论我们有没有使用到某个组件, 在打包的时候都会将elementUI中所有的组件打包到我们的项目中

这样就导致了我们的项目体积比较大, 用户访问比较慢

4.如何优化

为了解决这个问题, elementUI推出了按需导入, 按需打包. 也就是只会将我们用到的组件打包了我们的项目中

没有用到的组件不会被打包

1.什么是MintUI?

MintUI是饿了么前端团队推出的一款基于Vue的移动端U框架

大白话:和Bootstrap一样对原生的HTML标签进行了封装喊睁，让我们亩腊能够专注于业务逻辑而不是UI界面

2.mintUI使用

3.注意点: MintUI和ElementUI的第一个不郑耐岁同, 就是在MintUI中需要通过Vue.component来告诉Vue我们需要使用

1.什么是Vant?

在使用MintUI的过程中发现有很多的坑，所以个人不推荐在移动端中选择MintUIXant是有赞前端开发团队又推出的一款 基于Vue的移动端UI框架

大白话:和Bootstrap一样对原生的HTML标签进行了封装，进行了美化，让我们能够专注于业务逻辑而不是UI界面

Vue.use只能use插件，不能use组件

那么如何将一个组件封装成一个插件呢？

1.Vue.use()做了什么事情?

Vue.use的作用是注册一个Vue插件(注册组件), Vue.use必须在new Vue之前使用

2.什么时候需要定义插件?

当某一个组件或者功能经常需要被使用到时, 我们就可以将这个组件或者功能定义成一个插件

例如: 网络加载指示器

3.如果自定义一个插件?

不需要，Vue3作为一个前端框架，本身就具备强陆猛大的组件库源悉乎雹悉，可以让开发者实现UI的组件化，而ElementUI作为UI库，实现更加精细的UI细节，而不是核心的开发框架。

本文转载自互联网，旨在分享有价值的内容，文章如有侵权请联系删除，部分文章如未署名作者来源请联系我们及时备注，感谢您的支持。

转载请注明本文地址：https://www.shouxicto.com/article/126468.html