自定义组件对应的样式文件,只对该组件内的节点生效. 编写组件样式时,需要注意以下几点: 组件和引用组件的页面不能使用 id 选择器(#a).属性选择器([a])和标签名选择器,请改用 class 选择器. 组件和引用组件的页面中使用后代选择器(.a .b)在一些极端情况下会有非预期的表现,如遇,请避免使用. 子元素选择器(.a>.b)只能用于 View 组件与其子节点之间,用于其他组件可能导致非预期的情况. 继承样式,如 font . color ,会从组件外(父组件)继承到组件内.但是引用组件

taro demos & taro 组件库 ui demo https://github.com/qit-team/taro-yanxuan https://github.com/fengchunsgit/taro-meituan tarojs/components Text, View, Image https://www.npmjs.com/package/@tarojs/components https://taro-docs.jd.com/taro/docs/components/vie

前段时间一直在基于webpack进行前端资源包的瘦身.在项目中基于路由进行代码分离,http://www.cnblogs.com/legu/p/7251562.html.对于公司内部的组件库,所有内容一次性加载源文件很大.比如登录主要就用了button和input,不需要打包table, tree这种复杂组件的. 在使用ant-design的时候,发现ant实现了按需加载,https://ant.design/docs/react/introduce-cn.所以想着自己的组件也支持相关的功能.

前段时间一直在基于webpack进行前端资源包的瘦身.在项目中基于路由进行代码分离,http://www.cnblogs.com/legu/p/7251562.html.对于公司内部的组件库,所有内容一次性加载源文件很大.比如登录主要就用了button和input,不需要打包table, tree这种复杂组件的. 在使用ant-design的时候,发现ant实现了按需加载,https://ant.design/docs/react/introduce-cn.所以想着自己的组件也支持相关的功能.

先说一下这篇文章的诞生原因.我们有一个这样的项目,类似或者说就是一个仪表板-Dashboard,其中的各个部分可能不是一个部门写的……我们需要提供拖拽布局(大小和位置)和展示的能力.要实现这样一个功能,想了好几种方式实现(后面的笔记详说),最后选择了这篇笔记的实现方式:写整个项目的,算是使用方:写每个组件的,算是vue类库(UI.组件库)的提供方.之后就是我们如何使用这些类库的问题了,就像我们使用element-ui一样,这样说就明白了吧!这里不说父子之间如何通信以及如何使用类库,只说如何打包类

最近使用ElementUI做项目的时候用Babel的插件babel-plugin-component做按需加载,使得组件打包的JS和CSS包体积大大缩小,加载速度也大大提升,所有想模仿做一个组件库也来做下按需加载. 首先用Vue CLI 3.0新建一个项目 vue create bes-ui 注意的是cli3的脚手架用的Babel7的配置,只有babel.config.js文件,所以要自己添加.babelrc文件. 项目结构 新建项目之后,可以按照自己的想法建文件结构,也可以按照babel-pl

作者:凹凸曼 - JJ Taro 是一款多端开发框架.开发者只需编写一份代码,即可生成各小程序端.H5 以及 React Native 的应用. Taro Next 近期已发布 beta 版本,全面完善对小程序以及 H5 的支持,欢迎体验! 背景 Taro Next 将支持使用多框架开发 过去的 Taro 1 与 Taro 2 只能使用 React 语法进行开发,但下一代的 Taro 框架对整体架构进行了升级,支持使用 React.Vue.Nerv 等框架开发多端应用. 为了支持使用多框架进行开

前段时间一直在研究Vue组件库,终于在组内派上了用场.来给大家贡献一篇关于Vue组件库的相关知识.经验不多,如果有不合理的地方还请多多指出哦--- 回想一下,在你们公司或者你们小组是否有一个以上的项目需要你维护?你是否遇到两个项目需要开发类似的功能的情况?那么你是怎么做的呢? 有这么三种常用的解决方案: COPY 你可能会说我讲究速度,复制之前的组件到新项目中,慢慢的你会发现随着你的项目的增加代码量在成倍上升,重复工作浪费了你很多时间. 子模块 我可以抽离出所有公共的组件放入一个子模块(git

前言: 前端组件化是当今热议的话题之一,也是我们在开发单页应用经常会碰到的一个问题,现在我们有了功能非常完善的Element-UI.各个大厂也相继宣布开源XXX-UI.但是也会存在一些问题,比如每个公司可能需要的业务组件不尽相同,或者我们想自己开发一套属于自己的组件库,来增强对组件的可控性.那么我们该如何去做呢? 这里记录一下我从零开始搭建起来的组件库的过程,目前只有简单几个组件,不过我也会慢慢更新维护:VV-UI 1. 环境准备 我们搭建组件库,需要准备一系列环境,首先我们要考虑一下问题: 脚

前言: 前端组件化是当今热议的话题之一,也是我们在开发单页应用经常会碰到的一个问题,现在我们有了功能非常完善的Element-UI.各个大厂也相继宣布开源XXX-UI.但是也会存在一些问题,比如每个公司可能需要的业务组件不尽相同,或者我们想自己开发一套属于自己的组件库,来增强对组件的可控性.那么我们该如何去做呢?这里记录一下我从零开始搭建起来的组件库的过程,目前只有简单几个组件,不过我也会慢慢更新维护. 项目github地址:github项目演示地址: 演示 1. 环境准备 我们搭建组件库,需要

前言: 刚开源出来的VV-UI目前刚刚起步,组件不是很多,非常欢迎大家的pr和Star.项目地址: https://github.com/VV-UI/VV-UI演示地址: https://vv-ui.github.io/VV-UI/#/目前组件库已经引入meta-info管理单页面title meta link等常用的seo问题.回归正题,如何搭建一套基于Vue的组件库呢? 1. 环境准备 我们搭建组件库,需要准备一系列环境,首先我们要考虑一下问题: 脚手架如何搭建 如何规划目录结构 如何编写文

0. 前端自动化(Workflow) 前端构建工具 Webpack - module bundler Yeoman - a set of tools for automating development workflow gulp - The streaming build system use-gulp grunt - the JavaScript Task Runner F.I.S - 前端集成解决方案 Web Starter Kit - 一个Google 提供的帮助开发者快速设置项目的工具

本篇带你使用 AntDesign 组件库为我们的系统换上产品级的UI! 安装组件库 在项目目录下执行:npm i antd@3.3.0 -S 或 yarn add antd 安装组件包 执行:npm i babel-plugin-import -D 安装一个babel插件用于做组件的按需加载(否则项目会打包整个组件库,非常大) 根目录下新建.roadhogrc文件(别忘了前面的点,这是roadhog工具的配置文件,下面的代码用于加载上一个命令安装的import插件),写入: { "extraBa

vue-cli 版本:2.9.6   webpack 版本:3.6.0 1. vue-cli 安装好之后,不是自动打开默认浏览器 在 config文件夹 ---> dev选项中,有个 autoOpenBrowser .把它置为 true 即可. 2. 使用less(或者sass)全局变量 起因: 因为想定义一些常用的工具样式.类似:超过一行隐藏字体并用省略号显示,清除浮动,主题颜色等.就考虑不用每个页面都引入,能直接使用定义的工具样式. 第一步: 安装  npm install sass-res

本文仅限于入门级,没有成规模制作,希望能对你有所帮助. 因为在开发多个项目中可能会用到同一个组件,那么我们通过复制粘贴的形式更新,无异于是笨拙的,我们可以通过上传到npm后,不断迭代npm包来实现更新. 前期准备 初始化project 这里我们使用vue-cli来初始化一个vue项目. npm install -g @vue/cli or yarn global add @vue/cli vue create personal-component-set 首先我们来开发一个可复用的顶栏控件,这里

一.日历组件 new Date()的月份是从0开始的. 下面表达式是:2018年6月1日 new Date(2018, 5, 1); 下面表达式是:2018年5月1日 new Date(2018, 4, 1); 或 new Date(2018, 5-1, 1); 下面表达式是:2018年5月31日(得到上个月的最后一天) new Date(2018, 5 , 0); 日的参数可以是0,也可以是负数,表示上个月底的那一天. 下面表达式是:2018年7月01日 new Date(2018, 5, 3

本文来自尚妆前端团队南洋 发表于尚妆github博客,欢迎订阅! 前言 尚妆大前端团队使用 weex 进行三端统一开发有一段时间了,截止本文发表「达人店」APP大部分页面都已经用 weex 进行了重构,在此期间也积累了一些基础组件和业务组件. 之前维护组件的方式是在达人店项目的工程内维护一个 components 文件夹,随日常开发迭代,并行需求与开发人员的增多,这种维护方式也暴露出一些问题. 1.开发人员可以随意跟随需求开发修改 components 内的组件,破坏约定好的规范,或埋入 bug

零.介绍: Ant design,是阿里巴巴的蚂蚁金服公司设计的一套适应用于web端和移动端网页的Ui组件库,组件好看,非常适合React框架使用. 官网:https://ant.design/index-cn 一.第一步:安装包 引包:cnpm i -S antd 二.全局引用.其实都不这么用,因为需要引用的文件太大,影响性能.所以这里忽略. 三.按需加载.想用什么组件就引入什么组件 1.安装依赖:两个包 cnpm i -D react-app-rewired customize-cra 2.

最近在开发一个基于Vue的后台管理系统,其中使用了element-ui第三方ui组件库.使用过组件库的人都知道,第三方组件往往会有一些默认的样式,而有些又是我们想要改变的. 一.基础(了解 <style></style> 的 scoped 属性) 在编写Vue代码过程中,为了不让父组件相同样选择器名称设置的样式影响到子组件,我们往往会给 <style></style> 标签设置 scoped 属性.但是如果设置了scoped属性,在该组件内的 Css 就只能

前言 俗话说:"麻雀虽小,五脏俱全",搭建一个组件库,知之非难,行之不易,涉及到的技术方方面面,犹如海面风平浪静,实则暗礁险滩,处处惊险- 目前团队内已经有较为成熟的 Vue 技术栈的 NutUI 组件库[1] 和 React 技术栈的 yep-react 组件库[2].然而这些组件库大都从零开始搭建,包括 Webpack 的繁杂配置,Markdown 文件转 Vue 文件功能的开发,单元测试功能的开发.按需加载的 Babel 插件开发等等,完成整个组件库项目实属不易,也是一个浩大的工

目录 加薪攻略之UI组件库实践-storybook 一.业务背景 二.选用方案 三.引入分析 项目结构 项目效果 四.实现步骤 1.添加依赖 2.添加npm执行脚本 3.添加配置文件 4.添加必要的webpack配置 5.准备项目中的组件 6.为组件添加story 7.运行storybook 五.插件运用 1)动态交互展示组件属性 2)相关文档展示 Knobs 1.安装 2.注册 3.使用 vue-info 1.安装 2.注册 3.在没进行全局配置时,可单独引入使用 六.结尾 加薪攻略之UI组件