vue 九、使用 UI 框架创建漂亮的应用

九、使用 UI 框架创建漂亮的应用

使用 UI 框架和库是提高生产力和帮助开发应用的好方法。您可以更多地关注代码，而不是设计。

学习如何使用这些框架意味着您知道这些框架的行为和工作方式。这将有助于您将来开发应用或框架。

在这里，您将了解在创建用户注册表单和页面所需的所有组件时框架的用法。在本章中，我们将学习如何使用 Buefy、Vuetify 和 Ant Design 创建布局、页面和表单。

在本章中，我们将介绍以下配方：

使用 Buefy 创建页面、布局和用户表单
使用 Vuetify 创建页面、布局和用户表单
使用 Ant Design 创建页面、布局和用户表单

技术要求

在本章中，我们将使用 Node.js 和 Vue CLI。

Attention Windows users: you need to install an npm package called windows-build-tools. To do so, open PowerShell as administrator and execute the following command: > npm install -g windows-build-tools

要安装Vue-CLI，您需要打开终端（macOS 或 Linux）或命令提示符/PowerShell（Windows）并执行以下命令：

> npm install -g @vue/cli @vue/cli-service-global

使用 Buefy 创建页面、布局和用户表单

Bulma 是最早用于快速原型和 web 开发的框架之一，它不需要附加 JavaScript 库。所有需要编码的特殊组件都是使用框架的开发人员的责任。

随着 JavaScript 框架和围绕 Bulma 框架创建的社区的出现，Vue 的包装器也随之创建。这个包装器承担了 JavaScript 组件开发的所有责任，并为开发人员在其应用中使用 Bulma 框架提供了一个完整的解决方案，而无需重新发明轮子。

在本教程中，我们将学习如何将 Buefy 框架与 Vue 结合使用，以及如何创建布局、页面和用户注册表单。

准备

此配方的先决条件如下：

Node.js 12+
视图-CLI 项目

所需的 Node.js 全局对象如下：

@vue/cli
@vue/cli-service-global

怎么做。。。

要使用 Buefy 框架创建 Vue CLI 项目，我们需要先创建 Vue CLI 项目，然后将 Buefy 框架添加到项目中。我们将把这个方法分为四个部分：创建 Vue CLI 项目、将 Buefy 框架添加到项目中、创建布局和页面，最后创建用户注册表单。

创建 Vue CLI 项目

在这里，我们将创建要在此配方中使用的 Vue CLI 项目。此项目将具有自定义设置，以便能够使用 Buefy 框架：

我们需要打开终端（macOS 或 Linux）或命令提示符/PowerShell（Windows）并执行以下命令：

> vue create bulma-vue

Vue CLI 将要求您选择预设–选择Manually select features：

? Please pick a preset: (Use arrow keys)
  default (babel, eslint) ❯ Manually select features

现在 Vue CLI 将要求提供这些功能，您需要在默认功能的基础上选择CSS Pre-processors作为附加功能：

? Check the features needed for your project: (Use arrow keys) ❯ Babel
  TypeScript
  Progressive Web App (PWA) Support
  Router
  Vuex ❯ CSS Pre-processors ❯ Linter / Formatter
  Unit Testing
  E2E Testing

在这里，Vue CLI 将询问您要使用哪个 CSS 预处理器；选择Sass/SCSS (with node-sass)：

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
  Sass/SCSS (with dart-sass) ❯ Sass/SCSS (with node-sass) 
  Less 
  Stylus

通过选择一根短绒并格式化，继续此过程。在本例中，我们将选择ESLint + Airbnb配置：

? Pick a linter / formatter config: (Use arrow keys)
  ESLint with error prevention only ❯ ESLint + Airbnb config 
  ESLint + Standard config 
  ESLint + Prettier

选择短绒的其他特征（此处为[T0]）：

? Pick additional lint features: (Use arrow keys)
  Lint on save ❯ Lint and fix on commit

选择要放置 linter 和 formatter 配置文件的位置（此处，[T0]：

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys) ❯ In dedicated config files 
  In package.json

最后，Vue CLI 将询问您是否要保存设置以供将来的项目使用；您应该选择N。之后，Vue CLI 将为您创建文件夹并安装依赖项：

? Save this as a preset for future projects? (y/N) n

将 Buefy 添加到 Vue CLI 项目

要在 Vue 项目中使用 Bulma，我们将使用 BuefyUI 库。此库是 Bulma 框架的包装器，提供原始框架可用的所有组件以及一些要使用的附加组件：

在为 Vue CLI 项目创建的文件夹中，打开终端（macOS 或 Linux）或命令提示符/PowerShell（Windows）并执行以下命令：

> vue add buefy

Vue CLI 将询问您是否要选择与 Buefy 一起使用的样式；我们将使用scss：

? Add Buefy style? (Use arrow keys)
 none 
 css 
❯ scss

然后，Vue CLI 将询问是否要包括材质设计图标；对于此项目，我们将不使用它们：

? Include Material Design Icons? (y/N) n

现在，Vue CLI 将询问您是否希望包含字体图标；我们将把它们添加到项目中：

? Include Font Awesome Icons? (y/N) y

使用 Buefy 创建布局和页面

要创建页面，我们需要创建页面的布局结构和基本组件，例如页眉菜单、页脚和页面的 hero 部分。

创建标题菜单组件

在我们的设计中，我们将有一个标题菜单，带有链接和行动按钮的基本组合：

在src/components文件夹中创建一个名为top-menu.vue的新文件并打开它。
在单文件组件的<script>部分，我们将导出一个defaultJavaScript 对象，name属性定义为TopMenu：

<script>
export default {
  name: 'TopMenu',
};
</script>

在单文件组件的<template>部分，使用section类创建sectionHTML 元素，并使用container类添加子divHTML 元素：

<section class="section">
  <div class="container">
  </div>
</section>

现在创建一个b-navbar组件作为div.containerHTML 元素的子元素，并作为子元素添加一个template占位符组件，命名槽为brand。在其中，添加一个具有定义为#的href属性的b-navbar-item组件，并添加一个imgHTML 元素作为子元素：

<b-navbar>
  <template slot="brand">
    <b-navbar-item href="#">
      <img src="https://raw.githubusercontent.com/buefy/buefy/dev
               /statimg/buefy-logo.png"
        alt="Lightweight UI components for Vue.js based on Bulma"
      >
    </b-navbar-item>
  </template>
</b-navbar>

在这个template占位符之后，创建另一个template占位符，命名槽为start。在其内部，创建两个具有定义为#的href属性的b-navbar-item组件。创建一个具有定义为Info的label属性的b-navbar-dropdown组件作为同级组件。在此组件中，添加两个b-navbar-item组件作为子组件，其href属性定义为#：

<template slot="start">
  <b-navbar-item href="#">
    Home
  </b-navbar-item>
  <b-navbar-item href="#">
    Documentation
  </b-navbar-item>
  <b-navbar-dropdown label="Info">
    <b-navbar-item href="#">
      About
    </b-navbar-item>
    <b-navbar-item href="#">
      Contact
    </b-navbar-item>
  </b-navbar-dropdown>
</template>

最后，创建另一个名为[T1]的[T0]占位符。创建一个b-navbar-item组件作为子组件，其tag属性定义为div，并使用buttons类添加一个divHTML 元素作为该组件的子组件。在divHTML 元素中，使用button is-primary类创建一个aHTML 元素，使用button is-light类创建另一个aHTML 元素：

<template slot="end">
  <b-navbar-item tag="div">
    <div class="buttons">
      <a class="button is-primary">
        <strong>Sign up</strong>
      </a>
      <a class="button is-light">
        Log in
      </a>
    </div>
  </b-navbar-item>
</template>

创建英雄部分组件

我们将创建一个英雄部分组件。hero 组件是一个全宽横幅，为用户提供页面上的视觉信息：

在src/components文件夹中创建一个名为hero-section.vue的新文件并打开它。
在单文件组件的<script>部分，我们将导出一个defaultJavaScript 对象，name属性定义为HeroSection：

<script>
export default {
  name: 'HeroSection',
};
</script>

在单文件组件的<template>部分，使用hero is-primary类创建sectionHTML 元素，然后将divHTML 元素作为子元素添加到hero-body类中：

<section class="hero is-primary">
  <div class="hero-body">
  </div>
</section>

在div.hero-bodyHTML 元素中，使用container类创建一个子divHTML 元素。然后，添加一个h1HTML 元素作为title类的子元素，以及一个h2HTML 元素作为subtitle类的子元素：

<div class="container">
  <h1 class="title">
    user Registration
  </h1>
  <h2 class="subtitle">
    Main user registration form
  </h2>
</div>

创建页脚组件

我们将在布局中使用的最后一个组件是页脚组件。这将显示为我们页面的页脚：

在src/components文件夹中创建一个名为Footer.vue的新文件并打开它。
在单文件组件的<script>部分，我们将导出一个defaultJavaScript 对象，name属性定义为FooterSection：

<script>
export default {
  name: 'FooterSection',
};
</script>

在单文件组件的<template>部分，使用footer类创建footerHTML 元素，然后使用content has-text-centered类添加divHTML 元素：

<footer class="footer">
  <div class="content has-text-centered">
  </div>
</footer>

在div.contentHTML 元素内，为起始页脚行创建pHTML 元素，并为第二行创建第二个pHTML 元素：

<p>
  <strong>Bulma</strong> by <a href="https://jgthms.com">Jeremy
    Thomas</a>
  | <strong>Buefy</strong> by 
      <a href="https://twitter.com/walter_tommasi">Walter
         Tommasi</a>
</p>
<p>
  The source code is licensed 
   <a href="http://opensource.org/licenses/mit-license.php">MIT</a>.
  The website content is licensed 
   <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC
       BY NC SA 4.0</a>.
</p>

创建布局组件

要创建布局组件，我们将使用所有已创建的组件，并添加一个用于保存页面内容的插槽：

在src文件夹中新建一个名为layouts的文件夹，新建一个名为Main.vue的文件并打开。
在单文件组件的<script>部分，导入footer-section组件和top-menu组件：

import FooterSection from '../components/Footer.vue';
import TopMenu from '../components/top-menu.vue';

然后，我们将导出一个defaultJavaScript 对象，其中name属性定义为Mainlayout，并使用导入的组件定义components属性：

export default {
  name: 'Mainlayout',
  components: {
    TopMenu,
    FooterSection,
  },
};

最后，在单文件组件的<template>部分，使用子top-menu组件、一个slot占位符和footer-section组件创建一个divHTML 元素：

<template>
  <div>
    <top-menu />
    <slot/>
    <footer-section />
  </div>
</template>

使用 Buefy 创建用户注册表单

现在，我们将创建用户注册表单并生成最终页面。在此步骤中，我们将把所有其他步骤的输出合并到一个页面中：

打开src文件夹中的App.vue文件。在单文件组件的<script>部分，导入main-layout组件和hero-section组件：

import Mainlayout from './layouts/main.vue';
import HeroSection from './components/heroSection.vue';

然后，我们将导出一个具有定义为App的name属性的defaultJavaScript 对象，然后使用导入的组件定义components属性。将data属性添加到 JavaScript 对象中，具有name、username、password、email、phone、cellphone、address、zipcode和country属性：

export default {
  name: 'App',
  components: {
    HeroSection,
    Mainlayout,
  },
  data: () => ({
    name: '',
    username: '',
    password: '',
    email: '',
    phone: '',
    cellphone: '',
    address: '',
    zipcode: '',
    country: '',
  }),
};

在单个文件的<template>部分，添加导入的main-layout组件，并添加hero-section作为子组件：

<template>
  <main-layout>
    <hero-section/>
  </main-layout>
</template>

在hero-section组件之后，使用section类创建一个同级sectionHTML 元素，并使用container类添加一个子divHTML 元素。在此divHTML 元素中，使用title is-3类和同级hrHTML 元素创建一个h1HTML 元素：

<section class="section">
  <div class="container">
    <h1 class="title is-3">Personal Information</h1>
    <hr/>
  </div>
</section>

然后，创建一个b-field组件作为hrHTML 元素的同级，其中Name表示label，并添加一个子b-input，该子b-input指令绑定到name。对email字段执行相同操作，将label更改为Email，并将v-model指令绑定到email。在电子邮件b-input中，添加一个定义为email的type属性：

<b-field label="Name">
  <b-input
    v-model="name"
  />
</b-field>
<b-field
  label="Email"
>
  <b-input
    v-model="email"
    type="email"
  />
</b-field>

创建一个具有grouped属性的b-field组件作为b-field组件的同级。然后，作为子组件，创建以下组件：
- 具有expanded属性且label定义为Phone的b-field组件。添加一个子b-input组件，其v-model指令绑定到phone和type为tel。
- 具有expanded属性且label定义为Cellphone的b-field组件。添加一个子b-input组件，其v-model指令绑定到cellphone和type为tel：

<b-field grouped>
  <b-field
    expanded
    label="Phone"
  >
    <b-input
      v-model="phone"
      type="tel"
    />
  </b-field>
  <b-field
    expanded
    label="Cellphone"
  >
    <b-input
      v-model="cellphone"
      type="tel"
    />
  </b-field>
</b-field>

然后，创建一个h1HTML 元素作为title is-3类的b-field组件的同级元素，并添加一个hrHTML 元素作为同级元素。创建一个b-field组件，其中label定义为Address，并添加一个b-input组件，其中v-model指令绑定到address：

<h1 class="title is-3">Address</h1>
<hr/>
<b-field
  label="Address"
>
  <b-input
    v-model="address"
  />
</b-field>

创建一个具有grouped属性的b-field组件作为b-field组件的同级。然后，作为子组件，创建以下组件：
- 具有expanded属性且label定义为Zipcode的子b-field组件。添加一个b-input组件，其中v-model指令绑定到zipcode并且type属性定义为tel。
- 具有expanded属性且label定义为Country的子b-field组件。添加一个b-input组件，其中v-model指令绑定到country并且type属性定义为tel：

<b-field grouped>
  <b-field
    expanded
    label="Zipcode"
  >
    <b-input
      v-model="zipcode"
      type="tel"
    />
  </b-field>
  <b-field
    expanded
    label="Country"
  >
    <b-input
      v-model="country"
    />
  </b-field>
</b-field>

然后，使用title is-3类创建一个h1HTML 元素作为b-field组件的同级元素，并添加一个hrHTML 元素作为同级元素。创建具有grouped属性的b-field组件。创建具有expanded属性且label定义为username的子b-field组件，并添加v-model指令绑定到username的b-input组件。对Password输入进行同样的操作，在b-input组件中将v-model指令定义为绑定到password的label更改为Password，并将type属性添加为password：

<h1 class="title is-3">user Information</h1>
<hr/>
<b-field grouped>
  <b-field
    expanded
    label="username"
  >
    <b-input
      v-model="username"
    />
  </b-field>
  <b-field
    expanded
    label="Password"
  >
    <b-input
      v-model="password"
      type="password"
    />
  </b-field>
</b-field>

最后，创建一个b-field组件作为b-field组件的同级，将position属性定义为is-right和grouped属性。然后，使用control类创建两个divHTML 元素。在第一个divHTML 元素中，添加一个buttonHTML 元素作为button is danger is-light类的子元素，在第二个divHTML 元素中，创建一个具有button is-success类的子buttonHTML 元素：

<b-field
  position="is-right"
  grouped
>
  <div class="control">
    <button class="button is-danger is-light">Cancel</button>
  </div>
  <div class="control">
    <button class="button is-success">Submit</button>
  </div>
</b-field>

它是如何工作的。。。

首先，我们创建一个 Vue CLI 项目，其中包含基本配置和附加的 CSS 预处理器node-sass。然后，我们能够使用 Vue CLI 和 Buefy 插件将 Buefy 框架添加到我们的项目中。使用 Buefy 框架，我们创建了一个布局页面组件，其中包含一个页眉菜单组件和一个页脚组件。

对于页面，我们使用 Bulma CSS 容器结构来定义页面，并将用户注册表单放置在默认网格大小上。然后，我们添加了 hero 部分组件，用于页面标识，最后，我们创建了用户注册表单和输入。

以下是最终项目启动和运行的屏幕截图：

另见

有关 Bulma 的更多信息，请访问 http://bulma.io/ T1-T1T2

有关 Buefy 的更多信息，请访问https://buefy.org/ 。

使用 Vuetify 创建页面、布局和用户表单

Vuetify 是 Vue 最著名的三大 UI 框架之一。基于 Google 的材料设计，该框架最初由 John Leider 设计，现在正在 Vue 生态系统中聚集，作为应用初始开发的 go-to-UI 框架。

在此配方中，我们将学习如何使用 Vuetify 创建布局组件包装、页面和用户注册表单。

准备

此配方的先决条件如下：

Node.js 12+
视图-CLI 项目

所需的 Node.js 全局对象如下：

@vue/cli
@vue/cli-service-global

怎么做。。。

我们将把这个食谱分为四个主要部分。第一节和第二节专门用于创建项目和安装框架，最后两节专门用于创建用户注册页面和创建该页面所需的组件。

创建 Vue CLI 项目

要将 Vuetify 与 Vue CLI 项目一起使用，我们需要创建具有预定义配置的自定义 Vue CLI 项目，以便我们能够充分利用框架及其提供的样式选项：

我们需要打开终端（macOS 或 Linux）或命令提示符/PowerShell（Windows）并执行以下命令：

> vue create vue-vuetify

首先，Vue CLI 将要求您选择预设；使用空格键选择Manually select features：

? Please pick a preset: (Use arrow keys)
  default (babel, eslint) ❯ Manually select features

现在 Vue CLI 将要求提供这些功能，您需要在默认功能的基础上选择CSS Pre-processors作为附加功能：

? Check the features needed for your project: (Use arrow keys) ❯ Babel
  TypeScript
  Progressive Web App (PWA) Support
  Router
  Vuex ❯ CSS Pre-processors ❯ Linter / Formatter
  Unit Testing
  E2E Testing

在这里，Vue CLI 将询问您要使用哪个CSS pre-processor；选择Sass/SCSS (with node-sass)：

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules   
  are supported by default): (Use arrow keys)
  Sass/SCSS (with dart-sass) ❯ Sass/SCSS (with node-sass) Less  Stylus

通过选择一根短绒并格式化，继续此过程。在本例中，我们将选择ESLint + Airbnb配置：

? Pick a linter / formatter config: (Use arrow keys)
  ESLint with error prevention only ❯ ESLint + Airbnb config ESLint + Standard config 
  ESLint + Prettier

选择短绒的其他特征（此处为[T0]）：

? Pick additional lint features: (Use arrow keys)
  Lint on save ❯ Lint and fix on commit

选择要放置 linter 和 formatter 配置文件的位置（此处，[T0]：

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys) ❯ In dedicated config files  In package.json

最后，Vue CLI 将询问您是否要为将来的项目保存设置；您将选择N。之后，Vue CLI 将为您创建一个文件夹并安装依赖项：

? Save this as a preset for future projects? (y/N) n

将 Vuetify 添加到 Vue CLI 项目

要在 Vue 项目中使用 Vuetify，我们将使用框架的 Vue CLI 插件安装：

在创建 Vue CLI 项目的文件夹中，打开终端（macOS 或 Linux）或命令提示符/PowerShell（Windows）并执行以下命令：

> vue add vuetify

Vue CLI 将询问您是否要选择安装预设。选择默认预设。然后，Vue CLI 将在项目上完成框架的安装：

? Choose a preset: (Use arrow keys)
❯ Default (recommended) 
 Prototype (rapid development) 
 Configure (advanced)

安装完成后，Vuetify 将配置项目中的文件以加载框架。现在您可以使用它了。

使用 Vuetify 创建布局

使用 Vuetify 作为 UI 框架，我们使用 Material Design guide 作为基础，因为通过使用 Material Design，我们可以遵循设计指南来创建我们的设计结构，这意味着更具吸引力的结构。您可以在找到材料设计指南 https://material.io/design/introduction#goals 。

创建顶栏组件

在这一部分中，我们将创建将在页面布局中使用的top-bar组件：

在src/components文件夹中，创建一个名为TopBar.vue的文件并打开它。
在单文件组件的<script>部分，我们将导出一个defaultJavaScript 对象，name属性定义为TopBar：

<script>
export default {
  name: 'TopBar',
};
</script>

在<template>部分内，创建一个v-app-bar组件，其中app、dark和dense属性定义为true，而color属性定义为primary：

<v-app-bar
 color="primary"
  app
  dark
  dense
></v-app-bar>

在组件内部，创建一个v-app-bar-nav-icon组件，在click事件上有一个事件监听器，点击按钮时发送一个事件'open-drawer'：

<v-app-bar-nav-icon
  @click="$emit('open-drawer')"
/>

最后，作为v-app-bar-nav-icon组件的同级，添加一个标题为页面或应用的v-toolbar-title组件：

<v-toolbar-title>Vue.JS 3 Cookbook - Packt</v-toolbar-title>

创建抽屉菜单组件

在 Material Design 应用中，我们有一个抽屉菜单，可以在页面上弹出。当用户点击我们刚刚在TopBar组件中创建的按钮时，将打开此菜单：

在src/components文件夹中，创建一个名为DrawerMenu.vue的文件并打开它。
在单文件组件的<script>部分，我们将导出一个具有三个属性的defaultJavaScript 对象：
- name属性，定义为DrawerMenu。
- props属性，定义为 JavaScript 对象，具有名为value的属性。此属性将是另一个 JavaScript 对象，具有type、required和default属性。type属性定义为Boolean、required属性定义为true、default属性定义为false。
- data属性，作为返回 JavaScript 对象的单例函数。这个对象将有一个menu属性，我们将其定义为将要使用的菜单项数组。数组将包含具有[T2]，然后是[T3]和[T4]属性的 Javascript 对象。第一个菜单项将把name定义为Home，然后把link定义为*#*，把icon定义为mdi-home。第二个菜单项将把name定义为Contact，然后将link定义为#，将icon定义为mdi-email。最后，第三个菜单项将name定义为Vuetify，然后link定义为#，icon定义为mdi-vuetify：

<script>
export default {
  name: 'DrawerMenu',
  props: {
    value: {
      type: Boolean,
      required: true,
      default: false,
    },
  },
  data: () => ({
    menu: [
      {
        name: 'Home',
        link: '#',
        icon: 'mdi-home',
      },
      {
        name: 'Contact',
        link: '#',
        icon: 'mdi-email',
      },
      {
        name: 'Vuetify',
        link: '#',
        icon: 'mdi-vuetify',
      },
    ],
  }),
};
</script>

在<template>部分，创建一个v-navigation-drawer组件，将value属性作为绑定到value道具的变量属性，将app属性定义为true，并在click事件上创建事件监听器，发送'input'事件：

<v-navigation-drawer
  :value="value"
  app
  @input="$emit('input', $event)"
></v-navigation-drawer>

创建一个v-list组件，其dense属性定义为true。作为子元素，创建一个v-list-item组件并定义以下内容：
- 迭代menu项的v-for指令。
- 项目菜单中带有index的key属性。
- link属性定义为true。
- 在v-list-item内部，创建带有VIcon子项的v-list-item-action，内部文本为item.icon。
- 创建一个v-list-item-content组件，作为v-list-item-action的同级，以v-list-item-title作为子元素，以item.name作为内部文本：

<v-list dense>
  <v-list-item
    v-for="(item, index) in menu"
    :key="index"
    link>
    <v-list-item-action>
      <v-icon>{{ item.icon }}</v-icon>
    </v-list-item-action>
    <v-list-item-content>
      <v-list-item-title>{{ item.name }}</v-list-item-
                                                 title>
    </v-list-item-content>
  </v-list-item>
</v-list>

创建布局组件

要创建布局组件，我们将使用所有已创建的组件，并添加一个用于保存页面内容的插槽：

在src/components文件夹中，创建一个名为Layout.vue的新文件并打开它。
在单文件组件的<script>部分，导入top-bar组件和drawer-menu组件：

import TopBar from './TopBar.vue';
import DrawerMenu from './DrawerMenu.vue';

然后，我们将导出一个defaultJavaScript 对象，其中name属性定义为Layout，然后使用导入的组件创建components属性。最后，添加data属性作为返回 JavaScript 对象的单例函数，其中drawer属性的值定义为false：

export default {
  name: 'Layout',
  components: {
    DrawerMenu,
    TopBar,
  },
  data: () => ({
    drawer: false,
  }),
};

在<template>部分内，创建一个v-app组件。作为第一个子级，添加top-bar组件，事件监听器位于open-drawer事件监听器上，将drawer数据属性更改为drawer属性的否定。然后，作为top-bar的同级，创建一个drawer-menu组件，其v-model指令绑定到drawer。最后，使用子元素<slot>创建一个v-content组件：

<template>
  <v-app>
    <top-bar
      @open-drawer="drawer = !drawer"
    />
    <drawer-menu
      v-model="drawer"
    />
    <v-content>
      <slot/>
    </v-content>
  </v-app>
</template>

使用 Vuetify 创建用户注册表单

现在，布局组件就绪后，我们将创建用户注册表单。由于 Vuetify 在表单中具有内置验证，因此我们将使用它来验证表单中的某些字段。

单文件组件

在这里，我们将创建单文件组件的<script>部分：

在src文件夹中，打开App.vue文件并清除其内容。
导入layout组件：

import Layout from './components/Layout.vue';

然后，我们将导出一个defaultJavaScript 对象，其中name属性定义为App，然后使用导入的组件定义components属性。将computed和methods属性定义为空 JavaScript 对象。然后创建一个data属性，该属性定义为返回 JavaScript 对象的单例函数。在data属性中，创建以下内容：
- 一个valid属性，其值定义为false；
- 定义为空字符串的 Aname、username、password、email、phone、cellphone、address、zipcode和country属性：

export default {
  name: 'App',

  components: {
    Layout,
  },

  data: () => ({
    valid: true,
    name: '',
    username: '',
    password: '',
    email: '',
    phone: '',
    cellphone: '',
    address: '',
    zipcode: '',
    country: '',
  }),
  computed: {},
  methods: {},
};

在computed属性中，创建一个名为nameRules的属性；此属性是一个返回数组的函数，其中一个匿名函数接收值并返回值或错误文本的验证。对passwordRules和emailRules属性执行相同的操作。在emailRules属性中，向返回的数组添加另一个匿名函数，通过正则表达式检查该值是否为有效电子邮件，如果该值不是有效电子邮件，则返回错误消息：

computed: {
  nameRules() {
    return [
      (v) => !!v || 'Name is required',
    ];
  },
  passwordRules() {
    return [
      (v) => !!v || 'Password is required',
    ];
  },
  emailRules() {
    return [
      (v) => !!v || 'E-mail is required',
      (v) => /.+@.+\..+/.test(v) || 'E-mail must be valid',
    ];
  },
},

最后，在methods属性中，创建一个名为register的新属性，该属性是一个调用$refs.form.validate函数的函数。另外，创建另一个名为cancel的属性，该属性是调用$refs.form.reset函数的另一个函数：

methods: {
  register() {
    this.$refs.form.validate();
  },
  cancel() {
    this.$refs.form.reset();
  },
},

单文件组件

是时候创建单文件组件的<template>部分了：

在src文件夹中，打开App.vue文件。
在<template>部分，创建一个layout组件元素，并添加一个v-container组件作为子级，其fluid属性定义为true：

<layout>
  <v-container
    fluid
  >
  </v-container>
</layout>

在v-container组件内部，创建一个子 HTMLh1元素和一个同级v-subheader组件，该子 HTMLh1元素具有页面标题和页面描述：

<h1>user Registration</h1>
<v-subheader>Main user registration form</v-subheader>

之后，创建一个v-form组件，其中ref属性定义为form，而lazy-validation属性定义为true。然后，组件的v-model指令被绑定到valid变量。创建一个子v-container组件，其fluid属性定义为true：

<v-form
  ref="form"
  v-model="valid"
  lazy-validation
>
  <v-container
    fluid
  >
  </v-container>
</v-form>

在v-container组件内部，创建一个v-row组件，然后添加一个v-col组件作为子组件，其cols属性定义为12。在v-col组件内部，创建一个v-card组件，其outlined属性和flat定义为true，class定义为mx-auto：

<v-row>
  <v-col
    cols="12"
  >
    <v-card
      outlined
      flat
      class="mx-auto"
    >
    </v-card>
  </v-col>
</v-row>

作为v-card组件的子元素，创建一个带有卡片标题的v-card-title组件，然后作为同级元素创建一个v-divider组件。之后，创建一个具有定义为true的fluid属性的v-container元素。在v-container元素内部，创建一个子v-row组件：

<v-card-title>
  Personal Information
</v-card-title>
<v-divider/>
<v-container
  fluid
>
  <v-row>
  </v-row>
</v-container>

在v-row组件内部，创建一个子v-col元素，其cols属性定义为12。然后在v-col组件内部，创建v-text-field，将v-model指令绑定到name变量，将rules变量属性定义为nameRules计算属性，将label属性定义为Name，最后将required属性定义为true：

<v-col
  cols="12"
>
  <v-text-field
    v-model="name"
    :rules="nameRules"
    label="Name"
    required
  />
</v-col>

作为v-col组件的同级，创建另一个v-col组件，其cols属性定义为12。然后，将v-text-field组件作为子组件添加，v-model指令绑定到email变量，rules变量属性定义为emailRules计算属性，type属性定义为email，label属性定义为E-mail，最后，required属性定义为true：

<v-col
  cols="12"
>
  <v-text-field
    v-model="email"
    :rules="emailRules"
    type="email"
    label="E-mail"
    required
  />
</v-col>

创建一个v-col组件作为v-col组件的同级，并将cols属性定义为6。然后，添加v-text-field组件作为子组件，v-model指令绑定到phone变量，label属性定义为Phone。对Cellphone输入进行同样的操作；您必须将绑定到cellphone变量和label的v-model指令更改为Cellphone：

<v-col
  cols="6"
>
  <v-text-field
    v-model="phone"
    label="Phone"
  />
</v-col>
<v-col
  cols="6"
>
  <v-text-field
    v-model="cellphone"
    label="Cellphone"
  />
</v-col>

现在我们将创建Address卡，作为v-row组件中v-col的兄弟。创建一个具有定义为12的cols属性的v-col组件。在v-col组件内部，创建一个v-card组件，其outlined属性和flat定义为true，而class定义为mx-auto。作为v-card组件的子元素，创建一个具有卡片标题的v-card-title组件；然后，作为同级元素，创建一个v-divider组件。然后，创建一个具有定义为true的fluid属性的v-container元素。在v-container元素内部，创建一个子v-row组件：

<v-col
  cols="12"
>
  <v-card
    outlined
    flat
    class="mx-auto"
  >
    <v-card-title>
      Address
    </v-card-title>
    <v-divider/>
    <v-container
      fluid
    >
      <v-row>
      </v-row>
    </v-container>
  </v-card>
</v-col>

在v-container组件中的v-row组件内部，创建一个v-col组件，其cols属性定义为12。然后，添加v-text-field作为子组件，v-model指令绑定到address变量，label属性定义为Address：

<v-col
  cols="12"
>
  <v-text-field
    v-model="address"
    label="Address"
  />
</v-col>

作为同级元素，创建一个v-col组件，其cols属性定义为6。将v-text-field组件添加为子组件。定义绑定到zipcode变量的v-text-field组件的v-model指令和定义为Zipcode的label属性：

<v-col
  cols="6"
>
  <v-text-field
    v-model="zipcode"
    label="Zipcode"
  />
</v-col>

然后，创建一个v-col组件，其cols属性定义为6。将v-text-field组件添加为子组件，将v-model指令绑定到country变量，并将label属性定义为Country：

<v-col
  cols="6"
>
  <v-text-field
    v-model="country"
    label="Country"
  />
</v-col>

现在我们将创建user Information卡作为v-row组件中v-col的兄弟。创建一个具有定义为12的cols属性的v-col组件。在v-col组件内部，创建一个v-card组件，其outlined属性和flat定义为true，而class定义为mx-auto。作为v-card组件的子元素，创建一个具有卡片标题的v-card-title组件；然后，作为同级元素，创建一个v-divider组件。然后，创建一个具有定义为true的fluid属性的v-container元素。在v-container元素内部，创建一个子v-row组件：

<v-col
  cols="12"
>
  <v-card
    outlined
    flat
    class="mx-auto"
  >
    <v-card-title>
      user Information
    </v-card-title>
    <v-divider/>
    <v-container
      fluid
    >
      <v-row>
      </v-row>
    </v-container>
  </v-card>
</v-col>

在v-container组件中的v-row组件内部，创建一个v-col组件，其cols属性定义为6。然后，添加v-text-field作为子组件，v-model指令绑定到username变量，label属性定义为username：

<v-col
  cols="6"
>
  <v-text-field
    v-model="username"
    label="username"
  />
</v-col>

作为同级，创建一个v-col组件，其cols属性定义为6，并添加一个v-text-field组件作为子组件，其v-model指令绑定到password变量，rules变量属性定义为passwordRules计算属性，label属性定义为Password：

<v-col
  cols="6"
>
  <v-text-field
    v-model="password"
    :rules="passwordRules"
    label="Password"
    type="password"
    required
  />
</v-col>

现在我们将创建操作按钮。作为顶部v-row组件v-col的同级，创建一个v-col组件，其cols属性定义为12，而class属性定义为text-right。在v-col组件内部，创建一个v-btn组件，其color属性定义为error，class属性定义为mr-4，并且click事件监听器连接到cancel方法。最后，创建一个v-btn组件作为同级，其中disabled变量属性作为valid变量的否定，color属性作为success，class属性作为mr-4，并且click事件侦听器连接到register方法：

<v-col
  cols="12"
  class="text-right"
>
  <v-btn
    color="error"
    class="mr-4"
    @click="cancel"
  >
    Cancel
  </v-btn>
  <v-btn
    :disabled="!valid"
    color="success"
    class="mr-4"
    @click="register"
  >
    Register
  </v-btn>
</v-col>

它是如何工作的。。。

在本教程中，我们学习了如何使用 Vuetify 和 Vue CLI 创建用户注册页面。要创建此页面，我们首先需要使用 Vue CLI 工具创建项目，然后向其中添加 Vuetify 插件，以便可以使用该框架。

然后，我们创建了top-bar组件，它保存应用标题和菜单按钮切换。为了使用菜单，我们创建了drawer-menu组件来保存导航项。最后，我们创建了layout组件，将top-bar和drawer-menu组件连接在一起，并添加了<slot>组件来放置页面内容。

对于用户注册表单页面，我们创建了三张卡，其中包含输入表单，这些表单绑定到组件上的变量。表单上的一些输入附加到一组验证规则，用于检查必填字段和电子邮件验证。

最后，在将数据发送到服务器之前，检查用户注册表单是否有效。

以下是最终项目启动和运行的屏幕截图：

另见

有关 Vuetify 的更多信息，请访问https://vuetifyjs.com/en/ 。

有关材料设计的更多信息，请访问https://material.io/ 。

使用 Ant Design 创建页面、布局和用户表单

Ant 设计框架由阿里巴巴集团创建，特别是由支付宝和 Ant Financial 背后的技术团队创建。这是一种主要由亚洲科技巨头使用的生态系统设计，在 React 和 Vue 社区有着广泛的应用。该框架专注于后台 UI，其主要核心是定制数据输入和数据表的解决方案。

在这里，我们将学习如何使用 Ant Design 和 Vue 创建用户注册表单，方法是使用表单创建顶栏组件、抽屉菜单、布局包装器和用户注册页面。

准备

此配方的先决条件如下：

Node.js 12+
视图-CLI 项目

所需的 Node.js 全局对象如下：

@vue/cli
@vue/cli-service-global

怎么做。。。

在这个配方中，我们将使用 Ant 设计框架创建一个用户注册表单。为此，我们将创建一个布局包装器和包装器所需的组件，最后，我们将创建保存用户注册表单的页面。

创建 Vue CLI 项目

我们需要创建一个 Vue CLI 项目，以便能够安装 Ant Design 插件并开始开发用户注册表：

我们需要打开终端（macOS 或 Linux）或命令提示符/PowerShell（Windows）并执行以下命令：

> vue create antd-vue

首先，Vue CLI 将要求您选择预设；使用空格键选择Manually select features：

? Please pick a preset: (Use arrow keys)
  default (babel, eslint) ❯ Manually select features

现在 Vue CLI 将要求提供这些功能，您需要在默认功能的基础上选择CSS Pre-processors作为附加功能：

? Check the features needed for your project: (Use arrow keys) ❯ Babel
  TypeScript
  Progressive Web App (PWA) Support
  Router
  Vuex ❯ CSS Pre-processors ❯ Linter / Formatter
  Unit Testing
  E2E Testing

在这里，Vue CLI 将询问您要使用哪个CSS pre-processor；选择Less：

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules 
  are supported by default): (Use arrow keys)
  Sass/SCSS (with dart-sass) 
  Sass/SCSS (with node-sass) ❯ Less 
  Stylus

通过选择一根短绒并格式化，继续此过程。在本例中，我们将选择ESLint + Airbnb配置：

? Pick a linter / formatter config: (Use arrow keys)
  ESLint with error prevention only ❯ ESLint + Airbnb config ESLint + Standard config 
  ESLint + Prettier

选择短绒的其他特征（此处为[T0]）：

? Pick additional lint features: (Use arrow keys)
  Lint on save
❯ Lint and fix on commit

选择要放置 linter 和 formatter 配置文件的位置（此处，[T0]：

? Where do you prefer placing config for Babel, ESLint, etc.? (Use 
  arrow keys) ❯ In dedicated config files  In package.json

最后，CLI 将询问您是否要为将来的项目保存设置；您应该选择N。之后，Vue CLI 将为您创建一个文件夹并安装依赖项：

? Save this as a preset for future projects? (y/N) n

将 Ant 设计添加到 Vue CLI 项目

要将 Ant Design framework 添加到 Vue CLI 项目中，我们需要使用 Vue CLI 插件将该框架作为项目依赖项安装，并使其在应用的全局范围内可用：

在创建 Vue CLI 项目的文件夹中，打开终端（macOS 或 Linux）或命令提示符/PowerShell（Windows）并执行以下命令：

> vue add ant-design

Vue CLI 将询问如何导入 Ant Design 组件；我们将选择Fully import选项：

? How do you want to import Ant-Design-Vue? 
❯ Fully import 
 Import on demand

Vue CLI 将询问您是否要覆盖 Ant DesignLESS变量；我们将选择N：

? Do you wish to overwrite Ant-Design-Vue's LESS variables? (y/N)

最后，Vue CLI 将询问 Ant 设计将在项目中使用的主要语言；我们将选择en_US：

? Choose the locale you want to load 
❯ en_US 
 zh_CN 
 zh_TW 
 en_GB 
 es_ES 
 ar_EG 
 bg_BG 
(Move up and down to reveal more choices)

用 Ant Design 创建布局

为了能够创建一个用户注册表单，我们将创建一个基本布局来包装页面内容和表单。在这里，我们将创建top-bar组件、drawer-menu组件和layout包装器。

创建顶栏组件

在layout包装器中，我们将有一个top-bar组件，用于保存用户当前所在位置的面包屑。现在我们将创建top-bar组件并使其可用于布局：

在src/components文件夹中，创建一个名为TopBar.vue的新文件并打开它。
1. 在单文件组件的<script>部分，我们将导出一个defaultJavaScript 对象，其name属性定义为TopBar：
js <script> export default { name: 'TopBar', }; </script>
1. 在单文件组件的<style>部分，我们将创建<style>部分scoped并创建一个名为header-bread的类。现在，background-color将被定义为#f0f2f5，一个名为bread-menu的类，其边距定义为16px 0：
```js .header-bread { background-color: #f0f2f5; }

.bread-menu { margin: 16px 0; } ```
1. 在单文件组件的<template>部分，我们将创建一个a-layout-component组件，其class属性定义为header-bread。另外，添加一个a-breadcrumb组件作为子元素，其class属性为bread-menu：
js <template> <a-layout-header class="header-bread"> <a-breadcrumb class="bread-menu"> </a-breadcrumb> </a-layout-header> </template>
1. 作为a-breadcrumb组件的子组件，创建两个a-breadcrumb-item组件，并向每个组件添加用户位置的方向。在我们的例子中，第一个是user，第二个是Registration Form：
js <a-breadcrumb-item>user</a-breadcrumb-item> <a-breadcrumb-item>Registration Form</a-breadcrumb-item>

创建抽屉菜单

在布局设计中，我们将有一个抽屉菜单组件作为用户的导航菜单。这里我们将创建Drawer组件：
1. 在src/components文件夹中，创建一个名为Drawer.vue的文件并打开它。
2. 在单文件组件的<script>部分，我们将导出一个具有两个属性的defaultJavaScript 对象。name属性定义为Drawer，而data属性定义为返回 JavaScript 对象的singleton函数。在data属性中，创建以下内容：
  - 定义为false的drawer属性。
  - 一个menu属性，我们将其定义为将要使用的菜单项数组。菜单数组将有三个 JavaScript 对象，分别具有name和icon属性。此阵列将具有：
    - 属性name定义为Home且icon定义为home的 JavaScript 对象
    - 属性name定义为Ant Design Vue且icon定义为ant-design的 JavaScript 对象
    - 属性name定义为Contact且icon定义为mail的 JavaScript 对象：
js <script> export default { name: 'Drawer', data: () => ({ drawer: false, menu: [ { name: 'Home', icon: 'home', }, { name: 'Ant Design Vue', icon: 'ant-design', }, { name: 'Contact', icon: 'mail', }, ], }), }; </script>
1. 在单文件组件的<template>部分，创建一个a-layout-sider组件，v-model指令绑定到drawer变量，collapsible属性定义为true。作为子级，创建一个a-menu组件，其中default-selected-keys变量属性定义为['1']、theme属性定义为dark、mode属性定义为inline：
```js <a-layout-sider v-model="drawer" collapsible
```
<a-menu
  :default-selected-keys="['1']"
  theme="dark"
  mode="inline"

</a-menu>
```
```
1. 最后，在a-menu组件内部，创建一个a-menu-item组件，v-for指令迭代menu变量，并创建item和index临时变量。然后，将key变量属性定义为index。创建一个子AIcon组件，其type变量属性为item.icon，具有兄弟spanHTML 元素，内容为item.name：
```js <a-menu-item v-for="(item,index) in menu" :key="index"

{{ item.name }} ```

创建布局组件

在这里，我们将创建layout组件。此组件将top-bar组件和Drawer菜单组件连接在一起，为用户注册页面制作包装：
1. 在src/components文件夹中，创建一个名为Layout.vue的新文件并打开它。
2. 在单文件组件的<script>部分，导入top-bar组件和drawer-menu组件：
js import TopBar from './TopBar.vue'; import Drawer from './Drawer.vue';
1. 然后，我们将导出一个具有name属性的defaultJavaScript 对象，定义为layout。然后用导入的组件定义components属性。
js export default { name: 'layout', components: { Drawer, TopBar, }, };
1. 在单文件组件的<template>部分，创建一个a-layout组件，其style属性定义为min-height: 100vh。然后，将Drawer组件作为子级添加。作为drawer组件的同级，创建a-layout组件：
```js <a-layout style="min-height: 100vh"
```
<drawer />
<a-layout>
  <top-bar />
  <a-layout-content style="margin: 0 16px">
    <div style="padding: 24px; background: #fff; 
        min-height: auto;">
      <slot />
    </div>
  </a-layout-content>
  <a-layout-footer style="text-align: center">
    Vue.js 3 Cookbook | Ant Design ©2020 Created by Ant UED
  </a-layout-footer>
</a-layout>
```
```
1. 在a-layout组件中，添加top-bar组件和style属性定义为margin: 0 16px的兄弟a-layout-content组件。作为该组件的子级，创建一个具有定义为padding: 24px; background: #fff; min-height: auto;的style属性的divHTML 元素，并添加一个slot占位符。最后，创建一个a-layout-footer组件，其style属性定义为text-align:center;，页面的页脚文本：
js <top-bar /> <a-layout-content style="margin: 0 16px"> <div style="padding: 24px; background: #fff; min-height: auto;"> <slot /> </div> </a-layout-content> <a-layout-footer style="text-align: center"> Vue.js 3 Cookbook | Ant Design ©2020 Created by Ant UED </a-layout-footer>

使用 Ant Design 创建用户注册表单

现在，我们将创建用户注册页面和表单，该页面和表单将放置在前面步骤中创建的布局中。

单文件组件

这里我们将创建单文件组件的<script>部分：
1. 在src文件夹中，打开App.vue文件并清除其内容。
2. 导入layout组件：
js import Layout from './components/Layout.vue';
1. 然后，我们将导出一个defaultJavaScript 对象，其中name属性定义为App，使用导入的组件定义components属性，最后将data属性定义为返回 JavaScript 对象的单例函数。在data属性中，创建以下内容：
  - 定义为 JavaScript 对象的labelCol属性，具有span属性和值4。
  - 定义为 JavaScript 对象的wrapperCol属性，具有span属性和值14。
  - 一个定义为 JavaScript 对象的form属性，其中name、username、password、email、phone、cellphone、address、zipcode和country属性都定义为空字符串：
js export default { name: 'App', components: { Layout, }, data() { return { labelCol: { span: 4 }, wrapperCol: { span: 14 }, form: { name: '', username: '', password: '', email: '', phone: '', cellphone: '', address: '', zipcode: '', country: '', }, }; }, };

单文件组件

是时候创建单文件组件的<template>部分了：
1. 在src文件夹中，打开App.vue文件。
2. 在<template>部分，创建layout组件元素，并将a-form-model组件作为子组件添加，其中model变量属性绑定到form、label-col变量属性绑定到labelCol、wrapper-col变量属性绑定到wrapperCol：
```js <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol"

```
1. 然后，作为layout组件的同级，创建一个带有页面标题User Registration的h1HTML 元素和一个带有Main user registration form页面字幕的pHTML 元素。然后，创建一个具有定义为Personal Information的title属性的a-card元素：
js <h1> User Registration </h1> <p>Main user registration form</p> <a-card title="Personal Information"></a-card>
1. 在a-card组件中，创建一个a-form-model-item组件作为子元素，其label属性定义为Name，并添加一个子a-input组件，其v-model指令绑定到form.name变量：
js <a-form-model-item label="Name"> <a-input v-model="form.name" /> </a-form-model-item>
1. 接下来，作为同级，创建一个a-form-model-item组件，该组件的label属性定义为Email，并添加一个子a-input组件，该子a-input组件的v-model指令绑定到form.email变量，而type属性定义为email：
js <a-form-model-item label="Email"> <a-input v-model="form.email" type="email" /> </a-form-model-item>
1. 创建一个元素a-form-model-item组件，其label属性定义为Phone，并添加一个子a-input组件，其v-model指令绑定到form.phone变量：
js <a-form-model-item label="Phone"> <a-input v-model="form.phone" /> </a-form-model-item>
1. 创建一个a-form-model-item组件，其label属性定义为Cellphone，并添加一个子a-input组件，其v-model指令绑定到form.cellphone变量：
js <a-form-model-item label="Cellphone"> <a-input v-model="form.cellphone" /> </a-form-model-item>
1. 作为a-card组件的同级，创建一个a-card组件，其title属性定义为Address，而style属性定义为margin-top: 16px;。然后，添加一个label属性定义为Address的子a-form-model-item组件，并添加一个v-model指令绑定到form.address变量的子a-input组件：
js <a-card title="Address" style="margin-top: 16px"> <a-form-model-item label="Address"> <a-input v-model="form.address" /> </a-form-model-item> </a-card>
1. 接下来，作为a-card组件的同级，创建一个a-form-model-item组件，其label属性定义为Zipcode，并添加一个子a-input组件，其v-model指令绑定到form.zipcode变量：
js <a-form-model-item label="Zipcode"> <a-input v-model="form.zipcode" /> </a-form-model-item>
1. 创建一个a-form-model-item组件，其label属性定义为Country，并添加一个子a-input组件，其v-model指令绑定到form.country变量：
js <a-form-model-item label="Country"> <a-input v-model="form.country" /> </a-form-model-item>
1. 作为a-card组件的同级，创建一个a-card组件，其title属性定义为User Information，而style属性定义为margin-top: 16px;。然后，添加一个label属性定义为username的子a-form-model-item组件，并添加一个v-model指令绑定到form.username变量的子a-input组件：
js <a-card title="user Information" style="margin-top: 16px"> <a-form-model-item label="username"> <a-input v-model="form.username" /> </a-form-model-item> </a-card>
1. 创建一个a-form-model-item组件，其label属性定义为Password，并添加一个子a-input-password组件，其v-model指令绑定到form.password变量，visibility-toggle属性定义为true，而type属性定义为password：
js <a-form-model-item label="Password"> <a-input-password v-model="form.password" visibility-toggle type="password" /> </a-form-model-item>
1. 最后，作为a-card组件的同级，使用定义为 JavaScript 对象{span: 14, offset: 4}的wrapper-col变量属性创建a-form-model-item。然后，添加一个子a-button，其type定义为primary，文本为Create，另一个子a-button的style属性定义为margin-left: 10px;且文本为Cancel：
js <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }"> <a-button type="primary"> Create </a-button> <a-button style="margin-left: 10px;"> Cancel </a-button> </a-form-model-item>

它是如何工作的。。。

在本教程中，我们学习了如何使用 Ant Design 和 Vue CLI 创建用户注册页面。要创建此页面，我们首先需要使用 Vue CLI 创建一个项目，并向其中添加 Vue 插件的 Ant Design，以便可以使用该框架。

然后，我们创建了top-bar组件，它保存导航面包屑。对于用户导航，我们创建了一个自定义的Drawer组件，该组件底部有一个内联切换按钮。最后，我们创建了layout组件来将这两个组件连接在一起，并添加了<slot>组件来放置页面内容。

最后，我们创建了用户注册表单页面，其中包含三张卡，其中包含绑定到组件上变量的输入表单。

以下是最终项目启动和运行的屏幕截图：

另见

有关 Ant Design 和 Vue 的更多信息，请访问https://vue.ant.design/ 。

版权属于：月萌API www.moonapi.com，转载请注明出处

本文链接：https://www.moonapi.com/news/14317.html

数据知识

系统公告

开发文档

vue查看更多书籍

《VueJS3 秘籍》

vue 九、使用 UI 框架创建漂亮的应用

九、使用 UI 框架创建漂亮的应用

技术要求

使用 Buefy 创建页面、布局和用户表单

准备

怎么做。。。

创建 Vue CLI 项目

将 Buefy 添加到 Vue CLI 项目

使用 Buefy 创建布局和页面

创建标题菜单组件

创建英雄部分组件

创建页脚组件

创建布局组件

使用 Buefy 创建用户注册表单

它是如何工作的。。。

另见

使用 Vuetify 创建页面、布局和用户表单

准备

怎么做。。。

创建 Vue CLI 项目

将 Vuetify 添加到 Vue CLI 项目

使用 Vuetify 创建布局

创建顶栏组件

创建抽屉菜单组件

创建布局组件

使用 Vuetify 创建用户注册表单

单文件组件

单文件组件

它是如何工作的。。。

另见

使用 Ant Design 创建页面、布局和用户表单

准备

怎么做。。。

创建 Vue CLI 项目

将 Ant 设计添加到 Vue CLI 项目

用 Ant Design 创建布局

创建顶栏组件

创建抽屉菜单

创建布局组件

使用 Ant Design 创建用户注册表单

单文件组件

单文件组件

它是如何工作的。。。

另见

留言

联系客服

vue 查看更多书籍