luozt/fiz-web-template

#web开发项目模板

本项目可以直接通过fiz这个node插件下载：fiz get web

##summary

Web开发模板，包括PC开发模板，移动开发模板。本模板采用百度fis3作为前端构建工具，支持jade模板，CoffeeScript，Less, React等预编译语言工具。

src文件夹包含的是PC端的项目模板，兼容IE7+。

src-m文件夹包含的是移动端的项目模板。如果要使用的是移动端的模板，则把PC端的src文件夹删掉，再src-m改名为src了

**使用范例：**本人个人实践项目react admin ctrl已进行了使用，并利用了fis的require功能和react的编译，可以进行参考和使用。

##开发环境说明

本项目使用fis3前端构建工具，但已通过封装为FIZ插件，故请按照以下步骤进行环境安装和使用。

先安装nodejs，利用nodejs的插件来进行开发：

1、安装插件：npm i。安装完成后会自动打包，如果还没开发完，直接删除即可。

2、启动fiz服务器进行本地调试： npm run dev, 将自动打开http://127.0.0.1:8080/进行调试和预览

开发命令列表：

本地调试：npm run dev
远程环境调试：npm run dev-pu
相对路径打包：npm run build-lc，默认打相对路径的包
测试环境打包：npm run build-qa
正式环境打包：npm run build-pr

##fis-conf配置说明

/src/index.html的__NODE_ENV变量在打包时，会替换为相应环境的字符串：dev | lc | qa | pr
所有版本的打包，都会把css、js文件各自合并在一个文件中，也就是一个html对应只有1个css和1个js，减少http请求，就是这么简单粗暴。
以unmod.开头的文件将不被视为模块
（没启用）以pkg.开头的js文件在pr打包时将被合并为一个js文件
（没启用）以pkg.开头的css文件在pr打包时将被合并为一个css文件

##开发说明

项目采用fis-mod模块来进行模块封装，在src/index.js里通过//@require fis-mod的方式引入，把相应的js封装为模块。在具体模块中，模块的引入使用require，模块的输出使用module.exports或者exports

##打相对路径包说明

如果需要以相对路径来打包，则需要做到以下这些：

fis-conf.js默认已配置了本地打包的设置，但有一点可能还需开发者自己定义，即模板HTML文件发布后相对服务器的路径，因为模板HTML文件放置的路径一般为资源的路径，如tpls/template.html文件之类，但它们渲染在视图中路径就会变为/index.html，所以要设置好相对/index.html而不是tpls/template.html的路径即可。

以下为fis-conf.js中关于这部分的代码：

  // 模板发布到服务器后以相对服务器的路径进行配置
  .match("src/*/**.{jade,html}", {
    relative: "/src"
  });

模板使用TIPS

默认fis-conf.js配置认为所有用到的HTML模板放在tpls/文件夹，故针对tpls文件夹进行处理。如果开发者需要定义自己的模板文件名，则可修改fis-conf.js对应的代码。

PC开发TIPS

src/css/_sprites.less已提供雪碧图的使用示例，开发者无需自己拼合雪碧图，只需按照这个文件的写法，在发布时，fis3将自动拼合雪碧图。建议配合node插件spritelist来使用！
src/css/_func.less提供了很多有用的方法，如.u-input样式设置<input>输入框的样式，将直接兼容IE7+，否则你将写一大堆兼容性的代码，还有.transition, .transform等less方法可以使用，已自动补全前缀了。
js,css文件可以加个pkg.的文件名前缀，这样打包后会自动合并在一个文件。比如很多js的lib插件，jquery.scrollable.js改为pkg.jquery.scrollable.js,jquery.tabs.js改为pkg.jquery.tabs.js。相应的fis配置如下：
```
// 打包共用的js
fis.match("src/**/pkg.**.{coffee,js}", {
  packTo: "src/pkg/autocombined.js"
});

// 打包共用的css
fis.match("src/**/pkg.**.{less,css}", {
  packTo: "src/pkg/autocombined.css"
});
```

##移动开发TIPS

css大部分单位都采用rem，只有如少数border为1px的地方使用px单位。而安卓下<textarea>标签的内容字体大小不支持rem设置，如有需要使用响应式及px单位设置其字体
模板默认HTML标签有.loading，当页面加载完成会去掉.loading；当页面横屏时会加上.forhorview。故可以利用这个设定对加载前、加载完成、横屏时的页面进行调整。默认已进行了一些调整了，在src-m/css/index.less里
本开发模板是根据netease网站小组的规范来编写的。使用rem布局也可使用淘宝插件：lib-flexible

##文件结构说明

fis-conf.js                             //fis3配置文件
|
src/                                    //存放PC项目模板
|
src-m/                                  //存放移动端项目模板
|
.env                                    // heroku文件
|
Procfile                                // heroku文件

luozt / fiz-web-template

模板使用TIPS

PC开发TIPS

About

Languages