目录

• 快速开始
• 项目结构

快速开始

可用的快速启动方式:

• Clone the repo: ssh://[email protected]: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