前端框架

渐进式框架 - 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