首页 > React-Mi

react免安装,React-Mi

互联网 2020-09-28 14:38:18

From 5b1793c99f409b25018c1e4d4afcb7169f89db6e Mon Sep 17 00:00:00 2001From: kunkun Date: Wed, 9 Mar 2016 17:32:40 +0800Subject: [PATCH] first commit--- .babelrc| 3 + .gitignore|12 + README.md | 5 + gulpfile.js |48 +++ package.json|42 ++ source/components/App.js|20 + source/components/HeadSwiper.jsx|48 +++ source/components/Index.jsx |22 ++ source/components/Sections.jsx|43 ++ source/components/css.sass|73 ++++ source/components/footer.js |60 +++ source/components/footer.sass |59 +++ source/images/footer_cart.png | Bin 0 -> 495 bytes source/images/footer_cart_on.png| Bin 0 -> 511 bytes source/images/footer_class.png| Bin 0 -> 519 bytes source/images/footer_class_on.png | Bin 0 -> 699 bytes source/images/footer_service.png| Bin 0 -> 681 bytes source/images/footer_service_on.png | Bin 0 -> 730 bytes source/images/footer_shop.png | Bin 0 -> 515 bytes source/images/footer_shop_on.png| Bin 0 -> 581 bytes source/index.html |39 ++ source/main.js| 6 + source/sass/base.sass |42 ++ source/test.js| 581 ++++++++++++++++++++++++++++ webpack.js|64 +++ 25 files changed, 1167 insertions(+) create mode 100644 .babelrc create mode 100644 .gitignore create mode 100644 README.md create mode 100644 gulpfile.js create mode 100644 package.json create mode 100644 source/components/App.js create mode 100644 source/components/HeadSwiper.jsx create mode 100644 source/components/Index.jsx create mode 100644 source/components/Sections.jsx create mode 100644 source/components/css.sass create mode 100644 source/components/footer.js create mode 100644 source/components/footer.sass create mode 100644 source/images/footer_cart.png create mode 100644 source/images/footer_cart_on.png create mode 100644 source/images/footer_class.png create mode 100644 source/images/footer_class_on.png create mode 100644 source/images/footer_service.png create mode 100644 source/images/footer_service_on.png create mode 100644 source/images/footer_shop.png create mode 100644 source/images/footer_shop_on.png create mode 100644 source/index.html create mode 100644 source/main.js create mode 100644 source/sass/base.sass create mode 100644 source/test.js create mode 100644 webpack.jsdiff --git a/.babelrc b/.babelrcnew file mode 100644index 0000000..93fbaa3--- /dev/null+++ b/.babelrc@@ -0,0 +1,3 @@+{+"presets": ["es2015", "stage-0", "react"]+}\ No newline at end of filediff --git a/.gitignore b/.gitignorenew file mode 100644index 0000000..533693b--- /dev/null+++ b/.gitignore@@ -0,0 +1,12 @@+.DS_Store+.sass-cache+node_modules/+build/+*.swp+*.swo+*.swn+.idea+scripts/*+.sass-cache+npm-debug.log+ftp/*diff --git a/README.md b/README.mdnew file mode 100644index 0000000..aeebefa--- /dev/null+++ b/README.md@@ -0,0 +1,5 @@++* 运行 `npm install` 安装依赖+* 开发环境运行 `gulp` 支持热更新+* 生产环境 `gulp pro` 生成的生产环境代码在build目录下+* 里面中用到的相关数据均为模拟测试数据。diff --git a/gulpfile.js b/gulpfile.jsnew file mode 100644index 0000000..7562eac--- /dev/null+++ b/gulpfile.js@@ -0,0 +1,48 @@+var gulp = require("gulp");+var gutil = require("gulp-util");+var webpack = require("webpack");+var path = require('path');+var node_modules = path.resolve(__dirname, 'node_modules');+var HtmlWebpackPlugin = require('html-webpack-plugin');+var WebpackDevServer = require("webpack-dev-server");+var webpackConfig = require("./webpack.js");+var gulpWebpack = require('webpack-stream');+var clean = require('gulp-clean');+++gulp.task("debug", function(callback) {+webpackConfig.entry.unshift('webpack/hot/only-dev-server')+webpackConfig.entry.unshift("webpack-dev-server/client?http://0.0.0.0:8080");+webpackConfig.module.loaders[0].loaders.unshift('react-hot');+webpackConfig.plugins.unshift(new webpack.HotModuleReplacementPlugin())+ new WebpackDevServer(webpack(webpackConfig,function(err,state){+console.log(state)+}),{+hot: true,+stats: { colors: true },+contentBase:"build"+}).listen(8080, "0.0.0.0", function(err) {+if(err) throw new gutil.PluginError("webpack-dev-server", err);+else gutil.log("[webpack-dev-server]", "http://localhost:8080/build/index.html");+});++});++gulp.task("clean",function(){+gulp.src('build', {read: false}).pipe(clean());+})+gulp.task("build",function(){+webpackConfig.output.filename="[name][hash].js"+webpackConfig.plugins.unshift(new webpack.HotModuleReplacementPlugin())+webpackConfig.plugins.unshift(new webpack.optimize.UglifyJsPlugin({+compress: {warnings: false}+}));+webpack(webpackConfig,function(err,state){+console.log(state)+})+});++gulp.task("pro",["clean",'build']);+gulp.task("default", ["debug"]);++diff --git a/package.json b/package.jsonnew file mode 100644index 0000000..67d083a--- /dev/null+++ b/package.json@@ -0,0 +1,42 @@+{+"name": "react-mishop",+"version": "1.0.0",+"description": "",+"main": "index.js",+"scripts": {+"test": "echo \"Error: no test specified\" && exit 1",+"build": "webpack-dev-server --devtool eval --progress --colors --hot --host 0.0.0.0 --display-error-details"+},+"author": "",+"license": "ISC",+"dependencies": {+"gulp": "^3.9.1",+"gulp-util": "^3.0.7",+"react": "^0.14.7",+"react-dom": "^0.14.7",+"react-swipe": "^4.0.1",+"swipe-js-iso": "^2.0.2",+"webpack-stream": "^3.1.0"+},+"devDependencies": {+"babel-core": "^6.5.2",+"babel-loader": "^6.2.3",+"babel-preset-es2015": "^6.5.0",+"babel-preset-react": "^6.5.0",+"babel-preset-stage-0": "^6.5.0",+"compass-mixins": "^0.12.7",+"css-loader": "^0.23.1",+"file-loader": "^0.8.5",+"gulp-clean": "^0.3.2",+"html-loader": "^0.4.3",+"html-webpack-plugin": "^2.9.0",+"jade": "^1.11.0",+"jade-html-loader": "0.0.3",+"node-sass": "^3.4.2",+"react-hot-loader": "^1.3.0",+"sass-loader": "^3.1.2",+"style-loader": "^0.13.0",+"url-loader": "^0.5.7",+"webpack-dev-server": "^1.14.1"+}+}diff --git a/source/components/App.js b/source/components/App.jsnew file mode 100644index 0000000..c6ee824--- /dev/null+++ b/source/components/App.js@@ -0,0 +1,20 @@+import {} from '../sass/base.sass';+import React from 'react';+import Index from './Index'+import Data from '../test.js'+class App extends React.Component {+ constructor(props) {+super(props);+this.state=Data;+}+render() {+return (+ ++ +);+}+}+ ++export default App;\ No newline at end of filediff --git a/source/components/HeadSwiper.jsx b/source/components/HeadSwiper.jsxnew file mode 100644index 0000000..2aa900e--- /dev/null+++ b/source/components/HeadSwiper.jsx@@ -0,0 +1,48 @@+import React from 'react';+import ReactSwipe from 'react-swipe'+import css from "./css.sass"+class HeadSwiper extends React.Component {++ constructor(props) {+super(props);+this.state={+selectindex:0,+swipecount:this.props.swipedata.length+}+}+swipechanges(e){+var index=e%this.state.swipecount;+this.setState({+selectindex:index+})+}+render() {+var swipes=[];+var swipestyle={+height:"3.6rem",+width:"7.2rem"+},+swipeimg={+width: "100%"+};+var navs=[];+this.props.swipedata.forEach((i,b)=>{+swipes.push()+navs.push();+});+return (+++{swipes}+++{navs}++++);+}+}+ ++export default HeadSwiper;\ No newline at end of filediff --git a/source/components/Index.jsx b/source/components/Index.jsxnew file mode 100644index 0000000..f1fef4e--- /dev/null+++ b/source/components/Index.jsx@@ -0,0 +1,22 @@+import React from 'react';+import HeadSwiper from './HeadSwiper'+import Sections from './Sections'+import Footer from './Footer'+class Index extends React.Component {+constructor(props) {+super(props);+this.state=this.props;+}+render() {+return (+ + + + + +);+}+}+ ++export default Index;diff --git a/source/components/Sections.jsx b/source/components/Sections.jsxnew file mode 100644index 0000000..4fd4824--- /dev/null+++ b/source/components/Sections.jsx@@ -0,0 +1,43 @@+import React from 'react';+import ReactSwipe from 'react-swipe'+import css from "./css.sass"++export default class Sections extends React.Component {+ constructor(props) {+super(props);+}+render() {+var items=this.props.Sections.map((item,i)=>{+var items=item.body.items;+returnitems.map(function(a,b){+return(+++{+a.product_tag?:""+}++++

{a.product_name}

++ +

{a.product_brief}

+++

{a.product_price}

+++)+})+});+return (+++{items}+++);+}+}+ diff --git a/source/components/css.sass b/source/components/css.sassnew file mode 100644index 0000000..974a9ec--- /dev/null+++ b/source/components/css.sass@@ -0,0 +1,73 @@+@import "compass/utilities"+@import "compass/css3"+.indexpage+padding-bottom: 0.8rem+.swapwrap+position: relative;+.swipe-nav+position: absolute+bottom: 0.1rem+left: 0+right: 0+display: box+display: -webkit-box+box-align: center+-webkit-box-align: center+box-pack: center+-webkit-box-pack: center+li+width: .8em+height: .8em+margin: 0 (8em/20)++border-radius((20em/20))+background: #e5e5e5+opacity: .8+&.on+background: #ccc+.HeadSwiper+position: relative++.list+-webkit-transform: translate3d(0,0,0)+.item+display: box+display: -webkit-box+box-align: center+-webkit-box-align: center+padding: (30rem/100) 0+border-bottom: 1px solid #F2F2F2+.section+&:last-child+.item+border: none+.info+-webkit-box-flex: 1+box-flex: 1+width: 100%+margin-right: (20rem/100)+.img+width: (254rem/100)+height: (145rem/100)+position: relative+.ico+width: 100%+.tag+position: absolute+width: (120rem/100)+height: (120rem/100)+bottom: 0+left: (10rem/100)+opacity: .9 !important+z-index: 2+.name+font-size: (30rem/100)+color: #000+margin-bottom: (10rem/100)+.brief+font-size: (26rem/100)+line-height: (34rem/100)+color: #969696+margin-bottom: (12rem/100)+.price+font-size: (28rem/100)+color: #FE4900diff --git a/source/components/footer.js b/source/components/footer.jsnew file mode 100644index 0000000..ad844f4--- /dev/null+++ b/source/components/footer.js@@ -0,0 +1,60 @@+import React from 'react';+import ReactSwipe from 'react-swipe'+import css from "./footer.sass"++export default class Footer extends React.Component {+constructor(props) {+super(props);+}+render() {+return ( +++ + + + +

+ 商城+

+ +++++ + + +

+ 分类+

+ +++++ + + +

+ 购物车+

+ +++++ + + +

+ 服务+

+ ++++ +);+}+}\ No newline at end of filediff --git a/source/components/footer.sass b/source/components/footer.sassnew file mode 100644index 0000000..017689c--- /dev/null+++ b/source/components/footer.sass@@ -0,0 +1,59 @@+@import "compass/utilities"+@import "compass/css3"+++.footer+position: fixed+bottom: 0+left: 0+right: 0+background: #FFF+z-index: 99+border-top: 1px solid #e0e0e0+ul+display: box+display: -webkit-box+box-align: center+-webkit-box-align: center+box-pack: center+-webkit-box-pack: center+.nav+.ispr+width: (40rem/100)+height: (40rem/100)++background-size((40rem/100) (40rem/100))+overflow: hidden+margin: 0 auto (8rem/100)+&.ih+background-image: url("../images/footer_shop.png")+&.ic+background-image: url("../images/footer_class.png")+&.is+background-image: url("../images/footer_cart.png")+&.if+background-image: url("../images/footer_service.png")+p+font-size: (22rem/100)+line-height: 0.8+color: #999999+li+-webkit-box-flex: 1+box-flex: 1+width: 100%+text-align: center+&>a+display: block+padding: (12rem/100) 0+// &.on+// .nav+// p+// color: #FF5722+// .ispr+// &.ih+// background-position-y: -(240rem/100)+// &.ic+// background-position-y: 0+// &.is+// background-position-y: -(80rem/100)+// &.if+// background-position-y: -(160rem/100)\ No newline at end of filediff --git a/source/images/footer_cart.png b/source/images/footer_cart.pngnew file mode 100644index 0000000000000000000000000000000000000000..0bd5a28d204c91038d6340518e9e4bc34a36d3b4GIT binary patchliteral 495zcmVPszJd%DQHm`}d@PPnWsGyU@_HD5PLOsjOc}md(!zvvgVV@cTuB%GR17sE8knYY*l0ov9SzEDy8#N;XAY74Rl0+7bH+{gHsWN~Hs=M9M53!;$#hv)zR002ovPDHLkV1nXc?k)fTliteral 0HcmV?d00001diff --git a/source/images/footer_cart_on.png b/source/images/footer_cart_on.pngnew file mode 100644index 0000000000000000000000000000000000000000..01e9f08a9bcc73ce884ca717752c34c1edb2e992GIT binary patchliteral 511zcmVzY5@J=&j0l5_k=0-bPxQ>r2qHv`JPt!y_NZ-WB7|T{MEJhlScZpd;aX+{n)(x&a3#dzhWCCU{oKR(taACNYX0!$_IVlq=hgeYjQ5gJl`Q?+0004INkl;`EOPk&|Fgwt%ZQORz3EK*+;H^`IqWW|KdC#eRqurjYuQi2`n_;^`eJ}mh3X*Ey^okKqJ#$f_NSRIv>=NL5eT1gS)AX=JQ=Vh$@2zXF_0r!?W;+kEC@6B#du3?DKZ+kzM|oQ6kVPkCuJCe-`bly|XB+Hl0M$j$T0KCz)EHBg-!r10d-46{dOc$!%VL(*PN^|@b-q`Np*?o#fDwgH^sZcDck#n=%ooi;5^lM;zGQU12irbKxWWC{@G2_ytx4kzMl5p()8!q5h?>1{mWxdgkpIPflInhkl7Z0-Io*}cEzEV_RQTH8V`9Yz{3_c!GkkX1@5sq$pqr}e1*eE^??4_g^$H-i8G002ovPDHLkV1hP>B1W5n@literal 0HcmV?d00001diff --git a/source/images/footer_class.png b/source/images/footer_class.pngnew file mode 100644index 0000000000000000000000000000000000000000..1b5e9dead26dcc548a4673e9671ea19c680dd0ecGIT binary patchliteral 519zcmV+i0{H!jP)8}fMM(gId3OJ+9UQ4OEunQ1jnt9mekI5U-^eyWT@+SxK;em9z({e}|mkL-wwyqaM3!QhS%il1U9ad*`)#0K5Q1Id*;5j3O3ojL#j002ovJPDHLkV1hEa`Y!+gliteral 0HcmV?d00001diff --git a/source/images/footer_class_on.png b/source/images/footer_class_on.pngnew file mode 100644index 0000000000000000000000000000000000000000..5aefc7d33a507b11e0d4f9d9ce33e5de0e4d11ebGIT binary patchliteral 699zcmV;s0!00ZP)iWiTLAs!(Dq~i{LZWQmv{M`Q}~ND^;7`QL~ZZ?|BHjzPA-6uSp*&j(wFr8~#>y2Bzc(DxZ57N&e7}9W(QOyf>PIF#c-=KF4_fOpxROnsEZwwnzvSgUR4E&C&S-Ssbc-R!}B%4H?rm2)^(R@A9002ovPDHLkV1jkIXy^a{literal 0HcmV?d00001diff --git a/source/images/footer_service.png b/source/images/footer_service.pngnew file mode 100644index 0000000000000000000000000000000000000000..7c3b8a110489f2240c34769df87f8e700d062fe6GIT binary patchliteral 681zcmV;a0#^NrP)dL_t(Y$CXywmct+jY(>F)^8a7EhHY0}v7|ior0NKaBly@FBA8|X`1sNw9X`{uz8D)PY_yTIGdrs!6x$Cvi3uBwTKB?UD9*J?;pUE^!r_Yw*QH5gRg+AdhmOO7*Pzl*xzUQ75t9?Iq2fr_OlXQQC;!nzHyh9~!tU-^32hUKrkce9BDQ&wv?qr`Oyr)k&iz9CFAw+(c{NfV24!N=+V^h+Hej`V%@|SyrtLV=?o;|6+djG=t@DDelgrA+Fvro!odlzzVlh5?h|3Em2H533wFmFDH%J;8|u4b;bc^hKzSQ+|h>&Cvr+$LB6x&_8MoLej36V31-#=^=29jMU7PN?FtrA}EOhJy4cv@9?M>oyCLz`-nEw@BL1o1RpL{LFIMmaC>XKu7D~gylyK87vw%-gQ_4acBQyPw9PF_>15EsK!WQ)zn&VysDeRvly6Z!V8Vo3A3~*0d#bxgpOWZ8a!Y?c>2X)t$!$R|wy@dD!4=@o43WkUNP00000NkvXXu0mjfQBYG3literal 0HcmV?d00001diff --git a/source/images/footer_service_on.png b/source/images/footer_service_on.pngnew file mode 100644index 0000000000000000000000000000000000000000..2fd765ac97a1f774e44db922315d88fcb5c686e6GIT binary patchliteral 730zcmV^{I^n-$Rk9ipS=O+?~y$h9*?%{Gq>(X=S#|-QGYBMh$(E9Y?!xcp2;KtoT!j>$Z6Q9uTz>5~iBc@&1ccHjykQ#mkBQ)s$u+~u)2uPuC#kr?D?;T58DvhYA+Eg394#pB7sMLaG7zmD3c==6>a)fwK&}O>(sG2Jbna&8B>BZ5F;N9Aq|>^z-^SgPk2m}_eD$0?ekX+&mej;JS*S!`R=?n?j2dWndxSwY+!F{aEyX7Nl_Eq(}Vdz-P}h?#jRJ_ns%xj_H8GrL4nA_-YHqNzd#7Yu?Vr!%;@8UPXD1qQC)q59t1^hWYZE3?#9%&yGYt>odi6f8}fM1wKcB#{6A+9j;$sDu?xp1M*;YD-NI*aNY;e5SPb`Z2r_zZBN;Qi;ibG8&zcLbhpWwF(}S1TEHypBX30fJ(`;-q#$-FLPro-D>dZMFNRD!b)h>jxdH5DdI?^_&0z002ovPDHLkFV1j{y_Fw=2literal 0HcmV?d00001diff --git a/source/images/footer_shop_on.png b/source/images/footer_shop_on.pngnew file mode 100644index 0000000000000000000000000000000000000000..d05b8cc9ab583fea7213c5a57df7e2df5b4b4ce6GIT binary patchliteral 581zcmV-L0=oT)P)D`K)sHej)wj(EQG;_IVln)wTJ(mH+3}{oKR$gh%xMo;4|z%eu3;?g{DZQ@DNL@bUYlvyq8w%p8Mm9D62H7zJaO3oUR(LSDIHkXY)6#t#&3mTb?I*|e2FcqOTRqFyw%p$EjRGza)?N{7dqzQ?nI22N00000NkvXXu0mjfHLWBDliteral 0HcmV?d00001diff --git a/source/index.html b/source/index.htmlnew file mode 100644index 0000000..e7a4979--- /dev/null+++ b/source/index.html@@ -0,0 +1,39 @@+++++React-Mi-Shop++++++++++++++++++\ No newline at end of filediff --git a/source/main.js b/source/main.jsnew file mode 100644index 0000000..13c29e9--- /dev/null+++ b/source/main.js@@ -0,0 +1,6 @@+import React from 'react';+import ReactDOM from 'react-dom';+import App from './components/App'+setTimeout(function(){+ReactDOM.render(,document.getElementById('app'));+},300);\ No newline at end of filediff --git a/source/sass/base.sass b/source/sass/base.sassnew file mode 100644index 0000000..6037b28--- /dev/null+++ b/source/sass/base.sass@@ -0,0 +1,42 @@+body,h1,h2,h3,p,dl,dd,ol,ul,th,td,form,fieldset,input,button,textarea+margin: 0+padding: 0+html+-webkit-text-size-adjust: none+word-wrap: break-word+h1,h2,h3+font-size: 100%+ol,ul+list-style: none+table+border-collapse: collapse+border-spacing: 0+empty-cells: show+font-size: inherit+fieldset,img+border: 0+cite,em,s,i,b+font-style: normal+input,button,textarea,select+font-size: 100%+body,input,button,textarea,select,option+font-size: normal+a,input,textarea+text-decoration: none+outline: 0+-webkit-tap-highlight-color: rgba(0,0,0,0)+li,img,label,input+vertical-align: middle+var+font-style: normal+ins+text-decoration: none++html,body+height: 100%+font-size: (20rem/100)+font-family: Arial, Verdana, Sans-serif+.viewport+width: 100%+max-width: (720rem/100)+margin: 0 autodiff --git a/source/test.js b/source/test.jsnew file mode 100644index 0000000..ce9e07e--- /dev/null+++ b/source/test.js@@ -0,0 +1,581 @@+var data={+"swipedata": [+{+"img": "http://i8.mifile.cn/v1/a1/T1_jKgBbdT1RXrhCrK.jpg"+},+{+"img": "http://i8.mifile.cn/v1/a1/T1B4_jBsYT1RXrhCrK.jpg"+},+{+"img": "http://i8.mifile.cn/v1/a1/T1tXKgBgbv1RXrhCrK.jpg"+},+{+"img": "http://i8.mifile.cn/v1/a1/T1tXKgBgbv1RXrhCrK.jpg"+}+],+"Sections": [+{+"body": {+"items": [+{+"img_url": "http://i8.mifile.cn/v1/a1/T14xJTByZ_1RXrhCrK.jpg",+"product_brief": "骁龙820处理器 / 4GB 内存 / 128GB 闪存 / 4轴防抖相机 / 3D陶瓷机身 / 3月1日早10点首轮开售",+"product_name": "小米手机5",+"product_price": "1999元 起",+"product_tag": "http://c1.mifile.cn/f/i/f/mishop/iic/xp.png",+"view_type": ""+}+]+},+"phone_type": "0",+"view_type": "fast_recommend"+},+{+"body": {+"items": [+{+"img_url": "http://i8.mifile.cn/v1/a1/T1Z5bgBCYv1RXrhCrK.jpg",+"product_brief": "骁龙808处理器 / 64GB大容量 / 指纹识别 / 全网通双卡双待 / 5英寸屏非凡手感 / 13MP相位对焦相机",+"product_name": "小米手机4S",+"product_price": "1699元",+"product_tag": "http://c1.mifile.cn/f/i/f/mishop/iic/xp.png",+"view_type": ""+}+]+},+"phone_type": "0",+"view_type": "fast_recommend"+},+{+"body": {+"items": [+{+"img_url": "http://i1.mifile.cn/v1/a1/T1RWWgBghT1RXrhCrK.jpg",+"product_brief": "独立 HiFi 音乐系统 / 5.7英寸全高清屏幕 / 骁龙801四核处理器",+"product_name": "小米Note",+"product_price": "1499元 起",+"product_tag": "http://c1.mifile.cn/f/i/f/mishop/iic/d300.png",+"view_type": ""+}+]+},+"phone_type": "0",+"view_type": "fast_recommend"+},+{+"body": {+"items": [+{+"img_url": "http://i1.mifile.cn/v1/a1/T1TrdjBKLT1RXrhCrK.jpg",+"product_brief": "Type-C 双面充电接口 / 红外遥控 / 5英寸全高清阳光屏 / 骁龙808六核处理器",+"product_name": "小米手机4c",+"product_price": "1299元",+"product_tag": "",+"view_type": ""+}+]+},+"phone_type": "0",+"view_type": "fast_recommend"+},+{+"body": {+"items": [+{+"img_url": "http://i1.mifile.cn/v1/a1/T1WdJjBmdT1RXrhCrK.jpg",+"product_brief": "4.7英寸视网膜屏 / 骁龙410四核处理器 / 800万像素相机 / 2GB内存+16GB容量 / 最高支持32GB扩展",+"product_name": "红米2A高配双卡版",+"product_price": "499元",+"product_tag": "",+"view_type": ""+}+]+},+"phone_type": "0",+"view_type": "fast_recommend"+},+{+"body": {+"items": [+{+"img_url": "http://i1.mifile.cn/v1/a1/T1VNJjBsdT1RXrhCrK.jpg",+"product_brief": "金属机身 / 指纹识别 / 4050mAh大电池 / 5.5英寸全高清屏",+"product_name": "红米Note 3",+"product_price": "899元 起",+"product_tag": "http://c1.mifile.cn/f/i/f/mishop/iic/xp.png",+"view_type": ""+}+]+},+"phone_type": "0",+"view_type": "fast_recommend"+},+{+"body": {+"items": [+{+"img_url": "http://i1.mifile.cn/v1/a1/T1LuWgBjhT1RXrhCrK.jpg",+"product_brief": "金属机身 / 4100mAh大电池 / 5英寸阳光屏 / 骁龙616八核处理器 / 2GB内存+16GB容量",+"product_name": "红米手机3",+"product_price": "699元",+"product_tag": "",+"view_type": ""+}+]+},+"phone_type": "0",+"view_type": "fast_recommend"+},+{+"body": {+"items": [+{+"img_url": "http://i1.mifile.cn/v1/a1/T1jFWjBjJT1RXrhCrK.jpg",+"product_brief": "不锈钢边框 / 5英寸屏超窄边 / 骁龙801四核处理器 /MIUI、Win10 双系统",+"product_name": "小米手机4",+"product_price": "1299元 起",+"product_tag": "",+"view_type": ""+}+]+},+"phone_type": "0",+"view_type": "fast_recommend"+},+{+"body": {+"items": [+{+"img_url": "http://i8.mifile.cn/v1/a1/T1GaJgB7hv1RXrhCrK.jpg",+"product_brief": "5.5英寸全贴合大屏 / 骁龙410四核处理器 / 1300万像素相机 / 2GB内存+16GB容量 / 3200mAh大电池",+"product_name": "红米Note 电信4G双卡增强版",+"product_price": "799元",+"product_tag": "",+"view_type": ""+}+]+},+"phone_type": "0",+"view_type": "fast_recommend"+},+{+"body": {+"items": [+{+"img_url": "http://i1.mifile.cn/v1/a1/T1lBYjBKdT1RXrhCrK.jpg",+"product_brief": "4.7英寸舒适手感 / 高通64位处理器",+"product_name": "红米手机2",+"product_price": "599元 起",+"product_tag": "",+"view_type": ""+}+]+},+"phone_type": "0",+"view_type": "fast_recommend"+},+{+"body": {+"items": [+{+"img_url": "http://i1.mifile.cn/v1/a1/T1RXWgBsCT1RXrhCrK.jpg",+"product_brief": "全金属机身 / 7.9英寸视网膜屏幕 / 800万像素相机 / 6190mAh大电池 / 支持5V/2A快充",+"product_name": "小米平板2",+"product_price": "999元 起",+"product_tag": "",+"view_type": ""+}+]+},+"phone_type": "0",+"view_type": "fast_recommend"+},+{+"body": {+"items": [+{+"img_url": "http://i1.mifile.cn/v1/a1/T1H0K_ByKv1RXrhCrK.jpg",+"product_brief": "全金属轻薄机身 / 次世代分体电视",+"product_name": "小米电视3",+"product_price": "3999元起",+"product_tag": "",+"view_type": ""+}+]+},+"phone_type": "0",+"view_type": "fast_recommend"+},+{+"body": {+"items": [+{+"img_url": "http://i1.mifile.cn/v1/a1/T1YKC_BC_v1RXrhCrK.jpg",+"product_brief": "全新升级64位 4K网络机顶盒 / 标配小米蓝牙语音体感遥控器",+"product_name": "小米盒子3",+"product_price": "299元",+"product_tag": "",+"view_type": ""+}+]+},+"phone_type": "0",+"view_type": "fast_recommend"+},+{+"body": {+"items": [+{+"img_url": "http://i1.mifile.cn/v1/a1/T14mdjBKxT1RXrhCrK.jpg",+"product_brief": "高品质电芯 / 铝合金金属外壳",+"product_name": "小米移动电源",+"product_price": "49元 起",+"product_tag": "http://c1.mifile.cn/f/i/f/mishop/iic/hot.png",+"view_type": ""+}+]+},+"phone_type": "0",+"view_type": "fast_recommend"+},+{+"body": {+"items": [+{+"img_url": "http://i1.mifile.cn/v1/a1/T1aFDjB_ZT1RXrhCrK.jpg",+"product_brief": "美国ADI传感器 / 30天超长续航",+"product_name": "小米手环",+"product_price": "69元 起",+"product_tag": "",+"view_type": ""+}+]+},+"phone_type": "0",+"view_type": "fast_recommend"+},+{+"body": {+"items": [+{+"img_url": "http://i1.mifile.cn/v1/a1/T1R.xjBT_T1RXrhCrK.jpg",+"product_brief": "22公里超长续航 / 轻、小、便携 / 重心驱动 / 15重安全保障",+"product_name": "九号平衡车",+"product_price": "1999元",+"product_tag": "",+"view_type": ""+}+]+},+"phone_type": "0",+"view_type": "fast_recommend"+},+{+"body": {+"items": [+{+"img_url": "http://i8.mifile.cn/v1/a1/T1ktDgBgEv1RXrhCrK.jpg",+"product_brief": "全新空气增压系统,净化能力高达310m³/h / 高效360°桶形净化滤芯 / 低分贝,低功耗 / 手机智能控制,一目了然",+"product_name": "小米空气净化器2",+"product_price": "699元",+"product_tag": "http://c1.mifile.cn/f/i/f/mishop/iic/by.png",+"view_type": ""+}+]+},+"phone_type": "0",+"view_type": "fast_recommend"+},+{+"body": {+"items": [+{+"img_url": "http://s1.mi.com/m/images/20151028/water.jpg",+"product_brief": "400加仑大流量 / RO反渗透直出纯净水",+"product_name": "小米净水器",+"product_price": "1299元",+"product_tag": "",+"view_type": ""+}+]+},+"phone_type": "0",+"view_type": "fast_recommend"+},+{+"body": {+"items": [+{+"img_url": "http://i1.mifile.cn/v1/a1/T12xLgBjZT1RXrhCrK.jpg",+"product_brief": "3个USB充电口 / 支持2A快充 / 3重安全保护 / 隐藏式提示灯 / 超薄小插头 / 迷你设计,仅1个铅笔盒大小",+"product_name": "小米插线板",+"product_price": "49元",+"product_tag": "",+"view_type": ""+}+]+},+"phone_type": "0",+"view_type": "fast_recommend"+},+{+"body": {+"items": [+{+"img_url": "http://i1.mifile.cn/v1/a1/T19IWjBvKT1RXrhCrK.jpg",+"product_brief": "MFI认证产品 / 镀金C48端子头,镀锡工艺铜线 / 支持5V/2.4A电量输出",+"product_name": "苹果Lightning to USB数据线",+"product_price": "39元",+"product_tag": "",+"view_type": ""+}+]+},+"phone_type": "0",+"view_type": "fast_recommend"+},+{+"body": {+"items": [+{+"img_url": "http://i1.mifile.cn/v1/a1/T1tTA_BsCT1RXrhCrK.jpg",+"product_brief": "全金属外观 / 双USB智能输出 / 支持快充",+"product_name": "小米车载充电器",+"product_price": "49元",+"product_tag": "",+"view_type": ""+}+]+},+"phone_type": "0",+"view_type": "fast_recommend"+},+{+"body": {+"items": [+{+"img_url": "http://i1.mifile.cn/v1/a1/T1mwV_Bydv1RXrhCrK.jpg",+"product_brief": "表面蜂窝形设计,防刮花 / 高弹性静音轮胎 / 内饰采用亲肤纺织布料,环保安全",+"product_name": "90分旅行箱 24寸",+"product_price": "349元",+"product_tag": "http://c1.mifile.cn/f/i/f/mishop/iic/by.png",+"view_type": ""+}+]+},+"phone_type": "0",+"view_type": "fast_recommend"+},+{+"body": {+"items": [+{+"img_url": "http://i1.mifile.cn/v1/a1/T1Eyb_BXEv1RXrhCrK.jpg",+"product_brief": "4重存储空间,可携带14寸电脑 / 填充EPE珍珠棉,减少双肩背部压力",+"product_name": "小米极简都市双肩包",+"product_price": "149元",+"product_tag": "",+"view_type": ""+}+]+},+"phone_type": "0",+"view_type": "fast_recommend"+},+{+"body": {+"items": [+{+"img_url": "http://i8.mifile.cn/v1/a1/T1WbL_B5Vv1RXrhCrK.jpg",+"product_brief": "播放音乐、车载充电二合一 / 蓝牙配对,一键连接 / 双口充电,8重电路保护",+"product_name": "车载蓝牙播放器",+"product_price": "69元",+"product_tag": "",+"view_type": ""+}+]+},+"phone_type": "0",+"view_type": "fast_recommend"+},+{+"body": {+"items": [+{+"img_url": "http://i1.mifile.cn/v1/a1/T1alVjBQCT1RXrhCrK.jpg",+"product_brief": "动圈+动铁 双发声单元 / 金属音腔 / 线控麦克风,清晰的通话质量",+"product_name": "小米圈铁耳机",+"product_price": "99元",+"product_tag": "",+"view_type": ""+}+]+},+"phone_type": "0",+"view_type": "fast_recommend"+},+{+"body": {+"items": [+{+"img_url": "http://i1.mifile.cn/v1/a1/T1HTh_Bs_T1RXrhCrK.jpg",+"product_brief": "进口高密度电芯 / 双USB输出 / 支持快速自充 / 便携轻便,仅338克",+"product_name": "小米移动电源20000mAh",+"product_price": "149元",+"product_tag": "",+"view_type": ""+}+]+},+"phone_type": "0",+"view_type": "fast_recommend"+},+{+"body": {+"items": [+{+"img_url": "http://i1.mifile.cn/v1/a1/T1PLJgB_dT1RXrhCrK.jpg",+"product_brief": "碱性10粒装5号环保电池,无汞无镉 / 防泄漏技术,双重安全保障 / 十种绚丽色彩,送收纳盒",+"product_name": "彩虹5号电池",+"product_price": "9.9元",+"product_tag": "",+"view_type": ""+}+]+},+"phone_type": "0",+"view_type": "fast_recommend"+},+{+"body": {+"items": [+{+"img_url": "http://i1.mifile.cn/v1/a1/T16RE_BQxv1RXrhCrK.jpg",+"product_brief": "12小时超长播放 / 金属机身外壳 / 轻巧便携 / 支持免提通话",+"product_name": "小钢炮蓝牙音箱",+"product_price": "99元",+"product_tag": "",+"view_type": ""+}+]+},+"phone_type": "0",+"view_type": "fast_recommend"+},+{+"body": {+"items": [+{+"img_url": "http://i1.mifile.cn/v1/a1/T1mvb_ByAv1RXrhCrK.jpg",+"product_brief": "仅270克,方便携带 / 完全充电,可持续使用8小时 / 支持Micro SD卡 / 支持免提通话",+"product_name": "小米蓝牙音箱",+"product_price": "199元",+"product_tag": "http://c1.mifile.cn/f/i/f/mishop/iic/by.png",+"view_type": ""+}+]+},+"phone_type": "0",+"view_type": "fast_recommend"+},+{+"body": {+"items": [+{+"img_url": "http://i1.mifile.cn/v1/a1/T1K3A_BsAT1RXrhCrK.jpg",+"product_brief": "掌心大小 / PCB天线覆盖大,抗干扰 / 一键穿墙技术,自动提升信号强度",+"product_name": "小米路由器青春版",+"product_price": "79元",+"product_tag": "",+"view_type": ""+}+]+},+"phone_type": "0",+"view_type": "fast_recommend"+},+{+"body": {+"items": [+{+"img_url": "http://i1.mifile.cn/v1/a1/T1RlE_BvDT1RXrhCrK.jpg",+"product_brief": "小巧轻便 / 一步配对免安装 / 不用切换热点,自动选择最优信号 / 180°旋转的USB插口",+"product_name": "小米Wifi放大器",+"product_price": "39元",+"product_tag": "http://c1.mifile.cn/f/i/f/mishop/iic/hot.png",+"view_type": ""+}+]+},+"phone_type": "0",+"view_type": "fast_recommend"+},+{+"body": {+"items": [+{+"img_url": "http://i1.mifile.cn/v1/a1/T13EL_B5hv1RXrhCrK.jpg",+"product_brief": "100克,喝杯水都可感知的精准 / 高精度压力传感器 / 手机管理全家健康",+"product_name": "小米体重秤",+"product_price": "99元",+"product_tag": "",+"view_type": ""+}+]+},+"phone_type": "0",+"view_type": "fast_recommend"+},+{+"body": {+"items": [+{+"img_url": "http://i1.mifile.cn/v1/a1/T17rh_BsVT1RXrhCrK.jpg",+"product_brief": "原装三星真4K屏 / 四核1.4GHz CPU / 9.9mm全金属纤薄机身",+"product_name": "小米电视2S 48英寸",+"product_price": "2799元",+"product_tag": "",+"view_type": ""+}+]+},+"phone_type": "0",+"view_type": "fast_recommend"+},+{+"body": {+"items": [+{+"img_url": "http://i1.mifile.cn/v1/a1/T17CxjBvET1RXrhCrK.jpg",+"product_brief": "720P高清分辨率 / 111°广角 / 双向语音通话 / 4倍变焦,看到画面的每一个细节",+"product_name": "小蚁智能摄像机",+"product_price": "149元",+"product_tag": "",+"view_type": ""+}+]+},+"phone_type": "0",+"view_type": "fast_recommend"+},+{+"body": {+"items": [+{+"img_url": "http://i1.mifile.cn/v1/a1/T1vrh_BsCT1RXrhCrK.jpg",+"product_brief": "6.5克轻巧 / 蓝牙4.1高清通话音质 / 荣获德国IF设计大奖 / 低噪音硅麦,语音更清晰",+"product_name": "小米蓝牙耳机",+"product_price": "79元",+"product_tag": "",+"view_type": ""+}+]+},+"phone_type": "0",+"view_type": "fast_recommend"+}+]+};+++export default data;\ No newline at end of filediff --git a/webpack.js b/webpack.jsnew file mode 100644index 0000000..afedee8--- /dev/null+++ b/webpack.js@@ -0,0 +1,64 @@+var webpack = require("webpack");+var path = require('path');+var gutil = require("gulp-util");+var node_modules = path.resolve(__dirname, 'node_modules');+var HtmlWebpackPlugin = require('html-webpack-plugin');+var myConfig={+debug:true,+devtool:'source-map',+entry: [path.resolve(__dirname, 'source/main.js')],+context: path.resolve(process.cwd(), 'source'),+output: {+path: path.resolve(__dirname, 'build'),+filename: 'main.js',+publicPath: ""+},+module: {+loaders: [{+test: /\.jsx?$/,+loaders: ['babel'],+include: path.join(__dirname, 'source')+}, {+test: /\.jade$/,+loader: 'html!jade-html'+}, {+test: /\.css$/,+loader: 'style!css'+}, {+test: /\.sass$/,+loader: "style!css!sass?indentedSyntax&includePaths[]=" + path.resolve(__dirname, "./node_modules/compass-mixins/lib") + "&includePaths[]=" + path.resolve(__dirname, "./mixins/app_mixins")+}, {+test: /\.(png|jpg)$/,+loader: 'url-loader?limit=10000&name=[path][name]-[hash:8].[ext]'+}]+},+resolve: {+root: [path.resolve(process.cwd(), 'source'), path.resolve(__dirname, 'node_modules')], //设置搜索目录+alias: {+images: './images'+},+extensions: ['', '.js', '.jade','.jsx']+},+plugins: [+new webpack.NoErrorsPlugin(),+new HtmlWebpackPlugin({// Also generate a test.html+ filename: 'index.html',+ template:'index.html',+}),+new webpack.ProgressPlugin(function handler(percentage, msg) {+gutil.log(msg)}+)+//用了该插件就可以在jsx里使用require("jquery")+// new webpack.ProvidePlugin({+// jQuery: "jquery",+// $: "jquery"+// })+// new webpack.DefinePlugin({+// PRODUCTION: JSON.stringify(!!gulp.env.production)+// })++]+};+++module.exports=myConfig;\ No newline at end of file

免责声明:非本网注明原创的信息,皆为程序自动获取自互联网,目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责;如此页面有侵犯到您的权益,请给站长发送邮件,并提供相关证明(版权证明、身份证正反面、侵权链接),站长将在收到邮件24小时内删除。