Skip to content

4.项目中创建新页面

Jump to bottom
Furic Zhao edited this page Jan 27, 2018 · 7 revisions

创建项目新页面

1. 在项目目录执行gulp page --dir=页面目录名

➜  demo-zhj git:(master) ✗ gulp page --dir=page1
[16:20:50] Requiring external module babel-register
[16:20:55] ---------------------------------------
[16:20:55] * 欢迎使用 FEZ 前端模块化工程开发框架 *
[16:20:55] ---------------------------------------
[16:20:55] Using gulpfile ~/wwwroot/fez/demo-zhj/gulpfile.babel.js
[16:20:55] Starting 'page'...
[16:20:55] Starting 'initPage'...
[16:20:56] Finished 'initPage' after 23 ms
[16:20:56] Finished 'page' after 25 ms
[16:20:56] 创建 src/views/page1 成功
[16:20:56] 创建 src/views/page1/module 成功
[16:20:56] 创建 src/static/styles/page1.less 成功
[16:20:56] 创建 src/views/page1/index.html 成功
[16:20:56] 创建 src/views/page1/index.js 成功

2. FEZ将会创建新页面的以下结构内容

.
└── src
    ├── static
    │   └── styles
    │       └── page1.less // page1 页面样式文件
    └── views
        └── page1 //页面目录名
            ├── index.html // page1 页面html
            ├── index.js // page1 Javascript脚本入口文件
            └── module // page1 模块或组件目录
  • src/views/page1/index.html
<!DOCTYPE HTML>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="renderer" content="webkit">
    <meta name="apple-mobile-web-app-capable" content="no" />
    <meta name="format-detection" content="telephone=no">
    <title>page1</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <!-- inject:bower:css -->
    <!-- 使用bower安装的框架库CSS文件会被自动插入到此处 -->
    <!-- endinject -->
    <!-- inject:lib:css -->
    <!-- 样式目录所有包含common命名的编译后的CSS文件会被自动插入到此处 -->
    <!-- endinject -->
    <!-- inject:views:css -->
    <!-- 本页面对应的编译后的css文件会被自动插入到此处 -->
    <!-- endinject -->
</head>

<body>
    <h1>page1 页面创建成功</h1>
    <h3>页面目录结构</h3>
    <pre>
.
└── src
    ├── static
    │   └── styles
    │       └── page1.less  // page1样式文件
    └── views
        └── page1           // page1 页面目录
            ├── index.html  // page1 HTML页面
            ├── index.js    // page1 业务逻辑脚本文件
            └── module      // page1 模块目录

    </pre>

    <!-- inject:bower:js -->
    <!-- 使用bower安装的框架库JS文件会被自动插入到此处 -->
    <!-- endinject -->
    <!-- inject:lib:js -->
    <!-- 项目src/lib目录中所有的JS文件会被自动插入到此处 -->
    <!-- endinject -->
    <!-- inject:views:js -->
    <!-- 本页面对应的编译后的JS文件会被自动插入到此处 -->
    <!-- endinject -->
</body>

</html>
  • src/views/page1/index.js

使用ES5/ES6/ES7语法编写业务逻辑。

/* ==================================
 * @ 2017 FEZ前端模块化工程开发框架
 * https://github.com/furic-zhao/fez
 * ================================== */

/* page1 页面脚本 */
  • src/static/styles/page1.less

使用less语法编写样式。

/* ==================================
 * @ 2017 FEZ前端模块化工程开发框架
 * https://github.com/furic-zhao/fez
 * ================================== */

/* page1 页面样式 */

FEZ默认使用less作为编写样式的语言，如果在fez.config.js配置cssCompiler为sass或scss，FEZ将会创建.scss或.sass格式的样式文件。

Clone this wiki locally