先後端分離開發腳手架

時間 2019-11-13

標籤後端分離開發腳手架简体版

原文原文鏈接

描述

這是一個是針對於頁面比較繁多的非單頁面應用的官網開發腳手架。打包工具使用的是gulp，還用到了require引入資源的方式，樣式編寫時用的less，頁面的模板和後臺的交互顯示是使用的art-template（下面有詳細描述這個插件）
項目地址css

如何使用

下載項目html

$ git clone git@github.com:HuYuee/web-starter-kit.git

安裝依賴jquery
```
$ cd web-starter-kit && npm install
```
啓動頁面，訪問http://localhost:3333/src/html/index.htmlgit
```
$ npm run start
```
產出最終工程github
```
$ npm run build
```

目錄結構

bin
- render.js——(在gulpfile文件中使用到)解析layout中的模板html，將完整的html產出到src/html中
dist——產出目錄（在項目下運行npm run build就能夠將src下相關資源產出到該目錄）
src——開發目錄（只需在該目錄下開發便可）
- conf——配置文件目錄
- css——由less文件生成的的css文件
- data——mock數據文件夾
- html——由layout中的html文件解析出來的最終html文件
- images——圖片文件夾
- js——js文件夾（js相關在此文件夾中開發）
- layout——html的源文件夾（html在該文件夾中開發）
- less——less文件夾（樣式相關的在該文件夾中開發）
- vendor——第三方庫
- widget——公用的layout中使用的模板（模板在該文件夾中開發）

如何新建頁面

新建htmlweb

在src/layout文件夾中新建page1.html,在代碼能夠引入部門公用html模板，也能夠寫本身定製的代碼。這裏須要明確的說一點：在html中的底部會加入require引入，這裏必需要寫入頁面在require中對應的配置名稱，好比下面的page1。若是隻是測試能夠拷入如下代碼：npm

<!DOCTYPE html>
<html>
<head>
    <!-- ws: 引入公共樣式 -->
    {{{include '../widget/public_style'}}}
    <!-- we: 引入公共樣式 -->
</head>
<body style="visibility:hidden;">
    <h1>這裏是page1的內容</h1>
    <a href="index.html">點擊回首頁</a>
    <!--ws: 公共Script -->
    {{{include '../widget/public_script'}}}
    <!--we: 公共Script -->
    <script>
    //經過require的方式來引入須要的js
      require( ['page1'], function() {
      });
    </script>
</body>
</html>

新建樣式文件gulp

在src/less/page文件夾中新建page1.less，在代碼中能夠引入公共的less模板，也能夠本身寫。若是是測試能夠拷入如下代碼：瀏覽器
```
// 引入基本樣式
@import '../widget/common.less';

    h1 {
        font-size: 25px;
    }
```
新建js文件服務器

在src/js文件夾下新建page1文件夾，而後在page1文件夾下新建文件page1.js。裏面能夠經過require語法引入其餘js。能夠拷入如下代碼進行測試：
```
define(["jquery", "data", "template"], function($, d, template) {
    $("body").css("visibility", "visible");

});
```
配置require

在src/conf/require.config.js中配置新加入的js和css，以下圖所示：