爲提升團隊協做效率,規範文件管理,方便項目後期維護,提升代碼質量,特制訂此文檔,前端開發人員必須遵守本規範進行前臺頁面開發。php
|--@root |--Member //業務模塊名 |--Conf |--Controller //存放控制器 |--Veiw //存放頁面 |--Basic //PC終端 |--Mobile //手機終端 |--Index //控制器名 |--index.php //頁面 |--README.md
頁面引用靜態文件時,引用靜態文件輸出目錄路徑。詳見3
__ASSET__
爲PHP常量,定義靜態文件輸出目錄爲dev或dist
可在develop.php文件中查看。<link type="text/css" href="__ASSET__/mobile/member/index_index.min.css">
<script src="__ASSET__/mobile/member/index_index.min.js></script>
css
|--@root |--dist //存放編譯後文件,用於測試 |--dev //存放編譯後文件,用於開發;詳見**3.靜態文件輸出目錄** |--basic |--mobile |--libs //第三方插件+ |--tmp //存放在頁面中使用的圖片,通常爲能夠後臺上傳的圖片,頁面調用路徑爲__PUBLIC__tmp/ |--index_index //頁面文件夾 |--src //存放源碼文件 |--basic |--mobile //以mobile目錄爲例,basic目錄同理 |--common //存放mobile終端下公用文件 |--images //存放圖像文件 |--css //存放css文件 |--common.js //js文件直接存放在common文件夾下 |--index |--member //業務模塊名 |--common//業務公共模塊 |--css |--js |--index.js |--index_index //命名規範:控制器名_頁面名(與HTML文件命名相同);存放頁面私有文件 |--images |--image.png |--index.css |--index.js |--common //跨終端公共組件 |--package.json |--webpack.config.dist.js //配置源文件,複製後重命名爲webpack.config.js使用 |--README.md //項目介紹
webpack自動編譯輸出,除tmp文件夾下可添加圖片外勿在此文件夾下添加任何文件
前端
|--@root |--dist //輸出同開發目錄 |--dev |--basic |--mobile |--images //存放圖片 |--member //業務模塊名 |--common.min.css |--index_index.min.css |--index_index.min.js |--index_index.min.css.map //.map爲源碼映射文件,dist目錄下不輸出 |--index_index.min.js.map |-ensure //異步加載文件