Vue从零开始（3）：创建页面+添加路由+Mock模拟数据

前言

本来这篇想讲讲怎么打包项目的，但是刚好最近在做一个后台维护的前端项目，然后想想打包这部分可以往后放一放，可以先通过这个项目讲一讲怎么创建页面、添加路由然后如何使用Mock模拟数据。

上一篇大家对于Vue CLI搭建脚手架有了一些了解，这篇介绍一款比较容易上手的企业级中后台前端/设计解决方案Ant Design Pro。它基于Ant Design Vue并提供了一些常用的模板、组件，可以帮助你快速搭建企业级中后台产品原型。

创建项目

创建一个名为my-project的项目：

$ git clone --depth=1 https://github.com/sendya/ant-design-pro-vue.git my-project

目录结构

├── public
│   └── logo.png             # LOGO
|   └── index.html           # Vue 入口模板
├── src
│   ├── api                  # Api ajax 等
│   ├── assets               # 本地静态资源
│   ├── config               # 项目基础配置，包含路由，全局设置
│   ├── components           # 业务通用组件
│   ├── core                 # 项目引导, 全局配置初始化，依赖包引入等
│   ├── router               # Vue-Router
│   ├── store                # Vuex
│   ├── utils                # 工具库
│   ├── locales              # 国际化资源
│   ├── views                # 业务页面入口和常用模板
│   ├── App.vue              # Vue 模板入口
│   └── main.js              # Vue 入口 JS
│   └── permission.js        # 路由守卫(路由权限控制)
├── tests                    # 测试工具
├── README.md
└── package.json

本地开发

1. 安装依赖：

   $ npm i
   

2. 启动项目：

   $ npm run serve
   

3. 浏览器访问http://localhost:8000

创建页面

先上一张原型图：

功能比较简单，全凭自己想象，在src/views/目录下面创建install文件夹，用于存放安装部分所有页面，然后在install文件夹下新建一个vue文件：DynamicData.vue（动态数据概览页面），然后写一大坨代码：

<template>
  <div>
    <a-card :bordered="false" title="历年安装电梯总台数">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="8" :sm="24">
              <a-form-item label="年份">
                <a-select style="width: 100%;">
                  <a-select-option value="2019">
                    2019
                  </a-select-option>
                  <a-select-option value="2020">
                    2020
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="16" :sm="24">
              <span class="table-page-search-submitButtons" style="float: right; overflow: hidden;">
                <a-button>重置</a-button>
                <a-button type="primary" style="margin-left: 8px;">查询</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <div class="table-operator">
        <a-button type="primary" icon="plus">新建</a-button>
      </div>
      <s-table
        ref="table"
        size="default"
        rowKey="key"
        :columns="columns"
        :data="loadData"
        showPagination="auto">
        <span slot="serial" slot-scope="text, record, index">
          {
  { index + 1 }}
        </span>
        <span slot="year" slot-scope="text">
          <ellipsis :length="4" tooltip>{
  { text }}</ellipsis>
        </span>
        <span slot="installNumber" slot-scope="text">
          <ellipsis :length="4" tooltip>{
  { text }}</ellipsis>
        </span>