elementui的作用(element ui干嘛的)

elementui有必要去学习吗

有必要。

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

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

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

Element UI 基本使用

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组件使用,如何全局引入库文件太大,开发时浪费资源,御纳裤希望大神们多指教

elementui的作用(element ui干嘛的)  第1张

Vue项目 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还需要elementui吗

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

以上内容为新媒号(sinv.com.cn)为大家提供!新媒号,坚持更新大家所需的前端知识。希望您喜欢!

版权申明:新媒号所有作品(图文、音视频)均由用户自行上传分享,仅供网友学习交流,不声明或保证其内容的正确性,如发现本站有涉嫌抄袭侵权/违法违规的内容。请发送邮件至 k2#88.com(替换@) 举报,一经查实,本站将立刻删除。

(0)
上一篇 2023-09-23 12:48
下一篇 2023-09-23 12:48

相关推荐

发表回复

登录后才能评论