web前端【静态页项目】构建框架

web前端【静态页项目】构建框架

static-web-frame

web前端(静态页项目)构建框架【构建完交给后台同学去发挥，你就可以下班了】

本项目基于sass & ejs & gulp & requireJs & nodeJs & babel 相关技术

本项目包含三个终端用户：即：admin后台管理系统端、pc端、m移动端，可根据需要只用其中的某个端

Build Setup

# Clone project || 克隆项目git clone https://github.com/yourVictor/static-web-frame.git# Install dependencies || 安装依赖npm install or cnpm install# start project at localhost || 启动项目，本地开发代码，自动构建，随时查看效果npm start# build for production with minification || 编译项目，将编译后的代码交给后端开发人员，自己就可以下班了npm run build-admin 编译admin端项目npm run build-pc  编译pc端项目npm run build-m  编译m端项目npm run build  编译整个项目

project directory || 项目目录结构

static-web-frame ├─dist [编译后的项目代码，可以直接交给后端童鞋的代码] | ├─[项目名称]-pc-view [pc端可以直接打开预览效果的代码] | | ├─index.html | | ├─js | | | ├─common-722ec8659e.js | | | └main-cb36d0e84e.js | | ├─css | | | ├─index-d41d8cd98f.css | | | └main-6c763fd116.css | | ├─img | ├─[项目名称]-pc [pc端交给后端童鞋对接的代码] | | ├─index.html | | ├─js | | | ├─common-722ec8659e.js | | | └main-cb36d0e84e.js | | ├─css | | | ├─index-d41d8cd98f.css | | | └main-6c763fd116.css | | ├─img | ├─[项目名称]-m-view [m端可以直接打开预览效果的代码] | | ├─index.html | | ├─js | | | ├─common-722ec8659e.js | | | └main-a15a733f9f.js | | ├─css | | | ├─index-d41d8cd98f.css | | | └main-6c763fd116.css | | ├─img | ├─[项目名称]-m [m端交给后端童鞋对接的代码] | | ├─index.html | | ├─js | | | ├─common-722ec8659e.js | | | └main-a15a733f9f.js | | ├─css | | | ├─index-d41d8cd98f.css | | | └main-6c763fd116.css | | ├─img | ├─[项目名称]-admin-view [admin端可以直接打开预览效果的代码] | | ├─index.html | | ├─js | | | ├─common-722ec8659e.js | | | └main-cb36d0e84e.js | | ├─css | | | ├─index-d41d8cd98f.css | | | └main-6c763fd116.css | | ├─img | ├─[项目名称]-admin [admin端交给后端童鞋对接的代码] | | ├─index.html | | ├─js | | | ├─common-722ec8659e.js | | | └main-cb36d0e84e.js | | ├─css | | | ├─index-d41d8cd98f.css | | | └main-6c763fd116.css | | ├─img | ├─src [项目源码] | ├─project-admin [admin端源码] | | ├─js [项目admin端js,自动构建生成的，不用手动编写修改] | | | ├─common.js | | | └main.js | | ├─css [项目admin端css,自动构建生成的，不用手动编写修改] | | | ├─index.css | | | └main.css | | ├─img [项目admin端img目录] | |     ├─_temporary [admin端_temporary,放置ejs、js和scss文件] | | | ├─scss | | | | ├─main.scss [所有页面共用的一个scss文件] | | | | ├─theme [放置主题scss文件:default,...] | | | | | └_default.scss | | | | ├─page [放置页面scss文件:pop,...] | | | | | └index.scss | | | | ├─layout [放置页面布局scss文件] | | | | | ├─___index.scss | | | | | ├─__header.scss | | | | | └_content.scss | | | | ├─component [放置组件scss文件:pop,...] | | | | | ├─_flexLayout.scss | | | | | ├─_float.scss | | | | | └_pop.scss | | | | ├─base [放置基本scss文件:css reset] | | | | | └_reset.scss | | | | ├─abstract [放置抽象scss文件:scss参数和mixins] | | | | | ├─__variables.scss | | | | | └_mixins.scss | | | ├─js_es5_es6 [放置js源码，支持写法：es5,es6,...] | | | | ├─common.js | | | | └main.js | | | ├─ejs | | | | ├─templates [放置模板ejs文件] | | | | | └head_src.ejs | | | | ├─pages [放置页面ejs文件] | | | | | └index.ejs | ├─project-pc [pc端源码] | | ├─ ... | ├─project-m [m端源码] | | ├─ ... ├─gulpfile.js [gulp配置文件] ├─package.json [项目依赖] ├─projectConfig.js [项目构建配置文件] ...

project config || 项目构建配置

edit projectConfig.js to config project

admin 参数详情 [参数compress:代码压缩，参数version：版本号，参数类型：Boolean]

欢迎大家疯狂star，疯狂提issue。

Copyright (c) 2018-present Mole

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。