0.1.2 • Published 6 years ago
yc-ui v0.1.2
yc-ui
旅居云创UED Vue组件
快速上手
通过npm安装
npm install yc-ui --save
全局加载
// 引入组件
import YcUI from 'yc-ui'
import 'yc-ui/dist/style/index.css' // or 'yc-ui/src/styles/index.less'
// 全局注册
Vue.use(YcUI)
按需加载
按需引用是直接引用的组件库源代码,需要借助 babel 进行编译,以 webpack 为例:
module: {
rules: [
{ test: /yc-ui.src.*?js$/, loader: 'babel-loader' },
{ test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }
]
}
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test'), resolve('node_modules/yc-ui/src')]
}
]
}
import Button from 'yc-ui/src/components/button'
import 'yc-ui/src/components/button/style.less'
Vue.component(Button.name, Button)
如果你使用了 babel,那么可以使用 babel-plugin-import
来进行按需加载,加入这个插件后。你可以仍然这么写:
import { Button } from 'yc-ui'
Vue.component(Button.name, Button)
插件会帮你转换成 yc-ui/src/components/xxx
的写法。另外此插件配合 style
属性可以做到模块样式的按需自动加载。
使用前需要在 .babelrc
文件中配置 babel-plugin-import
"plugins": [
["import", {
"libraryName": "yc-ui",
"libraryDirectory": "src/components",
"style": true
}]
]
定制样式
1) modifyVars(推荐)
利用 less-loader
的 modifyVars
配置来覆盖原来的样式变量
2) 覆盖less
用 less 文件进行变量覆盖。 建立一个单独的 less 文件如下,再引入这个文件。
@import "~yc-ui/src/styles/index.less"; // 引入官方提供的 less 样式入口文件
@import "your-theme-file.less"; // 用于覆盖上面定义的变量
注意:这种方式已经载入了所有组件的样式,不需要也无法和按需加载插件 babel-plugin-import
的 style
属性一起使用。
0.1.2
6 years ago
0.1.1
7 years ago
0.1.0
7 years ago
0.0.26
7 years ago
0.0.25
7 years ago
0.0.24
7 years ago
0.0.23
7 years ago
0.0.22
7 years ago
0.0.21
7 years ago
0.0.20
7 years ago
0.0.19
7 years ago
0.0.18
7 years ago
0.0.17
7 years ago
0.0.16
7 years ago
0.0.15
7 years ago
0.0.14
7 years ago
0.0.13
7 years ago
0.0.12
7 years ago
0.0.11
7 years ago
0.0.10
7 years ago
0.0.9
7 years ago
0.0.8
7 years ago
0.0.6
7 years ago
0.0.4
7 years ago
0.0.3
7 years ago
0.0.2
7 years ago
0.0.1
7 years ago