Vue2.0 Vue组件库
Vue2里的最后一章
yarn官方首页
ant design
ant design for vue
Vue UI组件库
移动端常用的UI组件库
1.Vant:Vant - 轻量、可靠的移动端组件库 (youzan.github.io)
2.Cube UI:cube-ui Document (didi.github.io)
3.Minit UI:Mint UI (mint-ui.github.io)
PC端常用UI组件库
1.Element UI:Element - 网站快速成型工具
2.IView UI:iView - A high quality UI Toolkit based on Vue.js
所谓的UI组件库就是给我们提供了一些常用的布局、按钮、输入框、下拉框等等这些网页UI布局里面常用的元素,并且把这些元素以组件的形式提供给我们,我们只需要用它提供的组件,然后你就会发现结构啊样式啊交互什么的都来了。但是什么是都不是绝对的,你可以随便改一些css
和js
上面的组件库只能说主流的或者说是反馈比较好的,并不是只有这些
比如京东
这个大厂出了一个ui库:nutui
UI组件库适用于什么项目?
如果你想打造一个高度定制化的UI其实你不太适用于这个UI组件库
对页面没有高度的定制化适合用UI组件库
对于Vue的UI组件库,我们就得提到Element UI
(是我们国产的一个由饿了么前端团队,所打造的这么一个UI组件库)
一旦有人说:这个UI组件库不错,别人就会问:
- 1.这个UI组件库是基于哪些技术的?(大家要注意组件这个概念是有了前端框架
React
、Vue
之后才有了组件这个概念) - 2.这个UI库是PC端的还是移动端的?
这些UI组件库不需要记忆,要用直接翻它的官方文档就OK了,而且UI组件库其实说到底就是样式的千奇百变,都是用前端框架(比如创建Vue
项目,定义组件,编写css、scss样式,把他们打包并发布到npm,详情看网上的教程,我这里有一个Vue编写UI库的教学视频(不是打广告,纯自己发现的))
vue中element全部引用
安装
npm i element-ui -S
main.js 引用element-ui
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';Vue.use(ElementUI);new Vue({el: '#app',render: h => h(App)
});
这样把element-ui里的所有组件引入进来了,体积特别大
所以我们得 按需引入
babel-plugin-component是专门用于在UI组件库里面进行按需映入的
npm install babel-plugin-component -D
-D
:开发依赖
将 .babelrc在最新的Vue-cli里面已经改名了,现最新的版本是babel.config.js
presets:预设包(能帮你处理一些事情)
babel.config.js
module.exports = {presets: ['@vue/cli-plugin-babel/preset',//解析Vue里面相关的文件的JS的//安装element-ui按需追加需求["es2015", { "modules": false }],],plugins: [["component",{"libraryName": "element-ui","styleLibraryName": "theme-chalk"}]],
}
单个引入东西:
main.js
import Vue from 'vue'
import App from './App.vue'import { Button, Row } from 'element-ui'
Vue.component(Button.name , Button)//Button.name就是el-button;你也可以自己写名字
Vue.component(Row.name,Row)Vue.config.productionTip = falsenew Vue({render:h => h(App)
}).$mount('#app')
报错,得这么改(这是要经验和查看babel-plugin-component文档具体写什么):
babel.config.js
Vue2.0 Vue组件库相关推荐
- Vue2.0 Vue组件 单文件组件
聊到单文件就要写道xxx.vue,但是.vue文件浏览器是不认识的得处理和加工成.js怎么处理和加工 渠道一: webpack 渠道二: 借助Vue官方提供的脚手架(官方给你搭建的整个webpack编 ...
- 使用vue加svg实现流程图代码_京东风格的移动端Vue组件库NutUI2.0来啦
移动端 Vue 组件库 NutUI 自发布以来受到了广泛的关注.据不完全统计,目前至少有30多个京东的 web 项目正在使用 NutUI . 经过一段时间紧锣密鼓的开发,近期,京东正式发布了 NutU ...
- 京东Vue组件库NutUI 2.0发布:将支持跨平台!
NutUI 是一套来自京东用户体验设计部(JDC)前端开发部的移动端 Vue 组件库,NutUI 1.0 版本于 2018 年发布.据不完全统计,目前在京东至少有30多个 web 项目正在使用 Nut ...
- vue 添加全局组件_自定义vue2.0全局组件(下篇)
在上篇中,老K为大家介绍了一个初级自定义按钮组件的编写方法.虽然能用,但是还不算完美,可扩展性不够强大.在这一篇中,老K继续为大家完善这个按钮组件. 启动命令窗口, 进入在上篇中我们搭建的vue目录中 ...
- Vant 1.0 发布:轻量、可靠的移动端 Vue 组件库
Vant 是有赞前端团队维护的移动端 Vue 组件库,提供了一整套 UI 基础组件和业务组件.通过 Vant 可以快速搭建出风格统一的页面,提升开发效率. Vant 一.关于 1.0 距离 Vant ...
- 如何从0开始搭建Vue组件库
前言: 组件设计是通过对功能及视觉表达中元素的拆解.归纳.重组,并基于可被复用的目的,形成规范化的组件,通过多维度组合来构建整个设计方案,將这些组件整理在一起,便形成组件库.本文我们主要讲述基于 Va ...
- 十多款优秀的Vue组件库介绍
十多款优秀的Vue组件库介绍 1. iView UI组件库 iView 是一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品.iView的组件还是比较齐全的,更新也很快, ...
- vue组件库大全(忘了的时候可以进来找一下~)
基于Vue的组件库 https://github.com/ElemeFE/element" element 饿了么出品的Vue2的web UI工具套件 https://github.com/ ...
- ant design vue input change_ElementUI 不维护了?供我们选择的 Vue 组件库还有很多!
1 ElementUI 近况 根据我最近的观察,得知一些关于 ElementUI 维护人员都退去的消息,这意味着什么? 这意味着后期 ElementUI 将无人维护,就算 Vue3.0 正式版出来 E ...
- vue 组件库发布_如何创建和发布Vue组件库
vue 组件库发布 Component libraries are all the rage these days. They make it easy to maintain a consisten ...
最新文章
- 2022-2028年中国三轴陀螺仪行业市场深度分析及投资前景分析报告
- 探索 ConcurrentHashMap 高并发性的实现机制--转
- springboot api版本控制_SpringBoot入门练习
- php使用curl下载指定大小的文件
- 在SAP Data Intelligence Modeler里测试data Generator graph
- MySQL案例分析--QueryCache
- rn项目 假如cocoapods_React Native 如何集成到原生IOS项目中?
- 西门子em235模块的功能_图文讲解PLC模拟量模块与传感器接线方法和注意事项
- 一支python教学_第一只python爬虫
- SpringBoot 启动过程,你不知道的秘密!
- Oracle数据库通过创建触发器实现自增功能
- 共轭梯度法及其matlab程序
- 广告传媒实际税负怎么计算_增值税的理论税负和实际计算公式
- HTML+CSS+JS网站设计——上海美食(8页) 酒水网页设计作业,甜品美食网页制作作业, 学生零食网页作业
- keil c语言字符型变量的值,Keil C语言
- 网站备案后可以换服务器吗,域名备案后可以更换服务器吗
- unity 打包时 StreamingAssets文件的数目过多
- java学习第一天笔记
- 认识电信产品生命周期管理PLM及其PLM服务
- 电磁场与仿真软件(29)