• 前端框架
    • 渐进式框架 - Vue.js
      • 快速上手
      • 使用脚手架 - vue-cli
    • UI框架 - Element
    • 报表框架 - ECharts
    • 基于弹性盒子的CSS框架 - Bulma
    • 响应式布局框架 - Bootstrap

    前端框架

    渐进式框架 - Vue.js

    前后端分离开发（前端渲染）必选框架。

    快速上手

    1. 引入Vue的JavaScript文件，我们仍然推荐从CDN服务器加载它。

      1. <script src="https://cdn.jsdelivr.net/npm/vue"></script>

    2. 数据绑定（声明式渲染 ）。

      1. <div id="app">
      2.     <h1>{{ product }}库存信息</h1>
      3. </div>
      5. <script src="https://cdn.jsdelivr.net/npm/vue"></script>
      6. <script>
      7.     const app = new Vue({
      8.         el: '#app',
      9.         data: {
      10.             product: 'iPhone X'
      11.         }
      12.     });
      13. </script>

    3. 条件与循环。

      1. <div id="app">
      2.     <h1>库存信息</h1>
      3.     <hr>
      4.     <ul>
      5.         <li v-for="product in products">
      6.             {{ product.name }} - {{ product.quantity }}
      7.             <span v-if="product.quantity === 0">
      8.                 已经售罄
      9.             </span>
      10.         </li>
      11.     </ul>
      12. </div>
      14. <script src="https://cdn.jsdelivr.net/npm/vue"></script>
      15. <script>
      16.     const app = new Vue({
      17.         el: '#app',
      18.         data: {
      19.             products: [
      20.                 {"id": 1, "name": "iPhone X", "quantity": 20},
      21.                 {"id": 2, "name": "华为 Mate20", "quantity": 0},
      22.                 {"id": 3, "name": "小米 Mix3", "quantity": 50}
      23.             ]
      24.         }
      25.     });
      26. </script>

    4. 计算属性。

      1. <div id="app">
      2.     <h1>库存信息</h1>
      3.     <hr>
      4.     <ul>
      5.         <li v-for="product in products">
      6.             {{ product.name }} - {{ product.quantity }}
      7.             <span v-if="product.quantity === 0">
      8.                 已经售罄
      9.             </span>
      10.         </li>
      11.     </ul>
      12.     <h2>库存总量：{{ totalQuantity }}台</h2>
      13. </div>
      15. <script src="https://cdn.jsdelivr.net/npm/vue"></script>
      16. <script>
      17.     const app = new Vue({
      18.         el: '#app',
      19.         data: {
      20.             products: [
      21.                 {"id": 1, "name": "iPhone X", "quantity": 20},
      22.                 {"id": 2, "name": "华为 Mate20", "quantity": 0},
      23.                 {"id": 3, "name": "小米 Mix3", "quantity": 50}
      24.             ]
      25.         },
      26.         computed: {
      27.             totalQuantity() {
      28.                 return this.products.reduce((sum, product) => {
      29.                     return sum + product.quantity
      30.                 }, 0);
      31.             }
      32.         }
      33.     });
      34. </script>

    5. 处理事件。

      1. <div id="app">
      2.     <h1>库存信息</h1>
      3.     <hr>
      4.     <ul>
      5.         <li v-for="product in products">
      6.             {{ product.name }} - {{ product.quantity }}
      7.             <span v-if="product.quantity === 0">
      8.                 已经售罄
      9.             </span>
      10.             <button @click="product.quantity += 1">
      11.                 增加库存
      12.             </button>
      13.         </li>
      14.     </ul>
      15.     <h2>库存总量：{{ totalQuantity }}台</h2>
      16. </div>
      18. <script src="https://cdn.jsdelivr.net/npm/vue"></script>
      19. <script>
      20.     const app = new Vue({
      21.         el: '#app',
      22.         data: {
      23.             products: [
      24.                 {"id": 1, "name": "iPhone X", "quantity": 20},
      25.                 {"id": 2, "name": "华为 Mate20", "quantity": 0},
      26.                 {"id": 3, "name": "小米 Mix3", "quantity": 50}
      27.             ]
      28.         },
      29.         computed: {
      30.             totalQuantity() {
      31.                 return this.products.reduce((sum, product) => {
      32.                     return sum + product.quantity
      33.                 }, 0);
      34.             }
      35.         }
      36.     });
      37. </script>

    6. 用户输入。

      1. <div id="app">
      2.     <h1>库存信息</h1>
      3.     <hr>
      4.     <ul>
      5.         <li v-for="product in products">
      6.             {{ product.name }} - 
      7.             <input type="number" v-model.number="product.quantity" min="0">
      8.             <span v-if="product.quantity === 0">
      9.                 已经售罄
      10.             </span>
      11.             <button @click="product.quantity += 1">
      12.                 增加库存
      13.             </button>
      14.         </li>
      15.     </ul>
      16.     <h2>库存总量：{{ totalQuantity }}台</h2>
      17. </div>
      19. <script src="https://cdn.jsdelivr.net/npm/vue"></script>
      20. <script>
      21.     const app = new Vue({
      22.         el: '#app',
      23.         data: {
      24.             products: [
      25.                 {"id": 1, "name": "iPhone X", "quantity": 20},
      26.                 {"id": 2, "name": "华为 Mate20", "quantity": 0},
      27.                 {"id": 3, "name": "小米 Mix3", "quantity": 50}
      28.             ]
      29.         },
      30.         computed: {
      31.             totalQuantity() {
      32.                 return this.products.reduce((sum, product) => {
      33.                     return sum + product.quantity
      34.                 }, 0);
      35.             }
      36.         }
      37.     });
      38. </script>

    7. 通过网络加载JSON数据。

      1. <div id="app">
      2.     <h2>库存信息</h2>
      3.     <ul>
      4.         <li v-for="product in products">
      5.             {{ product.name }} - {{ product.quantity }}
      6.             <span v-if="product.quantity === 0">
      7.                 已经售罄
      8.             </span>
      9.         </li>
      10.     </ul>
      11. </div>
      13. <script src="https://cdn.jsdelivr.net/npm/vue"></script>
      14. <script>
      15.     const app = new Vue({
      16.         el: '#app',
      17.         data: {
      18.             products: []
      19.         }，
      20.         created() {
      21.             fetch('https://jackfrued.top/api/products')
      22.                 .then(response => response.json())
      23.                 .then(json => {
      24.                     this.products = json
      25.                 });
      26.         }
      27.     });
      28. </script>
    使用脚手架 - vue-cli

    Vue为商业项目开发提供了非常便捷的脚手架工具vue-cli，通过工具可以省去手工配置开发环境、测试环境和运行环境的步骤，让开发者只需要关注要解决的问题。

    1. 安装脚手架。
    2. 创建项目。
    3. 安装依赖包。
    4. 运行项目。

    UI框架 - Element

    基于Vue 2.0的桌面端组件库，用于构造用户界面，支持响应式布局。

    1. 引入Element的CSS和JavaScript文件。

      1. <!-- 引入样式 -->
      2. <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
      3. <!-- 引入组件库 -->
      4. <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    2. 一个简单的例子。

      1. <!DOCTYPE html>
      2. <html>
      3.     <head>
      4.         <meta charset="UTF-8">
      5.         <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
      6.     </head>
      7.     <body>
      8.         <div id="app">
      9.             <el-button @click="visible = true">点我</el-button>
      10.             <el-dialog :visible.sync="visible" title="Hello world">
      11.                 <p>开始使用Element吧</p>
      12.             </el-dialog>
      13.             </div>
      14.     </body>
      15.     <script src="https://unpkg.com/vue/dist/vue.js"></script>
      16.     <script src="https://unpkg.com/element-ui/lib/index.js"></script>
      17.     <script>
      18.         new Vue({
      19.             el: '#app',
      20.             data: {
      21.                 visible: false,
      22.             }
      23.         })
      24.     </script>
      25. </html>

    3. 使用组件。

      1. <!DOCTYPE html>
      2. <html>
      3.     <head>
      4.         <meta charset="UTF-8">
      5.         <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
      6.     </head>
      7.     <body>
      8.         <div id="app">
      9.             <el-table :data="tableData" stripe style="width: 100%">
      10.                 <el-table-column prop="date" label="日期" width="180">
      11.                 </el-table-column>
      12.                 <el-table-column prop="name" label="姓名" width="180">
      13.                 </el-table-column>
      14.                 <el-table-column prop="address" label="地址">
      15.                 </el-table-column>
      16.             </el-table>
      17.         </div>
      18.     </body>
      19.     <script src="https://unpkg.com/vue/dist/vue.js"></script>
      20.     <script src="https://unpkg.com/element-ui/lib/index.js"></script>
      21.     <script>
      22.         new Vue({
      23.             el: '#app',
      24.             data: {
      25.                 tableData:  [
      26.                     {
      27.                         date: '2016-05-02',
      28.                         name: '王一霸',
      29.                         address: '上海市普陀区金沙江路 1518 弄'
      30.                     }, 
      31.                     {
      32.                         date: '2016-05-04',
      33.                         name: '刘二狗',
      34.                         address: '上海市普陀区金沙江路 1517 弄'
      35.                     }, 
      36.                     {
      37.                         date: '2016-05-01',
      38.                         name: '杨三萌',
      39.                         address: '上海市普陀区金沙江路 1519 弄'
      40.                     }, 
      41.                     {
      42.                         date: '2016-05-03',
      43.                         name: '陈四吹',
      44.                         address: '上海市普陀区金沙江路 1516 弄'
      45.                     }
      46.                 ]
      47.             }
      48.         })
      49.     </script>
      50. </html>

    报表框架 - ECharts

    百度出品的开源可视化库，常用于生成各种类型的报表。

    前端框架 - 图1

    基于弹性盒子的CSS框架 - Bulma

    Bulma是一个基于Flexbox的现代化的CSS框架，其初衷就是移动优先（Mobile First），模块化设计，可以轻松用来实现各种简单或者复杂的内容布局，即使不懂CSS的开发者也能够使用它定制出漂亮的页面。

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Bulma</title>
    6.     <link href="https://cdn.bootcss.com/bulma/0.7.4/css/bulma.min.css" rel="stylesheet">
    7.     <style type="text/css">
    8.         div { margin-top: 10px; }
    9.         .column { color: #fff; background-color: #063; margin: 10px 10px; text-align: center; }
    10.     </style>
    11. </head>
    12. <body>
    13.     <div class="columns">
    14.         <div class="column">1</div>
    15.         <div class="column">2</div>
    16.         <div class="column">3</div>
    17.         <div class="column">4</div>
    18.     </div>
    19.     <div>
    20.         <a class="button is-primary">Primary</a>
    21.         <a class="button is-link">Link</a>
    22.         <a class="button is-info">Info</a>
    23.         <a class="button is-success">Success</a>
    24.         <a class="button is-warning">Warning</a>
    25.         <a class="button is-danger">Danger</a>
    26.     </div>
    27.     <div>
    28.         <progress class="progress is-danger is-medium" max="100">60%</progress>
    29.     </div>
    30.     <div>
    31.         <table class="table is-hoverable">
    32.             <tr>
    33.                 <th>One</th>
    34.                 <th>Two</th>
    35.             </tr>
    36.             <tr>
    37.                 <td>Three</td>
    38.                 <td>Four</td>
    39.             </tr>
    40.             <tr>
    41.                 <td>Five</td>
    42.                 <td>Six</td>
    43.             </tr>
    44.             <tr>
    45.                 <td>Seven</td>
    46.                 <td>Eight</td>
    47.             </tr>
    48.             <tr>
    49.                 <td>Nine</td>
    50.                 <td>Ten</td>
    51.             </tr>
    52.             <tr>
    53.                 <td>Eleven</td>
    54.                 <td>Twelve</td>
    55.             </tr>
    56.         </table>
    57.     </div>
    58. </body>
    59. </html>

    响应式布局框架 - Bootstrap

    用于快速开发Web应用程序的前端框架，支持响应式布局。

    1. 特点

      • 支持主流的浏览器和移动设备
      • 容易上手
      • 响应式设计

    2. 内容

      • 网格系统
      • 封装的CSS
      • 现成的组件
      • JavaScript插件

    3. 可视化

      前端框架 - 图2