需要说明的是，图中的 State Store 其实目前是没有的，放在这里主要是为了好看 :)。后期如果把 vuex/MobX/Redux 之类的加进去了，那就完整了，目前因为业务逻辑很简单，状态什么的暴力解决就行了。而 app.js 则处理项目中公共的业务逻辑，让页面入口解脱出来专心处理内容。
项目结构描述
目录结构
项目目录结构如下：
----build # Webpack 配置文件 ... ----src --------assets # 资源文件--------components ------------GoodsInfo # 商品信息组件 GoodsInfo.mst # 组件模板，采用 Mustache 语法 GoodsInfo.js # 组件渲染和操作逻辑。一般业务无关 GoodsInfo.less # 组件样式
------------RiskPromt ... ------------ShareHeader ... ------------SharePanel ... utils.js # 业务无关，视图层相关的辅助方法集合
--------dal # 数据接入层 index.js # 入口文件。集中管理请求接口和伪数据 getInfoById.js # 接口请求实现 getInfoById.json # 接口返回伪数据，在 index.js 中可生成 mock 方法
--------Main # 默认页面入口 Main.html # 页面模板 Main.js # 页面业务逻辑 Main.less # 页面样式
--------MainBanner # 带有底部 Banner 的页面入口 ... app.js # 抽取多页面共有的业务逻辑，比如分享功能的具体实现 common.js # 应用级的辅助方法集合 common.less package.json README.md
第三方依赖
在 Webpack 2+ 的帮助下，项目选用了如下开源第三方库作为基础依赖：
es6-promise：采用 Promise 的方式可以使代码更清晰更好维护；
axios：Vue 官方推荐的 vue-resource 替代品；
mustache：项目所用的模板库
另外还使用了团队维护的 SDK：
@zz/zz-jssdk：提供 Web 页面和转转 App 客户端的交互接口
@zz/perf：性能统计工具
由于 axios 官方坚持不集成非标准的 jsonp 请求，对于现存部分只支持 jsonp 请求的接口，还需要引入 jsonp 第三方开源库。
以上是项目文件依赖。开发依赖中，所用的第三方库基本都是 Webpack 相关，包括 Less 文件的解析模块。项目没有引入 babel-polyfill 进行 ES6 语法的开发，因为容易产生不必要的额外打包代码。
文件加载规则配置
在 Webpack 的语义下，所有的项目文件都是一种资源，供 JavaScript 使用，所以处理任何资源时，只要配置好合适的 loader 即可。该部分则对项目中不同类型文件的加载和解析规则配置进行了简要描述。这里不会讲解 Webpack 配置细节，相关内容请查看官方文档。
对于一般资源文件的加载，采用 file-loader 即可。对于图片文件，采用推荐的 url-loader。该加载器有一个选项是，如果图片小于指定值，会将其转化为 DataUri 嵌入到打包文件中，以减少额外 HTTP 请求，项目设置指定值为常用的 10K。规则如下：
样式文件
项目中样式文件默认采用 Less，主要用到该库的两个特性：
可以方便的使用 CSS 变量，典型的比如定义通用像素大小；
层次化的样式描述方式；
Webpack 配置同时保留了 css 文件的加载能力，后期还可以加入对 SCSS 文件支持。规则如下：
相关文章
精彩导读
热门资讯
关注我们
