0.0.4 • Published 6 years ago
ohomie v0.0.4
目录
快速开始
可用的快速启动方式:
- Clone the repo:
ssh://git@gitlab.o-home.cc:10022/liujian/ohomie.git
- Install with npm:
npm install ohomie
现只提供完整引入的方式:
<!-- 引入样式 -->
<link rel="stylesheet" href="https://static.o-home.com/ohomie/ohomie.min.css">
<!-- 引入组件库 -->
<script src="https://static.o-home.com/ohomie/ohomie.min.js"></script>
如果是通过 npm 安装,并希望配合 webpack 使用:
在 entry 文件中写入以下内容:
import 'ohomie'
import '~/ohome/dist/css/ohomie.css'
自定义主题: 新建scss变量配置文件 variable.scss:
$borderColor:#e5e5e5;
$errorColor:#ff5751;
$color1: #ff8000;
新建scss文件 ohomie.scss:
@import "variable";
@import "~ohomie/src/base"
webpack如下配置:
var webpack = require('webpack');
var path = require('path');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry : "./dev/app.js",
output:{
path:path.resolve(__dirname, './static/script'),
filename:"bundle.js"
},
module: {
rules:[
{
test:/.js?$/,
exclude: /(node_modules)/,
loader: "babel-loader",
},
{
test:/\.css?$/,
use:ExtractTextPlugin.extract(["css-loader","style-loader"])
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
use: [{
loader: "css-loader"
}, {
loader: "sass-loader"
}],
fallback: "style-loader"
})
}
]
},
externals:{
"jquery":"window.$"
},
plugins: [
new webpack.ProvidePlugin({
$: 'jquery'
}),
new ExtractTextPlugin({
filename: "../style/ohomie-test.css"
})
]
}
在 entry 文件中引用:
import 'ohomie'
import './ohomie.scss'
项目结构
项目的目录和逻辑分组,这些是编译后的文件,大致如下:
ohomie/
├── css/
│ ├── ohomie.css
│ ├── ohomie.css.map
│ ├── ohomie.min.css
└── js/
├── ohomie.js
├── ohomie.js.map
└── ohomie.min.js
项目依赖JQuery,但不包括JQuery的文件,需要另外引用
项目开发目录
ohomie/
├── build/
│ ├── examples//组件使用例子
└── src/
├── components//js组件
├── config//scss,js配置文件
├── utilities//通用样式库
├── utils//通用脚本库
├── app.js//脚本入口文件
├── app.scss//样式入口文件
├── base.scss//没有带变量的样式文件,用于webpack编译
└── app.js