组件库和使用流程

是冠希呀~

已于 2022-05-23 00:03:52 修改

阅读量285

点赞数

文章标签：其他前端

于 2022-05-23 00:03:05 首次发布

本文链接：https://blog.csdn.net/javascript_was/article/details/124919093

版权

本文介绍了如何选择和使用Vue组件库，重点讲解了ElementUI的引入和使用步骤，包括通过vue-cli创建项目、安装ElementUI、在main.js中注册以及使用组件。同时，文章强调了组件库的选择应考虑项目需求，学习组件库的基本方法是查阅官方文档，并在遇到问题时寻求社区支持。

摘要由CSDN通过智能技术生成

了解常见组件库及使用流程

目标

了解一些常见的Vue组件库

前端项目分类

移动端（h5页，小程序）

PC端

常见的vue技术栈组件库

移动端（Vant, Cube-UI, NutUI ）
PC端（ element-ui, Ant Design of Vue, iView）
小程序: uniapp

组件库的基本使用流程

根据项目的实际情况，进行技术选型：用什么技术栈，用什么组件库</

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

是冠希呀~

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

elementUI 组件库及使用流程

qq_43944285的博客

05-16

903

组件库的使用

最新发布

小熊软糖的博客

07-28

1400

important;}

1 条评论您还未登录，请先登录后发表或查看评论

了解常用的组件库和使用的方法

userlvlu的博客

11-03

744

前端项目分类移动端（h5页，小程序） PC端常见的vue技术栈组件库移动端（Vant, Cube-UI, NutUI ） PC端（ element-ui, Ant Design of Vue, iView）小程序: uniapp 组件库的使用根据项目的实际使用的情况进行技术选择用什么技术栈, 用什么组件库根据对应的组件库去对应的官网查文档例如element组件库是一个第三方开原的组件库使用方法是先创建一个项目 vue create 要创建的文件的名字创..

UI组件库的使用以及组建

y_programmer_ape的博客

06-10

1272

UI组件库傻瓜式使用方法 1.导入资源文件，css文件和js文件 2.对比官网，知道每个类名是什么作用 3.需要什么找什么当UI组件库的样式不能完全满足需求的时候： 1.没有样式：自己写 2.有样式，只能满足一部分，自己修改 2.1找到内部到底是哪一个类名的样式 2.2自己写一个选择用权重，覆盖样式 2.3不到万不得已不要改源码 3.bootstrap里的样式不是全部清空，是按需清空 4.bootstrap栅格系统默认将每一个容器等分为12份 col-xx 区分显示器

组件的使用方法

weixin_34087301的博客

07-03

701

组件分为全局注册与局部注册全局注册 (不常用) 优点: 所有vue实例都可以使用缺点: 权限太大容错率降低 <body> <div id="demo"> <my-component></my-conponent> </div> </body> <script&g...

开发组件库使用到的知识点

qq_41206257的博客

12-17

243

1.require.context: 一个webpack的api，通过执行require.context函数获取特定上下文。主要用来实现自动化导入模块。接受的参数 a.路径：stringb.是否遍历子目录:boolean c.regExp:匹配文件的正则 important Vue from 'vue' const componentFiles = require.contex...

Vue cli3 库模式搭建组件库并发布到 npm的流程

10-17

### Vue CLI 3 库模式搭建组件库并发布到 npm 的流程详解 #### 一、技术栈概述在本文档中，我们将详细介绍如何利用 Vue CLI 3 的库模式来搭建一个自定义的颜色选择器组件库，并将其发布到 npm 仓库。此过程涉及到...

flowie：用于创建和使用流程的库

02-04

Flowie 是一个基于 TypeScript 的库，专为创建和操作流程设计。它支持流程解析（Flow Parsing）、数据提取、转换和加载（ETL）以及基于流的编程范式。Flow-based Programming（FBP）是一种编程模型，它将程序设计...

从0开始搭建个人组件库站点（全流程）

gaiery的博客

03-10

3011

一、简述在前端开发工作中，我们最常用到的UI组件库有elementui、ngzorro等等，这些组件库的特点是易学好用，但是基于公司的业务实际需要，总有不能完全满足需求的场景，那如果我们能够自己写一套UI组件库，不仅仅是日常工作的积累，能够满足工作需要，还能提高自己的技术水平。在慕课网学了一遍玩转组件库搭建全流程的教程之后，将搭建过程记录一下，以便于后期站点的开发、更新和维护。内容较多，耐心一点，按照步骤搭建，相信会有收获。

1-element-ui创建项目

chencaw的专栏

05-11

1164

1、element-ui创建项目 vue create chenelementdemo 2、测试是否安装好 npm run serve

Element UI（桌面组件库）之三大灵魂拷问

四季轮换叶，一路招摇胜

03-11

3090

1. 什么是ElementUI 概述 Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 ElementUI是基于Vue 2.0的 ElementUI提供一组组件 ElementUI提供组件的参考实例,直接复制 element-ui是饿了么团队开发的基于mvvm的vue开源出来的一套前端ui框架。官方网站： https://element.eleme.cn/#/zh-CN/component/installa...

html5组件库,资源 | 10套好用的前端框架、设计组件库推荐

weixin_29887021的博客

06-24

6547

No.1 Ant Design UI 框架解析：蚂蚁金服出品，基于 ReactJS。一个服务于企业级产品的设计体系，支持桌面端、手机端。基于『确定』和『自然』的设计价值观，通过模块化的解决方案，让设计者专注于更好的用户体验。No.2 Element UI 框架解析：饿了么出品，基于 VueJS、React、Angular。一套为开发者、设计师和产品经理准备的桌面端组件库。No.3 Boo...

深入解析为什么要用前端组件库，如何用好前端组件库

大海

02-16

3219

先简单自我介绍一下吧，我用的框架是angular，基于angular框架，移动端组件库用的是ionic,桌面端组件库用的是ng-zorro-antd. 我用这两个组件库大概一年半左右，下面谈一下我对组件库的认识，供大家在是否要使用组件库，如何使用组件库，如何修改组件库方面提供一些参考。为什么要使用组件库？ 1、为了一个项目有统一的主题（颜色），外观，和操作体验。一般来说一个项目由一个团队开...

为什么要做组件库？

阿嚏乱码的地方

06-06

1182

1.背景介绍前端组件化，这是一个概念，也是一种技术。那么为什么要实现前端组件化？ 2.知识剖析 2.1、传统开发方式效率低以及维护成本高的主要原因在于很多时候是将一个系统做成了整块应用，而且往往随着业务的增长或者变更，系统的复杂度会呈现指数级的增长，经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改，造成牵一发而动全身。 2.2、针对此弊端，其实业界...

React+antd组件库使用方法

weixin_57935165的博客

02-04

8144

首先介绍一下antd组件库 antd组件库是蚂蚁集团的企业级产品是一个庞大且复杂的系统，数量多且功能复杂，而且变动和并发频繁，常常需要设计者与开发者能快速做出响应。同时这类产品中有存在很多类似的页面以及组件，可以通过抽象得到一些稳定且高复用性的内容。随着商业化的趋势，越来越多的企业级产品对更好的用户体验有了进一步的要求。带着这样的一个终极目标，我们（蚂蚁集团体验技术部）经过大量项目实践和总结，逐步打磨出一个服务于企业级产品的设计体系 —— Ant Design。基于「自然」、「确定性」、「意义感」、「

前端学习（2387）：组件库使用说明

歌谣的博客

10-08

281

main.js import Vue from 'vue' import App from './App.vue' import router from './router' import './styles/index.less' // 加载组件库 import ElementUI from 'element-ui' // 加载样式 import 'element-ui/lib/theme-chalk/index.css' Vue.config.productionTip = false // 注..

合格前端系列第十弹-揭秘组件库一二事

weixin_33781606的博客

03-17

328

一、写在前面 1、灵感来源我平常比较喜欢对一些东西做一些记录和总结，其中包括一些组件，积累的量比较多的时候，发现零散的堆积已经不太适合进行管理了。于是我开始思考，有什么好的办法可以比较规范地来管理这些比较零散的东西呢？如果以组件库这种形式来对组件进行管理的话，会不会更适合自己的积累并方便以后的工作呢？于是我开始参考市场上一些优秀的 UI 组件库，比如 element-ui、vux、 vant...

如何优雅的使用Vant组件库

weixin_43021174的博客

12-06

7995

安装Vant npm i vant -S 引入Vant的第一种方法：导入所有组件（不推荐）在src/main.js进行全局引入。 import Vant from 'vant'; import 'vant/lib/index.css'; Vue.use(Vant); 引入Vant的第二种方法：使用 babel-plugin-import (推荐) 它会在编译过程中将 import 的写法...

vant组件库的使用流程及浏览器适配方式

04-07

Vant组件库使用流程： 1. 安装Vant组件库通过npm安装Vant组件库： ``` npm install vant --save ``` 2. 引入Vant组件库在需要使用Vant组件的页面中引入Vant组件库： ``` import Vue from 'vue'; import Vant from 'vant'; import 'vant/lib/index.css'; Vue.use(Vant); ``` 3. 使用Vant组件在页面中使用Vant组件： ``` <template> <van-button>按钮</van-button> </template> ``` 浏览器适配方式： Vant组件库支持大部分现代浏览器，具体支持情况可查看官方文档。对于不支持的浏览器，可以通过polyfill来实现兼容。在项目中引入babel-polyfill即可： ``` import 'babel-polyfill'; ```