generator-yi-frames

The Frames of Yi-Front-End-Development-Team

安装Yi-frames脚手架

First, 使用cnpm/npm/yarn 全局安装 Yeoman & generator-yi-frames.

cnpm i -g yo
cnpm i -g generator-yi-frames

Second,如下所示：

当前版本[email protected]

规范新增vue TPL：：vuex目录组织

• Yi-frames-CLI !! 交互式命令行的开发体验开始！~~~

yo yi-frames

[email protected]功能介绍：

业务模板分类：

1、Default模板（多页/SPA单页）：基于jquery开发的多页产品类前端应用；

• 业务场景：PC门户、WAP站、平台；
• 技术栈：sass+postcss+pug+gulp+webpack-stream；
• 开发语言：sass\pug\ES6;
• 内置基础开发模块：[email protected];
• 内置UI组件库：yi-frame-ui(静态);
• 内置JS类库：yi-frame-JS;
• 内置校验工具：Eslint；

备注：jQuery在Yi-frames中是一个全局变量$，所以无需使用require('jquery')。

2、 Vue+Webpack模板：基于Vue2+webpack开发的SPA单页/多页应用；

• 业务场景：平台产品、其他SPA大型业务场景；
• 技术栈：vue2+webpack；
• 开发语言：sass\pug\ES6\vue;
• 内置基础开发模块：vue-core；
• 内置开发插件：axios\vuex\vue-router\vue-echarts;
• 内置UI组件库：yi-frame-ui(静态);
• 内置校验工具：Csslint\Eslint\unit test；

脚手架环境：

启动Yi-frames编译前端项目：

Env：对开发代码的打包区分环境，

• 开发环境执行：

cnpm run dev

• 生产环境执行

cnpm run build

业务模板主功能：

JavaScript部分：

Webpack-

• 集成适合开发单页应用（SPA）的框架和模块：vue2、vue-router、vuex、axios；
• 集成适合开发多页应用的全局模块jquery；
• 支持commonsChunk公共模块的自动提取(默认全局jquery)；

Gulp-

• 对前端静态资源源代码的统一编译与输出；
• hotReloading--修改本地开发代码看效果，无需再手动刷新浏览器；

样式部分:

Postcss-

• 自动添加浏览器前缀;
• px转rem（直接写px，无需手动转换rem，基准设计稿参考750）;
• base64小尺寸样式图片（小于等于5kb的inline样式图片自动base64）;
• inline样式图片自动添加hash值;
• 自动压缩CSS代码，并清理冗余样式；

Scss-

• Scss编译Css；

images（样式图片）-

• 支持对jpg、png、gif的无损压缩；

模板引擎部分：

Pug-

• pug编译html静态页面；
• 支持pug文件编译html文件名去下划线之前的命名；

License

MIT © 贾时龙Mapk Volkov