Skip to content

eugeneCN/fis3-fee

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

20 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

fis3-fee

fis3-fee是基于fis3搭建的纯前端脚手架工具,解决前端模块化开发、开发自动化、代码部署、性能优化、等问题。

功能

安装运行

TIPS: 脚手架基于fis3,确保你已安装了fis3,如果不了解fis请移步fis官网,node版本不能大于5.0+,原因点这里

# 安装依赖
npm install

# 安装fis组件
fis3 install

# 开启fis服务器 (命令如下)
npm run dev     --  一键 start release -wl
npm run dep     --  发布项目到fis启动的服务,同时监听
npm run start   --  启动fis服务
npm run debug   --  测试项目资源打包
npm run build   --  打包发布到本地
npm run del     --  删除已打包发布到本地的代码
npm run open    --  打开fis本地服务器
npm run clean   --  清除fis服务器代码

这里我在package.json做了下命令配置,为了执行一个脚本写入一个config.js文件来做一些相应的配置。当然你也可以用fis原有命令,不过要注意的是必须要写入一个config.js文件到modules/js目录,不然会报错require不到这个文件。执行命令如下 ..。

# 使用fis原有命令之前执行 ..
npm run init:dev    -- 开发环境
npm run init:prod   -- 发布代码

目录说明

目录结构

|____build
|____components
|____conf
|____lib
|____mock
|____modules
|____views
|____fis-conf.js
|____component.json
|____index.html
|____package.json
|____map.json
|____README.md

目录说明

  • build -- 写入config.js文件脚本
  • components -- fis组件库
  • lib -- 静态资源库(不需要打包的库)
  • mock -- moke数据
  • modules -- 包含 模块、静态资源
  • views -- 视图页面
  • conf -- fis配置文件
  • fis-conf.js -- fis配置入口文件
  • component.json -- fis组件库配置文件
  • index.html -- 页面入口
  • package.json -- 依赖配置
  • map.json -- 资源配置表
  • README.md -- 说明文件
# views目录下一个页面一个文件夹

|____views
| |____index
| | |____component
| | | |____list.html
| | | |____list.less
| | |____index.es
| | |____index.html
| | |____index.less
| | |____tpl
| | | |____list.tpl
| |____star
| | |____assets
| | | |____star48_half@3x.png
| | | |____star48_off@3x.png
| | | |____star48_on@3x.png
| | |____star.css
| | |____star.es
| | |____star.html
| |____test
| | |____test.es
| | |____test.html
| | |____test.scss
| | |____test2.es


# modules widget组件

|____modules
| |____css
| |____images
| |____js
| |____widget
| | |____header
| | | |____header.html
| | | |____header.js
| | |____meta.html
| | |____nav.html

多说几句,fis是一套思想概念,是百度多个团队多个项目的前端工程化经验的总结,fis它并不是一个task工具,和gulp、grunt这类工具还是有一点的区别的,gulp是流水线,每个环节都要走一遍。不否认fis也有流程,前面也有说fis是思想,资源定位、内容嵌入、依赖声明,官方说的也很明白。 总而言之在我用到的这类前端构建工具当中还是属fis更人性化。配置简单,文档友好,建议大家多多了解fis,毕竟是国产哈哈~

问题反馈

使用过程中如碰到问题点击这里

About

基于fis3纯前端脚手架工具,简单易用。

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published