【Ant Design Pro of Vue 学习记录 (2)】Vue文件结构简介

不同于普通的html+JavaScript+css的网页组合，Ant Design Pro of Vue中的页面是由Vue文件构成的，在下载的默认工程中，Vue文件统一放在/src/views目录下，以其中比较简单的基础表单BasicForm.vue为例，说明一下Vue文件的构成

<template>
  <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
    <a-form @submit="handleSubmit" :form="form">
      <a-form-item
        label="标题"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
        <a-input
          v-decorator="[
            'name',
            {rules: [{ required: true, message: '请输入标题' }]}
          ]"
          name="name"
          placeholder="给目标起个名字" />
      </a-form-item>
      <a-form-item
        label="起止日期"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
        <a-range-picker
          name="buildTime"
          style="width: 100%"
          v-decorator="[
            'buildTime',
            {rules: [{ required: true, message: '请选择起止日期' }]}
          ]" />
      </a-form-item>
      <a-form-item
        label="目标描述"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
        <a-textarea
          rows="4"
          placeholder="请输入你阶段性工作目标"
          v-decorator="[
            'description',
            {rules: [{ required: true, message: '请输入目标描述' }]}
          ]" />
      </a-form-item>
      <a-form-item
        label="衡量标准"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
        <a-textarea
          rows="4"
          placeholder="请输入衡量标准"
          v-decorator="[
            'type',
            {rules: [{ required: true, message: '请输入衡量标准' }]}
          ]" />
      </a-form-item>
      <a-form-item
        label="客户"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
        <a-input
          placeholder="请描述你服务的客户，内部客户直接 @姓名／工号"
          v-decorator="[
            'customer',
            {rules: [{ required: true, message: '请描述你服务的客户' }]}
          ]" />
      </a-form-item>
      <a-form-item
        label="邀评人"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
        :required="false"
      >
        <a-input placeholder="请直接 @姓名／工号，最多可邀请 5 人" />
      </a-form-item>
      <a-form-item
        label="权重"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
        :required="false"
      >
        <a-input-number :min="0" :max="100" />
        <span> %</span>
      </a-form-item>
      <a-form-item
        label="目标公开"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
        :required="false"
        help="客户、邀评人默认被分享"
      >
        <a-radio-group v-model="value">
          <a-radio :value="1">公开</a-radio>
          <a-radio :value="2">部分公开</a-radio>
          <a-radio :value="3">不公开</a-radio>
        </a-radio-group>
        <a-form-item>
          <a-select mode="multiple" v-if="value === 2">
            <a-select-option value="4">同事一</a-select-option>
            <a-select-option value="5">同事二</a-select-option>
            <a-select-option value="6">同事三</a-select-option>
          </a-select>
        </a-form-item>
      </a-form-item>
      <a-form-item
        :wrapperCol="{ span: 24 }"
        style="text-align: center"
      >
        <a-button htmlType="submit" type="primary">提交</a-button>
        <a-button style="margin-left: 8px">保存</a-button>
      </a-form-item>
    </a-form>
  </a-card>
</template>

<script>
export default {
  name: 'BaseForm',
  data () {
    return {
      description: '表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。',
      value: 1,

      // form
      form: this.$form.createForm(this)

    }
  },
  methods: {

    // handler
    handleSubmit (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          // eslint-disable-next-line no-console
          console.log('Received values of form: ', values)
        }
      })
    }
  }
}
</script>

可以看到，整个文件分为<template>和<script>两个部分，其中<template>里的内容对应着html语言，而<script>里则是JavaScript脚本 。在脚本部分，全部的内容都包含在export default之中，这代表着里面的内容是该文件的默认输出内容，且可以在别处使用import导入。

这里再介绍一下Vue文件中的import和export。在脚本部分，可以使用唯一的export default定义将要导出的页面内容，也可以在普通函数前加export来导出该函数。随后，在别的文件中可以使用import来导入相应的函数。具体的导入方法有如下几种：

1.导入export default内容

因为export default的内容是没有命名的，所以需要在import时对其进行命名，使用的语句为

import ModalName from 'ModalRoute/ModalFile'

这样就可以在该文件中调用ModalFile中的export default，并将其命名为ModalName。

不过有些时候，也可以不指定目标文件，而是直接使用目录进行导入

import ModalName from 'ModalRoute'

这时系统会自动寻找ModalRoute目录下的index文件，导入其中的export defualt内容。

如果没有index文件，系统会抛出错误，所以我觉得还是老老实实写全路径，少用这种方法比较好。

2.导入某些export内容

对于普通的export内容，在原文件中已经得到了命名，所以在使用import进行导入时，需要指定导入内容的名称。值得注意的是，还需要在名称外面加上大括号

import { ModalName } from 'ModalRoute/ModalFile'

这样就能导入ModalFile文件中名称为ModalName的内容（可以是成员也可以是方法）。如果需要导入多个内容，可在大括号内罗列

import { ModalName1, ModalName2 } from 'ModalRoute/ModalFile'

3.导入所有export内容

import * as ModalName from 'ModalRoute/ModalFile'

 如此就可以导入文件中所有的export内容，再使用

ModalName.Fun1
ModalName.Fun2
ModalName.Var1
ModalName.Var2
……

即可调用。

---

讲完了如何导出与导入，那这里的导出导入是否与普通的JavaScript完全一致呢？毕竟js文件中也可以进行完全一样的操作。Vue文件与js文件的区别在于，export default中包含了页面的信息，使得整个文件表示的页面可以作为一个模板进行迁移与复用。该结构体里包含着各种属性，基础的有name、components、data、methods等，还可以使用mounted、computed、watch等属性实现更复杂的功能。据说Vue3中会统一将这些属性改为方法，让我们拭目以待吧。

如果导入了其他Vue文件中的export default内容，就可以在当前文件的页面中使用调用的页面模板了。在当前页面中创建一个模板实例的方法是，在当前页面的components属性中添加导入的内容

import LabModal from './modules/labmodal'
import ProcModal from './modules/procmodal'

export default {
  components: {
    LabModal,
    ProcModal
  },
  ...
}

随后，就可以在<template>中使用导入的模块

<proc-modal ref="ProcModal" @ok="handleProcOk"/>

 命名的规则是全部使用小写字符，相应的，在原来的大写字符前加一个短横杠-。

导入模块时指定ref，即可在其他位置调用模块的methods属性中的函数

$refs.ProcModal.fun(param)

不过，能直接调用的也只有methods里的函数了。