├── .babelrc ├── .eslintrc ├── .gitignore ├── .travis.yml ├── CHANGELOG.md ├── README.md ├── README ├── 1.png ├── 2.png ├── 3.png ├── equals.png ├── fork.png ├── github.png ├── plus.png ├── spritesheet.png └── twitter.png ├── config ├── devServer.js ├── webpack.config.dev.js └── webpack.config.prod.js ├── node_bak ├── file-loader │ ├── README.md │ ├── index.js │ └── package.json └── 替换默认file-loader模块的index.js文件以支持css图片路径问题.txt ├── package.json └── src ├── button.html ├── dist ├── css │ ├── components │ │ ├── button.css │ │ ├── demo.css │ │ ├── form.css │ │ ├── icon.css │ │ ├── list.css │ │ ├── reset.css │ │ ├── style.css │ │ └── 组件样式目录.txt │ ├── css资源目录.txt │ └── temp.css ├── data │ └── data.json ├── img │ ├── bg.jpg │ ├── icons │ │ ├── icon_checkbox.png │ │ ├── icon_checkboxActive.png │ │ ├── icon_right.png │ │ └── 图标资源路径.txt │ ├── svg │ │ └── SVG资源目录.txt │ ├── vcode.jpg │ └── 图片资源目录.txt ├── js │ ├── JS开发目录.txt │ ├── button.js │ ├── form.js │ ├── home │ │ └── index.js │ ├── icon.js │ ├── index.js │ ├── list.js │ └── redux.js ├── plugins │ ├── components │ │ ├── button │ │ │ ├── Button.js │ │ │ ├── ButtonArea.js │ │ │ └── index.js │ │ ├── form │ │ │ ├── Checkbox.js │ │ │ ├── Input.js │ │ │ ├── Label.js │ │ │ ├── Radio.js │ │ │ ├── Select.js │ │ │ ├── Swith.js │ │ │ ├── Textarea.js │ │ │ └── index.js │ │ ├── icon │ │ │ ├── Icon.js │ │ │ └── index.js │ │ ├── list │ │ │ ├── List.js │ │ │ ├── ListContent.js │ │ │ ├── ListIcon.js │ │ │ ├── ListOther.js │ │ │ ├── ListTitle.js │ │ │ ├── Lists.js │ │ │ ├── PanelContent.js │ │ │ ├── PanelTitle.js │ │ │ ├── demo.js │ │ │ └── index.js │ │ └── 自编辑组件目录.txt │ └── lib │ │ └── viewport.js ├── scss │ ├── components │ │ └── 组件样式目录.txt │ └── scss资源目录.txt └── tmpl │ └── 模板存放目录.txt ├── form.html ├── home └── index.html ├── icon.html ├── index.html ├── list.html └── redux.html /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["react", "es2015","stage-2"], 3 | "env": { 4 | "development": { 5 | "presets": ["react-hmre"] 6 | } 7 | }, 8 | "plugins": ["transform-class-properties"] 9 | } 10 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "ecmaFeatures": { 3 | "jsx": true, 4 | "modules": true 5 | }, 6 | "env": { 7 | "browser": true, 8 | "node": true 9 | }, 10 | "parser": "babel-eslint", 11 | "rules": { 12 | "quotes": [2, "single"], 13 | "strict": [2, "never"], 14 | "babel/generator-star-spacing": 1, 15 | "babel/new-cap": 1, 16 | "babel/object-shorthand": 1, 17 | "babel/arrow-parens": 1, 18 | "babel/no-await-in-loop": 1, 19 | "react/jsx-uses-react": 2, 20 | "react/jsx-uses-vars": 2, 21 | "react/react-in-jsx-scope": 2 22 | }, 23 | "plugins": [ 24 | "babel", 25 | "react" 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # ad 2 | assets/ 3 | node_modules/ 4 | config_bak/ 5 | test/ 6 | 1.js -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | 3 | node_js: 4 | - 0.4 5 | - 0.6 -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ## 1.1.0 (2017-1-19) 2 | 3 | Update: 4 | 5 | - Added multi-dir supporting , added user customize paths option and added some other options 6 | 7 | - 增加了多文件夹支持及增加了自定义路径及部分配置参数 8 | 9 | ## 1.0.4 (2017-1-14) 10 | 11 | Update: 12 | 13 | - Fixed a bug that the error info can not show in terminal 14 | 15 | - 修复了一个bug,错误信息无法显示在控制台上的问题 16 | 17 | 18 | ## 1.0.3 (2016-10-17) 19 | 20 | Update: 21 | 22 | - Add a react-router demo(router.html) 23 | 24 | - 增加了一个react-router实例(router.html) 25 | 26 | 27 | ## 1.0.2 (2016-09-13) 28 | 29 | Update: 30 | 31 | - Add a listview demo,and update Readme 32 | 33 | - 增加了一个列表实例,并优化补充了Readme 34 | 35 | 36 | ## 1.0.1 (2016-09-05) 37 | 38 | Update: 39 | 40 | - Edit .babelrc file config. 41 | In order to the system suppose class-properties and ... that it added babel-preset-stage-2 and babel-plugin-transform-class-properties. 42 | 43 | - 修改了.babelrc的配置 44 | 为了让系统支持ES7的扩展方法,增加2个bable的插件 45 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Webpack+React集成环境框架 2 | 3 | [![Build Status](https://travis-ci.org/greengerong/qing.png?branch=master)](https://travis-ci.org/greengerong/qing) 4 | 5 | 一个完善的Koa+Webpack+React集成开发环境,实现了多页面应用入口,并附加很多实用组件 6 | 7 | ## 框架优点 8 | 9 | - 支持多页面类型的React应用开发 10 | - 实用Koa服务器进行构建,扩展性更强 11 | - 分为开发环境(Dev)和上线(Prod)环境,可以自由选择并进行开发 12 | - 支持React热加载,可以实现CSS及JS的热加载效果 13 | - 附加Postcss工具,可实现Sass语法开发,自动填充CSS3兼容方案及CSS雪碧图的自动化构建 14 | - 使用了CSS-Module技术,实现了样式的复用性和解决了样式污染 15 | 16 | ##使用的技术 17 | 18 | - [x] [Webpack](https://webpack.github.io) 19 | - [x] [React](https://facebook.github.io/react/) 20 | - [x] [Babel](https://babeljs.io/) 21 | - [x] [Koa](https://github.com/koajs/koa) 22 | - [x] [PostCSS](https://github.com/postcss/postcss) 23 | - [x] [precss](https://github.com/jonathantneal/precss) 24 | - [x] [CSS modules](https://github.com/outpunk/postcss-modules) 25 | - [x] [autoprefixer](https://github.com/postcss/autoprefixer) 26 | - [x] [webpack-dashboard](https://github.com/FormidableLabs/webpack-dashboard) 27 | 28 | ## 目录结构 29 | **开发目录结构:** 30 | ``` 31 | ├── dist //资源文件目录 32 |    ├── css //存放css文件 33 |    │   ├── components //存放组件相关的css 34 | │ └── common //存放公用的css文件 35 |    ├── data //存放临时数据文件 36 |    ├── img //存放图片目录 37 |    ├── js //存放所有入口的js文件(不要防止其他js) 38 |    ├── plugins //存放其他非入口的js 39 |    │   ├── components //存放组件相关的js 40 |    │   └── lib //存放组件相关的js 41 |    ├── scss //存放scss文件 42 |    │   └── components 43 |    └── tmpl //存放模板文件 44 | ``` 45 | 46 | 47 | ## 使用方法 48 | **1.安装所需NodeJS模块** 49 | 50 | 进入你该项目文件夹,并在CMD/终端中执行命令安装Node依赖包,这里有一个需要注意的问题,由于webpack中file-loader的图片处理路径无法满足CSS背景图片的路径变化,需要将根目录下的node_bak中的file-loader文件夹替换node_modules中的file-loader文件夹 51 | ``` 52 | npm install 53 | ``` 54 | ![IMG](./README/3.png) 55 | 56 | **2.创建入口及对应js文件** 57 | 58 | 在src开发目录中创建HMTL页面,并在src/dist/js中创建一个同名js即可 59 | 60 | ![IMG](./README/1.png) 61 | 62 | **3.设置相关配置参数** 63 | 64 | 在./config文件夹中设置webpack.config.dev.js和webpack.config.prod.js文件中的配置 65 | 66 | ```js 67 | /** 68 | 设置默认常用路径 69 | **/ 70 | //srcDir为当前开发目录(默认:/src) 71 | const srcDir = path.resolve(process.cwd(), 'src'); 72 | //assetsDir为当前建立目录(默认:/assets) 73 | const assetsDir = path.resolve(process.cwd(), 'assets'); 74 | //读取入口的js文件目录(本目录只能对应页面的入口的JS,其他脚本需要写在/dist/plugins中) 75 | const jsEntryDir = path.resolve(srcDir, 'dist/js'); 76 | //生成JS的目录地址(默认:) 77 | const jsDir = 'dist/js/'; 78 | //生成css的目录地址(默认:) 79 | const cssDir = 'dist/css/'; 80 | 81 | /** 82 | 设置默认模块依赖及是否合并打包等设置 83 | **/ 84 | //设置需要排除单独打包的插件 85 | const singleModule = ['react', 'react-dom', 'jquery', 'Raphael']; 86 | //是否合并打包其他组件模块 87 | const libMerge = true; 88 | //需要全局使用的组件,比如jquery,lodash等 89 | const globalValue = { 90 | $: 'jquery' 91 | }; 92 | //设置不需要使用的css目录 93 | const excludeCss = ['dist/css/common', 'dist/css/components']; 94 | ``` 95 | 96 | 97 | **4.开启热加载开发模式** 98 | 99 | 进入你该项目文件夹,并在CMD/终端中执行命令开启开发模式,这时候会显示一个控制台,能够看到项目对应的反馈信息及问题 100 | 101 | ``` 102 | npm start 103 | ``` 104 | **5.项目完成后进行打包压缩** 105 | 106 | 进入你该项目文件夹,并在CMD/终端中执行命令执行打包压缩,会在根目录生成一个assets的文件夹,文件夹内为压缩后的项目代码 107 | 108 | ``` 109 | npm run build 110 | ``` 111 | 112 | 113 | 114 | ## 其他框架特性内容介绍 115 | 116 | **1.PostCss工具** 117 | 118 | 在框架中使用了PostCss的部分工具,主要为 119 | 120 | - [Precss](https://jonathantneal.github.io/precss/) 可以实现类似sass语法功能,所以该框架支持类似Sass语法的编写,例如: 121 | ```css 122 | /* before */ 123 | 124 | @for $i from 1 to 3 { 125 | .b-$i { width: $(i)px; } 126 | } 127 | 128 | /* after */ 129 | 130 | .b-1 { 131 | width: 1px 132 | } 133 | .b-2 { 134 | width: 2px 135 | } 136 | .b-3 { 137 | width: 3px 138 | } 139 | ``` 140 | - [postcss-easysprites](https://github.com/glebmachine/postcss-easysprites) 可以实现图表的自动拼接,例如: 141 | 142 | ![IMG](./README/fork.png)![IMG](./README/plus.png)![IMG](./README/github.png)![IMG](./README/plus.png)![IMG](./README/twitter.png)![IMG](./README/equals.png) 143 | 144 | ![IMG](./README/spritesheet.png) 145 | ```css 146 | /* before */ 147 | 148 | .arrowNext { 149 | background-image: url('dist/img/arrow-next.png#elements'); 150 | } 151 | .arrowNext:hover { 152 | background-image: url('dist/img/arrow-next_hover.png#elements'); 153 | } 154 | .arrowPrev { 155 | background-image: url('dist/img/arrow-prev.png#elements2'); 156 | } 157 | .arrowPrev:hover { 158 | background-image: url('dist/img/arrow-prev_hover.png#elements2'); 159 | } 160 | 161 | /* after */ 162 | 163 | .arrowNext { 164 | background-image: url(dist/img/elements.png); 165 | background-position: 0 0; 166 | } 167 | .arrowNext:hover { 168 | background-image: url(dist/img/elements.png); 169 | background-position: -28px 0; 170 | } 171 | .arrowPrev { 172 | background-image: url(dist/img/elements2.png); 173 | background-position: 0 0; 174 | } 175 | .arrowPrev:hover { 176 | background-image: url(dist/img/elements2.png); 177 | background-position: -28px 0; 178 | } 179 | ``` 180 | ## 更新记录 181 | 182 | - [CHANGELOG](https://github.com/aemoe/webpack-react-framework/blob/master/CHANGELOG.md) 183 | 184 | # License 185 | 186 | MIT 187 | -------------------------------------------------------------------------------- /README/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aemoe/webpack-react-framework/87c055743dd3cf69b6df47008c688b91c3ba82c1/README/1.png -------------------------------------------------------------------------------- /README/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aemoe/webpack-react-framework/87c055743dd3cf69b6df47008c688b91c3ba82c1/README/2.png -------------------------------------------------------------------------------- /README/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aemoe/webpack-react-framework/87c055743dd3cf69b6df47008c688b91c3ba82c1/README/3.png -------------------------------------------------------------------------------- /README/equals.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aemoe/webpack-react-framework/87c055743dd3cf69b6df47008c688b91c3ba82c1/README/equals.png -------------------------------------------------------------------------------- /README/fork.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aemoe/webpack-react-framework/87c055743dd3cf69b6df47008c688b91c3ba82c1/README/fork.png -------------------------------------------------------------------------------- /README/github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aemoe/webpack-react-framework/87c055743dd3cf69b6df47008c688b91c3ba82c1/README/github.png -------------------------------------------------------------------------------- /README/plus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aemoe/webpack-react-framework/87c055743dd3cf69b6df47008c688b91c3ba82c1/README/plus.png -------------------------------------------------------------------------------- /README/spritesheet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aemoe/webpack-react-framework/87c055743dd3cf69b6df47008c688b91c3ba82c1/README/spritesheet.png -------------------------------------------------------------------------------- /README/twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aemoe/webpack-react-framework/87c055743dd3cf69b6df47008c688b91c3ba82c1/README/twitter.png -------------------------------------------------------------------------------- /config/devServer.js: -------------------------------------------------------------------------------- 1 | //加载Node的Path模块 2 | const path = require('path'); 3 | //加载webpack模块 4 | const webpack = require('webpack'); 5 | //加载webpack 热加载服务器模块 6 | const webpackDevMiddleware = require('koa-webpack-dev-middleware'); 7 | const webpackHotMiddleware = require('koa-webpack-hot-middleware'); 8 | //加载webpack配置文件 9 | const config = require('./webpack.config.dev'); 10 | //加载koa服务器模块 11 | const koa = require('koa'); 12 | 13 | //配置及初始化Koa服务器 14 | var creatServer = () => { 15 | //创建koa服务器应用 16 | let app = koa(); 17 | //初始化webpack应用 18 | let compiler = webpack(config); 19 | //调用webpack热加载模块及对应参数 20 | app.use(webpackDevMiddleware(compiler, { 21 | //quiet: true, 22 | noInfo: true, 23 | publicPath: config.output.publicPath, 24 | hot: true, 25 | lazy: false, 26 | historyApiFallback: true, 27 | stats: { 28 | colors: true // 用颜色标识 29 | }, 30 | })); 31 | app.use(webpackHotMiddleware(compiler), { 32 | log: () => {} 33 | }); 34 | //调用koa静态文件 35 | app.use(require('koa-static')(path.join(process.cwd(), '/assets'))); 36 | //调用koa列出开发目录 37 | app.use(require('koa-serve-index')(path.join(process.cwd(), '/src'))); 38 | //调用开启5000端口用来测试和开发 39 | app.listen(5000, function(err) { 40 | if (err) { 41 | console.log(err); 42 | } 43 | console.log('Listening at localhost:5000'); 44 | }); 45 | }; 46 | 47 | //调用创建koa服务器方法 48 | creatServer(); 49 | -------------------------------------------------------------------------------- /config/webpack.config.dev.js: -------------------------------------------------------------------------------- 1 | /** 2 | 加载常用模块及Webpack需要的模块组件 3 | **/ 4 | //加载Node的Path模块 5 | const path = require('path'); 6 | //加载Node的fs模块 7 | const fs = require('fs'); 8 | //Node遍历文件插件 9 | const glob = require('glob'); 10 | //加载webpack模块 11 | const webpack = require('webpack'); 12 | //加载自动化css独立加载插件 13 | const ExtractTextPlugin = require('extract-text-webpack-plugin'); 14 | //加载自动化HTML自动化编译插件 15 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 16 | //加载JS模块压缩编译插件 17 | const UglifyJsPlugin = webpack.optimize.UglifyJsPlugin; 18 | //加载公用组件插件 19 | const CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin; 20 | 21 | /** 22 | 设置默认常用路径 23 | **/ 24 | //srcDir为当前开发目录(默认:/src) 25 | const srcDir = path.resolve(process.cwd(), 'src'); 26 | //assetsDir为当前建立目录(默认:/assets) 27 | const assetsDir = path.resolve(process.cwd(), 'assets'); 28 | //读取入口的js文件目录(本目录只能对应页面的入口的JS,其他脚本需要写在/dist/plugins中) 29 | const jsEntryDir = path.resolve(srcDir, 'dist/js'); 30 | //生成JS的目录地址(默认:) 31 | const jsDir = 'dist/js/'; 32 | //生成css的目录地址(默认:) 33 | const cssDir = 'dist/css/'; 34 | 35 | /** 36 | 设置默认模块依赖及是否合并打包等设置 37 | **/ 38 | //设置需要排除单独打包的插件 39 | const singleModule = ['react', 'react-dom', 'jquery', 'Raphael']; 40 | //是否合并打包其他组件模块 41 | const libMerge = true; 42 | //需要全局使用的组件,比如jquery,lodash等 43 | const globalValue = { 44 | $: 'jquery' 45 | }; 46 | //设置不需要使用的css目录 47 | const excludeCss = ['dist/css/common', 'dist/css/components']; 48 | 49 | //加载webpack目录参数配置 50 | let config = { 51 | //开启source_map,可选择删除 52 | // devtool: 'source-map', 53 | //自动获取并生成入口,获取的目录路径为./src/dist/js,可以自行修改 54 | entry: getEntry(), 55 | //输出位置为./assests 56 | output: { 57 | path: path.join(process.cwd(), 'assets'), 58 | filename: jsDir + '[name].js', 59 | publicPath: '/' 60 | }, 61 | plugins: [ 62 | //排除css压缩加载在页面 63 | new ExtractTextPlugin(cssDir + '[name].css'), 64 | //合并额外的js包(暂时无用) 65 | // new CommonsChunkPlugin('lib', './dist/js/lib.js', jsExtract), 66 | //开启热加载模式 67 | new webpack.HotModuleReplacementPlugin(), 68 | new webpack.NoErrorsPlugin(), 69 | //设置全局使用的变量 70 | new webpack.ProvidePlugin(globalValue) 71 | ], 72 | module: { 73 | //加载器配置 74 | loaders: [ 75 | //css加载器 排除不需要加css-modules的css部分 76 | { 77 | test: /\.css$/, 78 | exclude: getExcludeCss(), 79 | loaders: [ 80 | 'style-loader', 81 | 'css-loader?modules&localIdentName=[name]__[local]___[hash:base64:5]&sourceMap&importLoaders=1', 82 | 'postcss-loader?sourceMap=true' 83 | ] 84 | }, 85 | //css加载器 设置需要加ss-modules的css部分 86 | { 87 | test: /\.css$/, 88 | include: getExcludeCss(), 89 | loaders: [ 90 | 'style-loader', 91 | 'css-loader?sourceMap&importLoaders=1', 92 | 'postcss-loader?sourceMap=true' 93 | ] 94 | }, { 95 | test: /\.js$/, 96 | loaders: ['react-hot', 'babel'], 97 | exclude: /node_modules/, // 匹配不希望处理文件的路径 98 | include: path.join(process.cwd(), 'src') 99 | }, { 100 | test: /\.(png|jpeg|jpg|gif)$/, 101 | loader: 'file?name=dist/img/[name].[ext]' 102 | }, { 103 | test: /\.(woff|eot|ttf)$/i, 104 | loader: 'url?limit=10000&name=dist/fonts/[name].[ext]' 105 | }, { 106 | test: /\.json$/, 107 | loader: 'json' 108 | } 109 | ] 110 | }, 111 | postcss: function(webpack) { 112 | return { 113 | plugins: [ 114 | require('postcss-import')({ 115 | addDependencyTo: webpack 116 | }), 117 | require('postcss-display-inline-block'), 118 | require('autoprefixer'), 119 | require('precss'), 120 | require('postcss-easysprites')({ 121 | imagePath: '../img', 122 | spritePath: './assets/dist/img' 123 | }) 124 | ] 125 | }; 126 | } 127 | }; 128 | //设置排出的css路径 129 | function getExcludeCss() { 130 | var cssArr = []; 131 | excludeCss.forEach(function(paths) { 132 | cssArr.push(path.resolve(srcDir, paths)); 133 | }); 134 | return cssArr; 135 | } 136 | //设置入口文件 137 | function getEntry() { 138 | var entrys = glob.sync(path.resolve(jsEntryDir, '**/*.js')); 139 | var map = {}; 140 | entrys.forEach(function(entry) { 141 | if (entry) { 142 | var path = entry.replace(jsEntryDir + '/', ''); 143 | var entryName = path.substring(0, path.length - 3); 144 | var entryArr = []; 145 | entryArr.push(entry); 146 | entryArr.push('eventsource-polyfill'); 147 | entryArr.push('webpack-hot-middleware/client'); 148 | map[entryName] = entryArr; 149 | } 150 | }); 151 | //自定义额外加载包,不会合并在页面对应js中 152 | if (libMerge) { 153 | map['lib'] = singleModule; 154 | } else { 155 | singleModule.forEach(function(libName) { 156 | map[libName] = [libName]; 157 | }); 158 | } 159 | return map; 160 | } 161 | 162 | var files = glob.sync(path.resolve(srcDir, '**/*.html')); 163 | files.forEach(function(filename) { 164 | var m = filename.match(/(.+)\.html$/); 165 | if (m) { 166 | var conf = { 167 | template: filename, 168 | inject: true, //允许插件修改哪些内容，包括head与body 169 | hash: true, //为静态资源生成hash值 170 | minify: { //压缩HTML文件 171 | removeComments: true, //移除HTML中的注释 172 | collapseWhitespace: false //删除空白符与换行符 173 | }, 174 | filename: filename.replace(srcDir, assetsDir) 175 | }; 176 | var vendor = m[1].replace(srcDir + '/', ''); 177 | if (vendor in config.entry) { 178 | if (libMerge) { 179 | conf.chunks = ['lib', vendor]; 180 | } else { 181 | conf.chunks = [vendor].concat(singleModule); 182 | } 183 | 184 | } 185 | config.plugins.push(new HtmlWebpackPlugin(conf)); 186 | } 187 | }); 188 | 189 | module.exports = config; 190 | -------------------------------------------------------------------------------- /config/webpack.config.prod.js: -------------------------------------------------------------------------------- 1 | /** 2 | 加载常用模块及Webpack需要的模块组件 3 | **/ 4 | //加载Node的Path模块 5 | const path = require('path'); 6 | //加载Node的fs模块 7 | const fs = require('fs'); 8 | //Node遍历文件插件 9 | const glob = require('glob'); 10 | //加载webpack模块 11 | const webpack = require('webpack'); 12 | //加载自动化css独立加载插件 13 | const ExtractTextPlugin = require('extract-text-webpack-plugin'); 14 | //加载自动化HTML自动化编译插件 15 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 16 | //加载JS模块压缩编译插件 17 | const UglifyJsPlugin = webpack.optimize.UglifyJsPlugin; 18 | //加载公用组件插件 19 | const CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin; 20 | 21 | /** 22 | 设置默认常用路径 23 | **/ 24 | //srcDir为当前开发目录(默认:/src) 25 | const srcDir = path.resolve(process.cwd(), 'src'); 26 | //assetsDir为当前建立目录(默认:/assets) 27 | const assetsDir = path.resolve(process.cwd(), 'assets'); 28 | //读取入口的js文件目录(本目录只能对应页面的入口的JS,其他脚本需要写在/dist/plugins中) 29 | const jsEntryDir = path.resolve(srcDir, 'dist/js'); 30 | //生成JS的目录地址(默认:) 31 | const jsDir = 'dist/js/'; 32 | //生成css的目录地址(默认:) 33 | const cssDir = 'dist/css/'; 34 | 35 | /** 36 | 设置默认模块依赖及是否合并打包等设置 37 | **/ 38 | //设置需要排除单独打包的插件 39 | const singleModule = ['react', 'react-dom', 'jquery', 'Raphael']; 40 | //是否合并打包其他组件模块 41 | const libMerge = true; 42 | //需要全局使用的组件,比如jquery,lodash等 43 | const globalValue = { 44 | $: 'jquery' 45 | }; 46 | //设置不需要使用的css目录 47 | const excludeCss = ['dist/css/common', 'dist/css/components']; 48 | 49 | 50 | //加载webpack目录参数配置 51 | let config = { 52 | //开启source_map,可选择删除 53 | // devtool: 'source-map', 54 | //自动获取并生成入口,获取的目录路径为./src/dist/js,可以自行修改 55 | entry: getEntry(), 56 | //输出位置为./assests 57 | output: { 58 | path: path.join(process.cwd(), 'assets'), 59 | filename: jsDir + '[name].js', 60 | publicPath: '/' 61 | }, 62 | plugins: [ 63 | //排除css压缩加载在页面 64 | new ExtractTextPlugin(cssDir + '[name].css'), 65 | //合并额外的js包(暂时无用) 66 | // new CommonsChunkPlugin('lib', './dist/js/lib.js', jsExtract), 67 | //开启热加载模式 68 | new webpack.HotModuleReplacementPlugin(), 69 | new webpack.NoErrorsPlugin(), 70 | //设置全局使用的变量 71 | new webpack.ProvidePlugin(globalValue), 72 | new webpack.optimize.UglifyJsPlugin({ 73 | compressor: { 74 | warnings: false 75 | } 76 | }) 77 | ], 78 | module: { 79 | //加载器配置 80 | loaders: [ 81 | //css加载器 排除不需要加css-modules的css部分 82 | { 83 | test: /\.css$/, 84 | exclude: getExcludeCss(), 85 | loaders: [ 86 | 'style-loader', 87 | 'css-loader?modules&localIdentName=[name]__[local]___[hash:base64:5]&sourceMap&importLoaders=1', 88 | 'postcss-loader?sourceMap=true' 89 | ] 90 | }, 91 | //css加载器 设置需要加ss-modules的css部分 92 | { 93 | test: /\.css$/, 94 | include: getExcludeCss(), 95 | loaders: [ 96 | 'style-loader', 97 | 'css-loader?sourceMap&importLoaders=1', 98 | 'postcss-loader?sourceMap=true' 99 | ] 100 | }, { 101 | test: /\.js$/, 102 | loaders: ['react-hot', 'babel'], 103 | exclude: /node_modules/, // 匹配不希望处理文件的路径 104 | include: path.join(process.cwd(), 'src') 105 | }, { 106 | test: /\.(png|jpeg|jpg|gif)$/, 107 | loader: 'file?name=dist/img/[name].[ext]' 108 | }, { 109 | test: /\.(woff|eot|ttf)$/i, 110 | loader: 'url?limit=10000&name=dist/fonts/[name].[ext]' 111 | }, { 112 | test: /\.json$/, 113 | loader: 'json' 114 | } 115 | ] 116 | }, 117 | postcss: function(webpack) { 118 | return { 119 | plugins: [ 120 | require('postcss-import')({ 121 | addDependencyTo: webpack 122 | }), 123 | require('postcss-display-inline-block'), 124 | require('autoprefixer'), 125 | require('precss'), 126 | require('postcss-easysprites')({ 127 | imagePath: '../img', 128 | spritePath: './assets/dist/img' 129 | }) 130 | ] 131 | }; 132 | } 133 | }; 134 | //设置排出的css路径 135 | function getExcludeCss() { 136 | var cssArr = []; 137 | excludeCss.forEach(function(paths) { 138 | cssArr.push(path.resolve(srcDir, paths)); 139 | }); 140 | return cssArr; 141 | } 142 | //设置入口文件 143 | function getEntry() { 144 | var entrys = glob.sync(path.resolve(jsEntryDir, '**/*.js')); 145 | var map = {}; 146 | entrys.forEach(function(entry) { 147 | if (entry) { 148 | var path = entry.replace(jsEntryDir + '/', ''); 149 | var entryName = path.substring(0, path.length - 3); 150 | map[entryName] = entry; 151 | } 152 | }); 153 | //自定义额外加载包,不会合并在页面对应js中 154 | if (libMerge) { 155 | map['lib'] = singleModule; 156 | } else { 157 | singleModule.forEach(function(libName) { 158 | map[libName] = [libName]; 159 | }); 160 | } 161 | return map; 162 | } 163 | 164 | var files = glob.sync(path.resolve(srcDir, '**/*.html')); 165 | files.forEach(function(filename) { 166 | var m = filename.match(/(.+)\.html$/); 167 | if (m) { 168 | var conf = { 169 | template: filename, 170 | inject: true, //允许插件修改哪些内容，包括head与body 171 | hash: true, //为静态资源生成hash值 172 | minify: { //压缩HTML文件 173 | removeComments: true, //移除HTML中的注释 174 | collapseWhitespace: false //删除空白符与换行符 175 | }, 176 | filename: filename.replace(srcDir, assetsDir) 177 | }; 178 | var vendor = m[1].replace(srcDir + '/', ''); 179 | if (vendor in config.entry) { 180 | if (libMerge) { 181 | conf.chunks = ['lib', vendor]; 182 | } else { 183 | conf.chunks = [vendor].concat(singleModule); 184 | } 185 | 186 | } 187 | config.plugins.push(new HtmlWebpackPlugin(conf)); 188 | } 189 | }); 190 | 191 | module.exports = config; 192 | -------------------------------------------------------------------------------- /node_bak/file-loader/README.md: -------------------------------------------------------------------------------- 1 | # file loader for webpack 2 | 3 | ## Usage 4 | 5 | [Documentation: Using loaders](http://webpack.github.io/docs/using-loaders.html) 6 | 7 | ``` javascript 8 | var url = require("file!./file.png"); 9 | // => emits file.png as file in the output directory and returns the public url 10 | // => returns i. e. "/public-path/0dcbbaa701328a3c262cfd45869e351f.png" 11 | ``` 12 | 13 | By default the filename of the resulting file is the MD5 hash of the file's contents 14 | with the original extension of the required resource. 15 | 16 | ## Filename templates 17 | 18 | You can configure a custom filename template for your file using the query 19 | parameter `name`. For instance, to copy a file from your `context` directory 20 | into the output directory retaining the full directory structure, you might 21 | use `?name=[path][name].[ext]`. 22 | 23 | ### Filename template placeholders 24 | 25 | * `[ext]` the extension of the resource 26 | * `[name]` the basename of the resource 27 | * `[path]` the path of the resource relative to the `context` query parameter or option. 28 | * `[hash]` the hash or the content 29 | * `[:hash::]` optionally you can configure 30 | * other `hashType`s, i. e. `sha1`, `md5`, `sha256`, `sha512` 31 | * other `digestType`s, i. e. `hex`, `base26`, `base32`, `base36`, `base49`, `base52`, `base58`, `base62`, `base64` 32 | * and `length` the length in chars 33 | * `[N]` the N-th match obtained from matching the current file name against the query param `regExp` 34 | 35 | ## Examples 36 | 37 | ``` javascript 38 | require("file?name=js/[hash].script.[ext]!./javascript.js"); 39 | // => js/0dcbbaa701328a3c262cfd45869e351f.script.js 40 | 41 | require("file?name=html-[hash:6].html!./page.html"); 42 | // => html-109fa8.html 43 | 44 | require("file?name=[hash]!./flash.txt"); 45 | // => c31e9820c001c9c4a86bce33ce43b679 46 | 47 | require("file?name=[sha512:hash:base64:7].[ext]!./image.png"); 48 | // => gdyb21L.png 49 | // use sha512 hash instead of md5 and with only 7 chars of base64 50 | 51 | require("file?name=img-[sha512:hash:base64:7].[ext]!./image.jpg"); 52 | // => img-VqzT5ZC.jpg 53 | // use custom name, sha512 hash instead of md5 and with only 7 chars of base64 54 | 55 | require("file?name=picture.png!./myself.png"); 56 | // => picture.png 57 | 58 | require("file?name=[path][name].[ext]?[hash]!./dir/file.png") 59 | // => dir/file.png?e43b20c069c4a01867c31e98cbce33c9 60 | ``` 61 | 62 | ## License 63 | 64 | MIT (http://www.opensource.org/licenses/mit-license.php) 65 | -------------------------------------------------------------------------------- /node_bak/file-loader/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | MIT License http://www.opensource.org/licenses/mit-license.php 3 | Author Tobias Koppers @sokra 4 | */ 5 | var loaderUtils = require("loader-utils"); 6 | 7 | module.exports = function(content) { 8 | this.cacheable && this.cacheable(); 9 | if (!this.emitFile) throw new Error("emitFile is required from module system"); 10 | var query = loaderUtils.parseQuery(this.query); 11 | var url = loaderUtils.interpolateName(this, query.name || "[hash].[ext]", { 12 | context: query.context || this.options.context, 13 | content: content, 14 | regExp: query.regExp 15 | }); 16 | var to = (query.to) && loaderUtils.interpolateName(this, query.to, { 17 | context: query.context || this.options.context, 18 | content: content, 19 | regExp: query.regExp 20 | }); 21 | this.emitFile((to) ? to : url, content); 22 | return "module.exports = __webpack_public_path__ + " + JSON.stringify(url) + ";"; 23 | } 24 | module.exports.raw = true; -------------------------------------------------------------------------------- /node_bak/file-loader/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "_args": [ 3 | [ 4 | "file-loader", 5 | "/Users/AeMoE/Desktop/Github/webpack-reactjs" 6 | ] 7 | ], 8 | "_from": "file-loader@*", 9 | "_id": "file-loader@0.8.5", 10 | "_inCache": true, 11 | "_installable": true, 12 | "_location": "/file-loader", 13 | "_nodeVersion": "0.12.4", 14 | "_npmUser": { 15 | "email": "tobias.koppers@googlemail.com", 16 | "name": "sokra" 17 | }, 18 | "_npmVersion": "2.10.1", 19 | "_phantomChildren": {}, 20 | "_requested": { 21 | "name": "file-loader", 22 | "raw": "file-loader", 23 | "rawSpec": "", 24 | "scope": null, 25 | "spec": "*", 26 | "type": "range" 27 | }, 28 | "_requiredBy": [ 29 | "#DEV:/" 30 | ], 31 | "_resolved": "https://registry.npmjs.org/file-loader/-/file-loader-0.8.5.tgz", 32 | "_shasum": "9275d031fe780f27d47f5f4af02bd43713cc151b", 33 | "_shrinkwrap": null, 34 | "_spec": "file-loader", 35 | "_where": "/Users/AeMoE/Desktop/Github/webpack-reactjs", 36 | "author": { 37 | "name": "Tobias Koppers @sokra" 38 | }, 39 | "bugs": { 40 | "url": "https://github.com/webpack/file-loader/issues" 41 | }, 42 | "dependencies": { 43 | "loader-utils": "~0.2.5" 44 | }, 45 | "description": "file loader module for webpack", 46 | "devDependencies": { 47 | "mocha": "~1.21.3", 48 | "should": "~4.0.4" 49 | }, 50 | "directories": { 51 | "test": "test" 52 | }, 53 | "dist": { 54 | "shasum": "9275d031fe780f27d47f5f4af02bd43713cc151b", 55 | "tarball": "http://registry.npmjs.org/file-loader/-/file-loader-0.8.5.tgz" 56 | }, 57 | "files": [ 58 | "index.js" 59 | ], 60 | "gitHead": "884f22a727fb26b449c61674b46b6732ad9f2194", 61 | "homepage": "https://github.com/webpack/file-loader", 62 | "license": "MIT", 63 | "main": "index.js", 64 | "maintainers": [ 65 | { 66 | "name": "sokra", 67 | "email": "tobias.koppers@googlemail.com" 68 | } 69 | ], 70 | "name": "file-loader", 71 | "optionalDependencies": {}, 72 | "readme": "ERROR: No README data found!", 73 | "repository": { 74 | "type": "git", 75 | "url": "git+https://github.com/webpack/file-loader.git" 76 | }, 77 | "scripts": { 78 | "test": "mocha -R spec" 79 | }, 80 | "version": "0.8.5" 81 | } 82 | -------------------------------------------------------------------------------- /node_bak/替换默认file-loader模块的index.js文件以支持css图片路径问题.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aemoe/webpack-react-framework/87c055743dd3cf69b6df47008c688b91c3ba82c1/node_bak/替换默认file-loader模块的index.js文件以支持css图片路径问题.txt -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-reactjs", 3 | "version": "1.0.1", 4 | "description": "Webpack reactjs hot", 5 | "scripts": { 6 | "clean": "rimraf assets", 7 | "build:webpack": "cross-env NODE_ENV=production webpack --config ./config/webpack.config.prod.js", 8 | "build": "npm run clean && npm run build:webpack", 9 | "start": "node ./config/devServer.js", 10 | "lint": "eslint ./src", 11 | "test": "" 12 | }, 13 | "repository": {}, 14 | "keywords": [ 15 | "webpack", 16 | "reactjs" 17 | ], 18 | "author": "aemoe", 19 | "license": "MIT", 20 | "devDependencies": { 21 | "autoprefixer": "^6.3.6", 22 | "babel-core": "^6.6.5", 23 | "babel-eslint": "^6.1.0", 24 | "babel-loader": "^6.2.4", 25 | "babel-plugin-transform-class-properties": "^6.11.5", 26 | "babel-preset-es2015": "^6.3.13", 27 | "babel-preset-react": "^6.3.13", 28 | "babel-preset-react-hmre": "^1.1.1", 29 | "babel-preset-stage-2": "^6.13.0", 30 | "classnames": "^2.2.5", 31 | "cross-env": "^1.0.7", 32 | "css-loader": "^0.23.1", 33 | "eslint": "^3.0.1", 34 | "eslint-plugin-babel": "^3.0.0", 35 | "eslint-plugin-react": "^5.2.2", 36 | "eventsource-polyfill": "^0.9.6", 37 | "extract-text-webpack-plugin": "^1.0.1", 38 | "file-loader": "^0.9.0", 39 | "html-webpack-plugin": "^2.10.0", 40 | "json-loader": "^0.5.4", 41 | "koa": "^1.2.0", 42 | "koa-router": "^5.4.0", 43 | "koa-serve-index": "^1.1.1", 44 | "koa-static": "^2.0.0", 45 | "koa-views": "^4.1.0", 46 | "koa-webpack-dev-middleware": "^1.2.1", 47 | "koa-webpack-hot-middleware": "^1.0.3", 48 | "lodash": "^4.17.4", 49 | "postcss": "^5.1.2", 50 | "postcss-display-inline-block": "^1.0.0", 51 | "postcss-easysprites": "^0.1.7", 52 | "postcss-import": "^8.1.2", 53 | "postcss-less": "^0.14.0", 54 | "postcss-loader": "^0.9.1", 55 | "postcss-modules": "^0.5.0", 56 | "precss": "^1.4.0", 57 | "raphael": "^2.2.1", 58 | "react-css-modules": "^3.7.6", 59 | "react-hot-loader": "^1.3.0", 60 | "react-redux": "^4.4.5", 61 | "react-router": "^2.8.1", 62 | "redux": "^3.6.0", 63 | "redux-devtools": "^3.3.1", 64 | "redux-logger": "^2.7.0", 65 | "remote-redux-devtools": "^0.5.0", 66 | "rimraf": "^2.4.3", 67 | "style-loader": "^0.13.0", 68 | "webpack": "^1.12.9", 69 | "webpack-dashboard": "^0.0.1", 70 | "webpack-hot-middleware": "^2.12.2" 71 | }, 72 | "dependencies": { 73 | "react": "^15.0.1", 74 | "react-dom": "^15.0.1", 75 | "jquery": "^3.0.0" 76 | } 77 | } 78 | -------------------------------------------------------------------------------- /src/button.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 表单 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/dist/css/components/button.css: -------------------------------------------------------------------------------- 1 | /*手机按钮样式*/ 2 | 3 | button.mfui_btn, input.mfui_btn { 4 | width: 100%; 5 | border-width: 0; 6 | outline: 0; 7 | -webkit-appearance: none; 8 | } 9 | 10 | .mfui_btn_area { 11 | margin: 1.17647059em 15px .3em; 12 | } 13 | 14 | .mfui_btn+.mfui_btn { 15 | margin-top: 15px; 16 | } 17 | 18 | .mfui_btn { 19 | position: relative; 20 | display: block; 21 | margin-left: auto; 22 | margin-right: auto; 23 | padding-left: 14px; 24 | padding-right: 14px; 25 | box-sizing: border-box; 26 | font-size: 18px; 27 | text-align: center; 28 | text-decoration: none; 29 | color: #fff; 30 | line-height: 2.33333333; 31 | border-radius: 5px; 32 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 33 | overflow: hidden; 34 | } 35 | 36 | .mfui_btn_primary { 37 | background-color: #04be02; 38 | } 39 | 40 | .mfui_btn_warn { 41 | background-color: #ef4f4f; 42 | } 43 | 44 | .mfui_btn:after { 45 | content: " "; 46 | width: 200%; 47 | height: 200%; 48 | position: absolute; 49 | top: 0; 50 | left: 0; 51 | border: 1px solid rgba(0, 0, 0, .2); 52 | -webkit-transform: scale(.5); 53 | transform: scale(.5); 54 | -webkit-transform-origin: 0 0; 55 | transform-origin: 0 0; 56 | box-sizing: border-box; 57 | border-radius: 10px; 58 | } 59 | 60 | .mfui_btn_disabled.mfui_btn_default { 61 | color: #c9c9c9; 62 | } 63 | 64 | .mfui_btn_default { 65 | background-color: #f7f7f7; 66 | color: #454545; 67 | } 68 | 69 | .mfui_btn_disabled { 70 | color: hsla(0, 0%, 100%, .6); 71 | } 72 | 73 | .button_sp_area { 74 | width: 60%; 75 | padding: 10px 0; 76 | margin: 0 auto; 77 | text-align: justify; 78 | font-size: 0; 79 | } 80 | 81 | .mfui_btn_plain_primary { 82 | color: #04be02; 83 | border: 1px solid #04be02; 84 | } 85 | 86 | .mfui_btn_plain_primary:after { 87 | border-width: 0; 88 | } 89 | 90 | button.mfui_btn_plain_primary, input.mfui_btn_plain_primary { 91 | border-width: 1px; 92 | background-color: transparent 93 | } 94 | 95 | .mfui_btn_plain_default { 96 | color: #5a5a5a; 97 | border: 1px solid #5a5a5a; 98 | } 99 | 100 | .mfui_btn_plain_default:after { 101 | border-width: 0; 102 | } 103 | 104 | button.mfui_btn_plain_default, input.mfui_btn_plain_default { 105 | border-width: 1px; 106 | background-color: transparent 107 | } 108 | 109 | .mfui_btn_primary:not(.mfui_btn_disabled):active { 110 | color: hsla(0, 0%, 100%, .4); 111 | background-color: #039702; 112 | } 113 | 114 | .mfui_btn_warn:not(.mfui_btn_disabled):active { 115 | color: hsla(0, 0%, 100%, .4); 116 | background-color: #c13e3e; 117 | } 118 | 119 | .mfui_btn_default:not(.mfui_btn_disabled):active { 120 | color: #a1a1a1; 121 | background-color: #dedede; 122 | } 123 | 124 | .mfui_btn.mfui_btn_mini { 125 | line-height: 1.9; 126 | font-size: 14px; 127 | padding: 0 .75em; 128 | display: inline-block; 129 | } 130 | 131 | button.mfui_btn_inline, button.mfui_btn_mini, input.mfui_btn_inline, input.mfui_btn_mini { 132 | width: auto; 133 | } 134 | -------------------------------------------------------------------------------- /src/dist/css/components/demo.css: -------------------------------------------------------------------------------- 1 | .a { 2 | background: #fcf; 3 | } 4 | -------------------------------------------------------------------------------- /src/dist/css/components/form.css: -------------------------------------------------------------------------------- 1 | /*手机表单样式*/ 2 | 3 | [class*=" mfui_icon_"]:before, 4 | [class^=mfui_icon_]:before { 5 | margin: 0; 6 | } 7 | 8 | .mfui_radio:checked+.mfui_icon_radiobox:before { 9 | display: block; 10 | content: '\EA08'; 11 | color: #09bb07; 12 | font-size: 16px; 13 | } 14 | 15 | [class*=" mfui_icon_"]:before, 16 | [class^=mfui_icon_]:before { 17 | font-family: icon; 18 | font-style: normal; 19 | font-weight: 400; 20 | speak: none; 21 | display: inline-block; 22 | vertical-align: middle; 23 | text-decoration: inherit; 24 | width: 1em; 25 | margin-right: .2em; 26 | text-align: center; 27 | font-variant: normal; 28 | text-transform: none; 29 | line-height: 1em; 30 | margin-left: .2em; 31 | } 32 | 33 | .mfui_radio, 34 | .mfui_check { 35 | position: absolute; 36 | width: 100%; 37 | left: 0; 38 | right: 0; 39 | opacity: 0; 40 | top: 0; 41 | bottom: 0; 42 | height: 100%; 43 | } 44 | 45 | .mfui_icon_checked:before { 46 | content: '\EA01'; 47 | color: #c9c9c9; 48 | font-size: 23px; 49 | display: block 50 | } 51 | 52 | .mfui_check:checked+.mfui_icon_checked:before { 53 | content: '\EA06'; 54 | color: #09bb07; 55 | } 56 | 57 | .mfui_switch { 58 | -webkit-appearance: none; 59 | -moz-appearance: none; 60 | appearance: none; 61 | position: relative; 62 | width: 52px; 63 | height: 32px; 64 | border: 1px solid #dfdfdf; 65 | outline: 0; 66 | border-radius: 16px; 67 | box-sizing: border-box; 68 | background: #dfdfdf; 69 | margin-top: -3px; 70 | margin-bottom: -11px; 71 | } 72 | 73 | .mfui_switch:before { 74 | width: 50px; 75 | background-color: #fdfdfd 76 | } 77 | 78 | .mfui_switch:after, 79 | .mfui_switch:before { 80 | content: " "; 81 | position: absolute; 82 | top: 0; 83 | left: 0; 84 | height: 30px; 85 | border-radius: 15px; 86 | -webkit-transition: -webkit-transform .3s; 87 | transition: -webkit-transform .3s; 88 | transition: transform .3s; 89 | transition: transform .3s, -webkit-transform .3s 90 | } 91 | 92 | .mfui_switch:after { 93 | width: 30px; 94 | background-color: #fff; 95 | box-shadow: 0 1px 3px rgba(0, 0, 0, .4) 96 | } 97 | 98 | .mfui_switch:checked { 99 | border-color: #04be02; 100 | background-color: #04be02 101 | } 102 | 103 | .mfui_switch:checked:before { 104 | -webkit-transform: scale(0); 105 | transform: scale(0) 106 | } 107 | 108 | .mfui_switch:checked:after { 109 | -webkit-transform: translateX(20px); 110 | transform: translateX(20px) 111 | } 112 | 113 | .mfui_label { 114 | display: block; 115 | width: 3em; 116 | } 117 | 118 | .mfui_input { 119 | width: 100%; 120 | border: 0; 121 | outline: 0; 122 | -webkit-appearance: none; 123 | background-color: transparent; 124 | font-size: inherit; 125 | color: inherit; 126 | height: 1.41176471em; 127 | line-height: 1.41176471; 128 | } 129 | 130 | .mfui_cells_form input, 131 | .mfui_cells_form label[for], 132 | .mfui_cells_form textarea { 133 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 134 | } 135 | 136 | .mfui_select { 137 | -webkit-appearance: none; 138 | border: 0; 139 | outline: 0; 140 | background-color: transparent; 141 | width: 100%; 142 | font-size: inherit; 143 | height: 44px; 144 | position: relative; 145 | z-index: 1; 146 | margin-top: -10px; 147 | margin-bottom: -10px; 148 | } 149 | 150 | .mfui_select_arrow { 151 | position: relative; 152 | padding-right: 20px; 153 | } 154 | 155 | .mfui_select_arrow:after { 156 | content: " "; 157 | display: inline-block; 158 | -webkit-transform: rotate(45deg); 159 | transform: rotate(45deg); 160 | height: 6px; 161 | width: 6px; 162 | border-width: 2px 2px 0 0; 163 | border-color: #c8c8cd; 164 | border-style: solid; 165 | position: absolute; 166 | margin-left: .3em; 167 | top: 50%; 168 | margin-top: -3px; 169 | right: 8px; 170 | } 171 | 172 | .mfui_list_icon .mfui_select { 173 | width: auto; 174 | } 175 | 176 | .mfui_textarea { 177 | display: block; 178 | border: 0; 179 | resize: none; 180 | width: 100%; 181 | color: inherit; 182 | font-size: 1em; 183 | line-height: inherit; 184 | outline: 0; 185 | } 186 | 187 | .mfui_textarea_counter { 188 | color: #b2b2b2; 189 | text-align: right; 190 | } 191 | -------------------------------------------------------------------------------- /src/dist/css/components/icon.css: -------------------------------------------------------------------------------- 1 | /*手机表单样式*/ 2 | 3 | [class*=" weui_icon_"]:before, 4 | [class^=weui_icon_]:before { 5 | font-family: weui; 6 | font-style: normal; 7 | font-weight: 400; 8 | speak: none; 9 | display: inline-block; 10 | vertical-align: middle; 11 | text-decoration: inherit; 12 | width: 1em; 13 | margin-right: .2em; 14 | text-align: center; 15 | font-variant: normal; 16 | text-transform: none; 17 | line-height: 1em; 18 | margin-left: .2em 19 | } 20 | 21 | .mfui_icon_circle:before { 22 | content: "\EA01" 23 | } 24 | 25 | .mfui_icon_download:before { 26 | content: "\EA02" 27 | } 28 | 29 | .mfui_icon_info:before { 30 | content: "\EA03" 31 | } 32 | 33 | .mfui_icon_safe_success:before { 34 | content: "\EA04" 35 | } 36 | 37 | .mfui_icon_safe_warn:before { 38 | content: "\EA05" 39 | } 40 | 41 | .mfui_icon_success:before { 42 | content: "\EA06" 43 | } 44 | 45 | .mfui_icon_success_circle:before { 46 | content: "\EA07" 47 | } 48 | 49 | .mfui_icon_success_no_circle:before { 50 | content: "\EA08" 51 | } 52 | 53 | .mfui_icon_waiting:before { 54 | content: "\EA09" 55 | } 56 | 57 | .mfui_icon_waiting_circle:before { 58 | content: "\EA0A" 59 | } 60 | 61 | .mfui_icon_warn:before { 62 | content: "\EA0B" 63 | } 64 | 65 | .mfui_icon_info_circle:before { 66 | content: "\EA0C" 67 | } 68 | 69 | .mfui_icon_cancel:before { 70 | content: "\EA0D" 71 | } 72 | 73 | .mfui_icon_search:before { 74 | content: "\EA0E" 75 | } 76 | 77 | .mfui_icon_clear:before { 78 | content: "\EA0F" 79 | } 80 | 81 | [class*=" weui_icon_"]:before, 82 | [class^=weui_icon_]:before { 83 | margin: 0 84 | } 85 | 86 | .mfui_icon_success:before { 87 | font-size: 23px; 88 | color: #09bb07 89 | } 90 | 91 | .mfui_icon_waiting:before { 92 | font-size: 23px; 93 | color: #10aeff 94 | } 95 | 96 | .mfui_icon_warn:before { 97 | font-size: 23px; 98 | color: #f43530 99 | } 100 | 101 | .mfui_icon_info:before { 102 | font-size: 23px; 103 | color: #10aeff 104 | } 105 | 106 | .mfui_icon_success_circle:before, 107 | .mfui_icon_success_no_circle:before { 108 | font-size: 23px; 109 | color: #09bb07 110 | } 111 | 112 | .mfui_icon_waiting_circle:before { 113 | font-size: 23px; 114 | color: #10aeff 115 | } 116 | 117 | .mfui_icon_circle:before { 118 | font-size: 23px; 119 | color: #c9c9c9 120 | } 121 | 122 | .mfui_icon_download:before, 123 | .mfui_icon_info_circle:before { 124 | font-size: 23px; 125 | color: #09bb07 126 | } 127 | 128 | .mfui_icon_safe_success:before { 129 | color: #09bb07 130 | } 131 | 132 | .mfui_icon_safe_warn:before { 133 | color: #ffbe00 134 | } 135 | 136 | .mfui_icon_cancel:before { 137 | color: #f43530; 138 | font-size: 22px 139 | } 140 | 141 | .mfui_icon_clear:before, 142 | .mfui_icon_search:before { 143 | color: #b2b2b2; 144 | font-size: 14px 145 | } 146 | 147 | .mfui_icon_msg:before { 148 | font-size: 104px 149 | } 150 | 151 | .mfui_icon_warn.mfui_icon_msg:before { 152 | color: #f76260 153 | } 154 | 155 | .mfui_icon_safe:before { 156 | font-size: 104px 157 | } 158 | -------------------------------------------------------------------------------- /src/dist/css/components/list.css: -------------------------------------------------------------------------------- 1 | /*手机按钮样式*/ 2 | 3 | .mfui_list_title { 4 | margin-top: .77rem; 5 | margin-bottom: .3rem; 6 | padding-left: 15px; 7 | padding-right: 15px; 8 | color: #888; 9 | font-size: 14px; 10 | } 11 | 12 | .mfui_list_title+.mfui_lists { 13 | margin-top: 0; 14 | } 15 | 16 | .mfui_lists { 17 | margin-top: 1.17rem; 18 | background-color: #fff; 19 | line-height: 1.41176471; 20 | font-size: 17px; 21 | overflow: hidden; 22 | position: relative; 23 | } 24 | 25 | .mfui_lists:after, 26 | .mfui_lists:before { 27 | content: " "; 28 | position: absolute; 29 | left: 0; 30 | width: 100%; 31 | height: 1px; 32 | color: #d9d9d9; 33 | transform: scaleY(.5); 34 | } 35 | 36 | .mfui_lists:before { 37 | top: 0; 38 | border-top: 1px solid #d9d9d9; 39 | transform-origin: 0 0; 40 | } 41 | 42 | .mfui_lists:after { 43 | bottom: 0; 44 | border-bottom: 1px solid #d9d9d9; 45 | transform-origin: 0 100%; 46 | } 47 | 48 | .mfui_lists:before { 49 | top: 0; 50 | border-top: 1px solid #d9d9d9; 51 | -webkit-transform-origin: 0 0; 52 | transform-origin: 0 0; 53 | } 54 | 55 | .mfui_list { 56 | padding: 10px 15px; 57 | position: relative; 58 | display: flex; 59 | align-items: center; 60 | } 61 | 62 | .arrow:before { 63 | font-family: icon; 64 | display: block; 65 | content: '\EA08'; 66 | color: #09bb07; 67 | font-size: 16px; 68 | line-height: 1em; 69 | width: 1em; 70 | } 71 | 72 | .mfui_list:before { 73 | content: " "; 74 | position: absolute; 75 | left: 0; 76 | top: 0; 77 | width: 100%; 78 | height: 1px; 79 | border-top: 1px solid #d9d9d9; 80 | color: #d9d9d9; 81 | -webkit-transform-origin: 0 0; 82 | transform-origin: 0 0; 83 | -webkit-transform: scaleY(.5); 84 | transform: scaleY(.5); 85 | left: 15px; 86 | } 87 | 88 | .mfui_lists_access a.mfui_list { 89 | color: inherit; 90 | } 91 | 92 | .mfui_list_content { 93 | flex: 1; 94 | } 95 | 96 | .mfui_list_other { 97 | text-align: right; 98 | color: #888; 99 | } 100 | 101 | .mfui_lists_access .mfui_list_other:after { 102 | content: " "; 103 | display: inline-block; 104 | -webkit-transform: rotate(45deg); 105 | transform: rotate(45deg); 106 | height: 6px; 107 | width: 6px; 108 | border-width: 2px 2px 0 0; 109 | border-color: #c8c8cd; 110 | border-style: solid; 111 | position: relative; 112 | top: -2px; 113 | top: -1px; 114 | margin-left: .3em; 115 | } 116 | 117 | .mfui_list_icon { 118 | padding-right: .3em; 119 | } 120 | 121 | .mfui_vcode { 122 | padding: 0 0 0 15px; 123 | } 124 | 125 | .mfui_vcode .mfui_list_other img { 126 | margin-left: 5px; 127 | height: 44px; 128 | vertical-align: middle; 129 | } 130 | 131 | .mfui_cell_warn { 132 | color: #e64340; 133 | } 134 | 135 | .mfui_panel_title { 136 | padding: 3px 0; 137 | color: #999; 138 | font-size: 13px; 139 | position: relative; 140 | } 141 | -------------------------------------------------------------------------------- /src/dist/css/components/reset.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | html { 3 | -webkit-text-size-adjust: 100%; 4 | -ms-text-size-adjust: 100%; 5 | } 6 | 7 | body, 8 | div, 9 | dl, 10 | dt, 11 | dd, 12 | ul, 13 | ol, 14 | li, 15 | h1, 16 | h2, 17 | h3, 18 | h4, 19 | h5, 20 | h6, 21 | pre, 22 | code, 23 | form, 24 | fieldset, 25 | legend, 26 | input, 27 | textarea, 28 | p, 29 | blockquote, 30 | th, 31 | td, 32 | hr, 33 | button, 34 | article, 35 | aside, 36 | details, 37 | figcaption, 38 | figure, 39 | footer, 40 | header, 41 | hgroup, 42 | menu, 43 | nav, 44 | section { 45 | margin: 0; 46 | padding: 0; 47 | } 48 | 49 | article, 50 | aside, 51 | details, 52 | figcaption, 53 | figure, 54 | footer, 55 | header, 56 | hgroup, 57 | menu, 58 | nav, 59 | section { 60 | display: block; 61 | } 62 | 63 | audio, 64 | canvas, 65 | video { 66 | display: inline-block; 67 | *display: inline; 68 | *zoom: 1; 69 | } 70 | 71 | body, 72 | button, 73 | input, 74 | select, 75 | textarea { 76 | font: 12px/1.5 "微软雅黑"; 77 | } 78 | 79 | input, 80 | select, 81 | textarea { 82 | font-size: 100%; 83 | } 84 | 85 | table { 86 | border-collapse: collapse; 87 | border-spacing: 0; 88 | } 89 | 90 | th { 91 | text-align: inherit; 92 | } 93 | 94 | fieldset, 95 | img { 96 | border: 0; 97 | } 98 | 99 | iframe { 100 | display: block; 101 | } 102 | 103 | abbr, 104 | acronym { 105 | border: 0; 106 | font-variant: normal; 107 | } 108 | 109 | del { 110 | text-decoration: line-through; 111 | } 112 | 113 | address, 114 | caption, 115 | cite, 116 | code, 117 | dfn, 118 | em, 119 | th, 120 | var { 121 | font-style: normal; 122 | font-weight: 500; 123 | } 124 | 125 | ol, 126 | ul { 127 | list-style: none; 128 | } 129 | 130 | 131 | /* 对齐是排版最重要的因素, 别让什么都居中 */ 132 | 133 | caption, 134 | th { 135 | text-align: left; 136 | } 137 | 138 | h1, 139 | h2, 140 | h3, 141 | h4, 142 | h5, 143 | h6 { 144 | font-size: 100%; 145 | font-weight: 500; 146 | } 147 | 148 | q:before, 149 | q:after { 150 | content: ''; 151 | } 152 | 153 | sub, 154 | sup { 155 | font-size: 75%; 156 | line-height: 0; 157 | position: relative; 158 | vertical-align: baseline; 159 | } 160 | 161 | sup { 162 | top: -0.5em; 163 | } 164 | 165 | sub { 166 | bottom: -0.25em; 167 | } 168 | 169 | a:hover { 170 | text-decoration: underline; 171 | } 172 | 173 | ins, 174 | a { 175 | text-decoration: none; 176 | } 177 | 178 | body { 179 | background-color: #fbf9fe; 180 | overflow-x: hidden; 181 | } 182 | 183 | @font-face { 184 | font-weight: 400; 185 | font-style: normal; 186 | font-family: icon; 187 | src: url('data:application/octet-stream;base64,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') format('truetype') 188 | } 189 | -------------------------------------------------------------------------------- /src/dist/css/components/style.css: -------------------------------------------------------------------------------- 1 | /*载入初始样式*/ 2 | 3 | @import url(./reset.css); 4 | 5 | /*button样式*/ 6 | 7 | @import url(./button.css); 8 | 9 | /*list样式*/ 10 | 11 | @import url(./list.css); 12 | 13 | /*form样式*/ 14 | 15 | @import url(./form.css); 16 | 17 | /*icon样式*/ 18 | 19 | @import url(./icon.css); 20 | -------------------------------------------------------------------------------- /src/dist/css/components/组件样式目录.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aemoe/webpack-react-framework/87c055743dd3cf69b6df47008c688b91c3ba82c1/src/dist/css/components/组件样式目录.txt -------------------------------------------------------------------------------- /src/dist/css/css资源目录.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aemoe/webpack-react-framework/87c055743dd3cf69b6df47008c688b91c3ba82c1/src/dist/css/css资源目录.txt -------------------------------------------------------------------------------- /src/dist/css/temp.css: -------------------------------------------------------------------------------- 1 | .timeWrap { 2 | padding: 10px; 3 | color: #333; 4 | font-size: 18px; 5 | ul { 6 | list-style: none; 7 | text-align: center; 8 | li { 9 | display: inline-block; 10 | button { 11 | width: 40px; 12 | font-size: 20px; 13 | color: #fff; 14 | height: 40px; 15 | background: #999; 16 | border-radius: 50%; 17 | border: none; 18 | outline: none; 19 | margin-right: 10px; 20 | } 21 | } 22 | } 23 | } 24 | 25 | .timeNum { 26 | text-align: center; 27 | } 28 | -------------------------------------------------------------------------------- /src/dist/data/data.json: -------------------------------------------------------------------------------- 1 | [{ 2 | 'order':1, 3 | 'content':'这是一条新闻', 4 | 'date':new Date() 5 | },{ 6 | 'order':2, 7 | 'content':'这是一条新闻', 8 | 'date':new Date() 9 | },{ 10 | 'order':3, 11 | 'content':'这是一条新闻', 12 | 'date':new Date() 13 | },{ 14 | 'order':4, 15 | 'content':'这是一条新闻', 16 | 'date':new Date() 17 | }]; -------------------------------------------------------------------------------- /src/dist/img/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aemoe/webpack-react-framework/87c055743dd3cf69b6df47008c688b91c3ba82c1/src/dist/img/bg.jpg -------------------------------------------------------------------------------- /src/dist/img/icons/icon_checkbox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aemoe/webpack-react-framework/87c055743dd3cf69b6df47008c688b91c3ba82c1/src/dist/img/icons/icon_checkbox.png -------------------------------------------------------------------------------- /src/dist/img/icons/icon_checkboxActive.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aemoe/webpack-react-framework/87c055743dd3cf69b6df47008c688b91c3ba82c1/src/dist/img/icons/icon_checkboxActive.png -------------------------------------------------------------------------------- /src/dist/img/icons/icon_right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aemoe/webpack-react-framework/87c055743dd3cf69b6df47008c688b91c3ba82c1/src/dist/img/icons/icon_right.png -------------------------------------------------------------------------------- /src/dist/img/icons/图标资源路径.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aemoe/webpack-react-framework/87c055743dd3cf69b6df47008c688b91c3ba82c1/src/dist/img/icons/图标资源路径.txt -------------------------------------------------------------------------------- /src/dist/img/svg/SVG资源目录.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aemoe/webpack-react-framework/87c055743dd3cf69b6df47008c688b91c3ba82c1/src/dist/img/svg/SVG资源目录.txt -------------------------------------------------------------------------------- /src/dist/img/vcode.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aemoe/webpack-react-framework/87c055743dd3cf69b6df47008c688b91c3ba82c1/src/dist/img/vcode.jpg -------------------------------------------------------------------------------- /src/dist/img/图片资源目录.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aemoe/webpack-react-framework/87c055743dd3cf69b6df47008c688b91c3ba82c1/src/dist/img/图片资源目录.txt -------------------------------------------------------------------------------- /src/dist/js/JS开发目录.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aemoe/webpack-react-framework/87c055743dd3cf69b6df47008c688b91c3ba82c1/src/dist/js/JS开发目录.txt -------------------------------------------------------------------------------- /src/dist/js/button.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import ReactDOM, { render } from 'react-dom'; 3 | import button from '../plugins/components/button/'; 4 | import icon from '../plugins/components/icon/'; 5 | 6 | const { Button, ButtonArea } = button; 7 | const { Icon } = icon; 8 | 9 | class FormDemo extends Component { 10 | render() { 11 | return ( 12 |
13 | {/*表单输入框*/} 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
32 |
33 | 34 | ); 35 | } 36 | } 37 | 38 | render(, document.getElementById('demo')); 39 | -------------------------------------------------------------------------------- /src/dist/js/form.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import ReactDOM, { render } from 'react-dom'; 3 | import list from '../plugins/components/list/'; 4 | import form from '../plugins/components/form/'; 5 | 6 | import vsCode from './../img/vcode.jpg'; 7 | 8 | const { ListTitle, Lists, List, ListContent, ListOther, ListIcon } = list; 9 | const { Label, Input, Select, Textarea } = form; 10 | 11 | class FormDemo extends Component { 12 | render() { 13 | return ( 14 |
15 | {/*表单输入框*/} 16 | 表单输入框 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | {/*带选择的表单输入框*/} 50 | 带选择的表单输入框 51 | 52 | 53 | 54 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 国家/地区 68 | 69 | 70 | 74 | 75 | 76 | 77 | 78 | 82 | 83 | 84 | 85 | {/*文本域*/} 86 | 文本域 87 | 88 | 89 | 90 | 45 | { 46 | showCounter ? 47 |
48 | {this.state.textCounter}{maxlength ? '/' + maxlength : false} 49 |
50 | : false 51 | } 52 |
53 | ); 54 | } 55 | }; 56 | -------------------------------------------------------------------------------- /src/dist/plugins/components/form/index.js: -------------------------------------------------------------------------------- 1 | import Radio from './Radio'; 2 | import Checkbox from './Checkbox'; 3 | import Switch from './Swith'; 4 | import Label from './Label'; 5 | import Input from './Input'; 6 | import Select from './Select'; 7 | import Textarea from './Textarea'; 8 | 9 | export default { 10 | Radio, 11 | Checkbox, 12 | Switch, 13 | Label, 14 | Input, 15 | Select, 16 | Textarea 17 | }; 18 | -------------------------------------------------------------------------------- /src/dist/plugins/components/icon/Icon.js: -------------------------------------------------------------------------------- 1 | import React, { Component, PropTypes } from 'react'; 2 | import ReactDOM, { render } from 'react-dom'; 3 | import classNames from 'classnames'; 4 | import Viewport from '../../lib/viewport.js'; 5 | import Style from '../../../css/components/style.css'; 6 | 7 | export default class Icon extends Component { 8 | static propTypes = { 9 | value: PropTypes.string, 10 | size: PropTypes.string 11 | }; 12 | 13 | static defaultProps = { 14 | value: 'success', 15 | size: 'small' 16 | }; 17 | 18 | render() { 19 | const { value, size, className, ...others } = this.props; 20 | const cls = classNames({ 21 | ['mfui_icon_' + value]: true, 22 | mfui_icon_msg: size === 'large', 23 | [className]: className 24 | }); 25 | 26 | if (value === 'loading') { 27 | return ( 28 |
29 | { 30 | [...Array(12)].map((x, i) => { 31 | return ( 32 |
33 | ); 34 | }) 35 | } 36 |
37 | ); 38 | } else { 39 | return ( 40 | 41 | ); 42 | } 43 | } 44 | }; 45 | -------------------------------------------------------------------------------- /src/dist/plugins/components/icon/index.js: -------------------------------------------------------------------------------- 1 | import Icon from './icon'; 2 | 3 | export default { 4 | Icon 5 | }; 6 | -------------------------------------------------------------------------------- /src/dist/plugins/components/list/List.js: -------------------------------------------------------------------------------- 1 | import React, { Component, PropTypes } from 'react'; 2 | import ReactDOM, { render } from 'react-dom'; 3 | import classNames from 'classnames'; 4 | import Viewport from '../../lib/viewport.js'; 5 | import Style from '../../../css/components/style.css'; 6 | 7 | export default class List extends Component { 8 | static propTypes = { 9 | vcode: PropTypes.bool, 10 | warn: PropTypes.bool 11 | }; 12 | 13 | static defaultProps = { 14 | vcode: false, 15 | warn: false 16 | }; 17 | 18 | render() { 19 | const { className, children, ...others } = this.props; 20 | const Component = this.props.href ? 'a' : this.props.htmlFor ? 'label' : 'div'; 21 | const style = classNames({ 22 | mfui_list: true, 23 | mfui_vcode: this.props.vcode, 24 | mfui_cell_warn: this.props.warn, 25 | [className]: className 26 | }); 27 | return ( 28 | {children} 29 | ); 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/dist/plugins/components/list/ListContent.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import ReactDOM, { render } from 'react-dom'; 3 | import classNames from 'classnames'; 4 | import Viewport from '../../lib/viewport.js'; 5 | import Style from '../../../css/components/style.css'; 6 | 7 | export default class ListContent extends Component { 8 | render() { 9 | const { className, children, ...others } = this.props; 10 | const style = classNames({ 11 | mfui_list_content: true, 12 | [className]: className 13 | }); 14 | return ( 15 |
{children}
16 | ); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/dist/plugins/components/list/ListIcon.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import ReactDOM, { render } from 'react-dom'; 3 | import classNames from 'classnames'; 4 | import Viewport from '../../lib/viewport.js'; 5 | import Style from '../../../css/components/style.css'; 6 | 7 | export default class ListIcon extends Component { 8 | render() { 9 | const { className, children, ...others } = this.props; 10 | const style = classNames({ 11 | mfui_list_icon: true, 12 | [className]: className 13 | }); 14 | return ( 15 |
{children}
16 | ); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/dist/plugins/components/list/ListOther.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import ReactDOM, { render } from 'react-dom'; 3 | import classNames from 'classnames'; 4 | import Viewport from '../../lib/viewport.js'; 5 | import Style from '../../../css/components/style.css'; 6 | 7 | export default class ListOther extends Component { 8 | render() { 9 | const { className, children, ...others } = this.props; 10 | const style = classNames({ 11 | mfui_list_other: true, 12 | [className]: className 13 | }); 14 | return ( 15 |
{children}
16 | ); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/dist/plugins/components/list/ListTitle.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import ReactDOM, { render } from 'react-dom'; 3 | import classNames from 'classnames'; 4 | import Viewport from '../../lib/viewport.js'; 5 | import Style from '../../../css/components/style.css'; 6 | 7 | export default class ListTitle extends Component { 8 | render() { 9 | const { className, children, ...others } = this.props; 10 | const style = classNames({ 11 | mfui_list_title: true, 12 | [className]: className 13 | }); 14 | return ( 15 |
{children}
16 | ); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/dist/plugins/components/list/Lists.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import ReactDOM, { render } from 'react-dom'; 3 | import classNames from 'classnames'; 4 | import Viewport from '../../lib/viewport.js'; 5 | import Style from '../../../css/components/style.css'; 6 | 7 | export default class Lists extends Component { 8 | static propTypes = { 9 | radio: React.PropTypes.bool, 10 | checkbox: React.PropTypes.bool 11 | }; 12 | 13 | static defaultProps = { 14 | radio: false, 15 | checkbox: false 16 | }; 17 | 18 | render() { 19 | const { children, className, link, radio, checkbox, ...others } = this.props; 20 | const cls = classNames({ 21 | mfui_lists: true, 22 | mfui_lists_access: link, 23 | [className]: className 24 | }); 25 | 26 | return ( 27 |
{children}
28 | ); 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/dist/plugins/components/list/PanelContent.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import ReactDOM, { render } from 'react-dom'; 3 | import classNames from 'classnames'; 4 | import Viewport from '../../lib/viewport.js'; 5 | import Style from '../../../css/components/style.css'; 6 | 7 | export default class ListContent extends Component { 8 | render() { 9 | const { className, children, ...others } = this.props; 10 | const style = classNames({ 11 | mfui_panel_content: true, 12 | [className]: className 13 | }); 14 | return ( 15 |
{children}
16 | ); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/dist/plugins/components/list/PanelTitle.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import ReactDOM, { render } from 'react-dom'; 3 | import classNames from 'classnames'; 4 | import Viewport from '../../lib/viewport.js'; 5 | import Style from '../../../css/components/style.css'; 6 | 7 | export default class PanelTitle extends Component { 8 | render() { 9 | const { className, children, ...others } = this.props; 10 | const style = classNames({ 11 | mfui_panel_title: true, 12 | [className]: className 13 | }); 14 | return ( 15 |
{children}
16 | ); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/dist/plugins/components/list/demo.js: -------------------------------------------------------------------------------- 1 | const a = { a: 1 }; 2 | const b = 1; 3 | export default { 4 | a, 5 | b 6 | } 7 | -------------------------------------------------------------------------------- /src/dist/plugins/components/list/index.js: -------------------------------------------------------------------------------- 1 | import Lists from './Lists'; 2 | import List from './List'; 3 | import ListTitle from './ListTitle'; 4 | import ListContent from './ListContent'; 5 | import ListOther from './ListOther'; 6 | import ListIcon from './ListIcon'; 7 | import PanelTitle from './PanelTitle'; 8 | import PanelContent from './PanelContent'; 9 | 10 | export default { 11 | ListTitle, 12 | Lists, 13 | List, 14 | ListContent, 15 | ListOther, 16 | ListIcon, 17 | PanelTitle, 18 | PanelContent 19 | }; 20 | -------------------------------------------------------------------------------- /src/dist/plugins/components/自编辑组件目录.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aemoe/webpack-react-framework/87c055743dd3cf69b6df47008c688b91c3ba82c1/src/dist/plugins/components/自编辑组件目录.txt -------------------------------------------------------------------------------- /src/dist/plugins/lib/viewport.js: -------------------------------------------------------------------------------- 1 | (function(doc, win) { 2 | 3 | var docEl = doc.documentElement, 4 | resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', 5 | recalc = function() { 6 | var clientWidth = docEl.clientWidth; 7 | if (!clientWidth) return; 8 | docEl.style.fontSize = 40 * (clientWidth / 720) + 'px'; 9 | }; 10 | if (!doc.addEventListener) return; 11 | win.addEventListener(resizeEvt, recalc, true); 12 | doc.addEventListener('DOMContentLoaded', recalc, false); 13 | 14 | })(document, window); 15 | -------------------------------------------------------------------------------- /src/dist/scss/components/组件样式目录.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aemoe/webpack-react-framework/87c055743dd3cf69b6df47008c688b91c3ba82c1/src/dist/scss/components/组件样式目录.txt -------------------------------------------------------------------------------- /src/dist/scss/scss资源目录.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aemoe/webpack-react-framework/87c055743dd3cf69b6df47008c688b91c3ba82c1/src/dist/scss/scss资源目录.txt -------------------------------------------------------------------------------- /src/dist/tmpl/模板存放目录.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aemoe/webpack-react-framework/87c055743dd3cf69b6df47008c688b91c3ba82c1/src/dist/tmpl/模板存放目录.txt -------------------------------------------------------------------------------- /src/form.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 表单 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/home/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 首页 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/icon.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 列表 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 首页 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/list.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 列表 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/redux.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 首页 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | --------------------------------------------------------------------------------