Skip to content

6.简单项目

Jump to bottom
Furic Zhao edited this page Jan 27, 2018 · 1 revision

项目实战（简单项目）

  • 使用Jquery.js
  • 使用bootstrap开发框架
  • 使用fontawesome图标库

手动管理第三方框架库。

1. 创建demo-easy项目目录

在FEZ工程目录下执行gulp fezinit --dir=demo-easy

➜  fez git:(master) ✗ gulp fezinit --dir=demo-easy
[23:00:28] Requiring external module babel-register
[23:00:28] Using gulpfile ~/wwwroot/fez/gulpfile.babel.js
[23:00:28] Starting 'fezinit'...
[23:00:28] Starting 'initProject'...
[23:00:28] Finished 'initProject' after 32 ms
[23:00:28] Finished 'fezinit' after 33 ms
[23:00:28] 创建 demo-easy 成功
[23:00:28] 创建 demo-easy/src 成功
[23:00:28] 创建 demo-easy/src/lib 成功
[23:00:28] 创建 demo-easy/src/static 成功
[23:00:28] 创建 demo-easy/src/static/fonts 成功
[23:00:28] 创建 demo-easy/src/static/images 成功
[23:00:28] 创建 demo-easy/src/static/styles 成功
[23:00:28] 创建 demo-easy/src/views 成功
[23:00:28] 创建 demo-easy/src/views/index 成功
[23:00:28] 创建 demo-easy/src/views/index/module 成功
[23:00:28] 创建 demo-easy/src/views/public 成功
[23:00:28] 创建 demo-easy/src/views/public/module 成功
[23:00:28] 创建 demo-easy/src/views/public/utils 成功
[23:00:28] 创建 demo-easy/fez.config.js 成功
[23:00:28] 创建 demo-easy/bower.json 成功
[23:00:28] 创建 demo-easy/package.json 成功
[23:00:28] 创建 demo-easy/gulpfile.babel.js 成功
[23:00:28] 创建 demo-easy/src/views/index/index.js 成功
[23:00:28] 创建 demo-easy/src/static/styles/index.less 成功
[23:00:28] 创建 demo-easy/shim.js 成功
[23:00:28] 创建 demo-easy/src/views/index/index.html 成功

创建完成后目录结构如下：

➜  demo-easy git:(master) ✗ tree
.
├── bower.json
├── fez.config.js
├── gulpfile.babel.js
├── package.json
├── shim.js
└── src
    ├── lib
    ├── static
    │   ├── fonts
    │   ├── images
    │   └── styles
    │       └── index.less
    └── views
        ├── index
        │   ├── index.html
        │   ├── index.js
        │   └── module
        └── public
            ├── module
            └── utils

2. 在src目录中创建vendor目录，并将jquery、bootstrap、fontawesome第三方框架库放入vendor目录

➜  src git:(master) ✗ tree
.
├── vendor
│   ├── bootstrap
│   │   ├── css
│   │   │   ├── bootstrap-theme.css
│   │   │   ├── bootstrap-theme.css.map
│   │   │   ├── bootstrap-theme.min.css
│   │   │   ├── bootstrap-theme.min.css.map
│   │   │   ├── bootstrap.css
│   │   │   ├── bootstrap.css.map
│   │   │   ├── bootstrap.min.css
│   │   │   └── bootstrap.min.css.map
│   │   ├── fonts
│   │   │   ├── glyphicons-halflings-regular.eot
│   │   │   ├── glyphicons-halflings-regular.svg
│   │   │   ├── glyphicons-halflings-regular.ttf
│   │   │   ├── glyphicons-halflings-regular.woff
│   │   │   └── glyphicons-halflings-regular.woff2
│   │   └── js
│   │       ├── bootstrap.js
│   │       ├── bootstrap.min.js
│   │       └── npm.js
│   ├── font-awesome
│   │   ├── css
│   │   │   ├── font-awesome.css
│   │   │   └── font-awesome.min.css
│   │   └── fonts
│   │       ├── FontAwesome.otf
│   │       ├── fontawesome-webfont.eot
│   │       ├── fontawesome-webfont.svg
│   │       ├── fontawesome-webfont.ttf
│   │       ├── fontawesome-webfont.woff
│   │       └── fontawesome-webfont.woff2
│   └── jquery.js
├── lib
├── static
│   ├── fonts
│   ├── images
│   └── styles
│       └── index.less
└── views
    ├── index
    │   ├── index.html
    │   ├── index.js
    │   └── module
    └── public
        ├── module
        └── utils

3. 在页面中src/views/index/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>demo-easy</title>
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <!-- build:css static/css/vendor.css -->
  <link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css">
  <link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.css">
  <!-- inject:bower:css -->
  <!-- 使用bower安装的框架库CSS文件会被自动插入到此处 -->
  <!-- endinject -->
  <!-- inject:lib:css -->
  <!-- 样式目录所有包含common命名的编译后的CSS文件会被自动插入到此处 -->
  <!-- endinject -->
  <!-- inject:views:css -->
  <!-- 本页面对应的编译后的css文件会被自动插入到此处 -->
  <!-- endinject -->
</head>

<body>
  <h2>简单项目demo</h2>
  <!-- build:js static/js/vendor.js -->
  <script src="vendor/jquery.js"></script>
  <script src="vendor/bootstrap/js/bootstrap.js"></script>
  <!-- endbuild -->
  <!-- inject:bower:js -->
  <!-- 使用bower安装的框架库JS文件会被自动插入到此处 -->
  <!-- endinject -->
  <!-- inject:lib:js -->
  <!-- 项目src/lib目录中所有的JS文件会被自动插入到此处 -->
  <!-- endinject -->
  <!-- inject:views:js -->
  <!-- 本页面对应的编译后的JS文件会被自动插入到此处 -->
  <!-- endinject -->
</body>

</html>

执行gulp进入研发环境

研发目录结构如下：

➜  dev git:(develop) ✗ tree
.
├── index.html
├── static
│   ├── css
│   │   └── index.css
│   └── js
│       ├── index.js
│       └── index.js.map
├── vendor
│   ├── bootstrap
│   │   ├── css
│   │   │   ├── bootstrap-theme.css
│   │   │   ├── bootstrap-theme.css.map
│   │   │   ├── bootstrap-theme.min.css
│   │   │   ├── bootstrap-theme.min.css.map
│   │   │   ├── bootstrap.css
│   │   │   ├── bootstrap.css.map
│   │   │   ├── bootstrap.min.css
│   │   │   └── bootstrap.min.css.map
│   │   ├── fonts
│   │   │   ├── glyphicons-halflings-regular.eot
│   │   │   ├── glyphicons-halflings-regular.svg
│   │   │   ├── glyphicons-halflings-regular.ttf
│   │   │   ├── glyphicons-halflings-regular.woff
│   │   │   └── glyphicons-halflings-regular.woff2
│   │   └── js
│   │       ├── bootstrap.js
│   │       ├── bootstrap.min.js
│   │       └── npm.js
│   ├── font-awesome
│   │   ├── css
│   │   │   ├── font-awesome.css
│   │   │   └── font-awesome.min.css
│   │   └── fonts
│   │       ├── FontAwesome.otf
│   │       ├── fontawesome-webfont.eot
│   │       ├── fontawesome-webfont.svg
│   │       ├── fontawesome-webfont.ttf
│   │       ├── fontawesome-webfont.woff
│   │       └── fontawesome-webfont.woff2
│   └── jquery.js
├── zindex
│   ├── css
│   │   └── bootstrap.min.css
│   └── js
│       ├── bootstrap.min.js
│       ├── handlebars-v4.0.5.min.js
│       ├── jquery-2.1.3.min.js
│       └── qrcode.min.js
└── zindex.html

dev/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>demo-easy</title>
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <!-- build:css static/css/vendor.css -->
  <link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css">
  <link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.css">
  <!-- endbuild -->
  <!-- inject:lib:css -->
  <!-- 项目通用样式 -->
  <!-- endinject -->
  <!-- inject:views:css -->
  <link rel="stylesheet" href="static/css/index.css">
  <!-- endinject -->
</head>

<body>
  <h2>简单项目demo</h2>
  <!-- build:js static/js/vendor.js -->
  <script src="vendor/jquery.js"></script>
  <script src="vendor/bootstrap/js/bootstrap.js"></script>
  <!-- endbuild -->
  <!-- inject:bower:js -->
  <!-- bower框架库脚本 -->
  <!-- endinject -->
  <!-- inject:lib:js -->
  <!-- 项目通用脚本 -->
  <!-- endinject -->
  <!-- inject:views:js -->
  <script src="static/js/index.js"></script>
  <!-- endinject -->
</body>

</html>

请尽情的在src/views/index/index.html、src/views/index/index.js、src/static/styles/index.less编写业务逻辑。

执行gulp dist发布到上线目录

上线目录dist结构如下：

➜  dist git:(develop) ✗ tree
.
├── index.html
├── rev-manifest.json
└── static
    ├── css
    │   ├── index-593d9d76c4.css
    │   └── vendor-56eee0b4c7.css
    └── js
        ├── index-f3d06ba2f6.js
        └── vendor-396f8ae872.js

dist/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,maximum-scale=1,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>demo-easy</title>
  <meta name="keywords" content="">
  <meta name="description" content="">
  <link rel="stylesheet" href="static/css/vendor-56eee0b4c7.css">
  <link rel="stylesheet" href="static/css/index-593d9d76c4.css">
</head>

<body>
  <h2>简单项目demo</h2>
  <script src="static/js/vendor-396f8ae872.js"></script>
  <script src="static/js/index-f3d06ba2f6.js"></script>
</body>

</html>
Clone this wiki locally