平台开发快速入门手把手教程（二）前端代码精进

项目介绍

在 平台开发快速入门手把手教程（一） 教程中，我们使用 Vue 初始化了一个界面，并使用 Nginx 将其部署，使得用户可从公网访问。在该篇教程中，我们将在目前可运行版本上做修改，使之满足我们实际需用需求，并从中学习细节。

Vue 初始项目代码解读

在入门阶段，我们只了解那些我们需要修改的部分代码含义，达成修改目标。暂时忽略其它代码。在 Vue 初始化项目中，我们需要关注和修改的内容都在 ./src 文件夹内，包括三个与整体骨架相关的文件： main.js, App.vue, ./src/router/index.js 以及其它单独页面的实现文件：/src/components/ 下所有的 .vue 文件，./src/views/ 下所有的 .vue 文件。

main.js

main.js 文件是项目的整体声明

const app = createApp(App) 使用调用的 createApp 方法创建了一个实例，实例的具体界面内容是 App.vue，这相当于一个俄罗斯套娃的最外层，它包含了所有页面，我们将在下一子章节中解读。

app.use(router) 类似于对已创建的实例加载额外功能，加载别的插件。此处加载的 router 是调用来的，同其名字一样，为原有 app 增加了控制路由功能。我们在后面为我们的 app 加载额外的 Ant Design Vue 功能，也是通过该方法实现。

app.mout('#app') 是在功能定义结束后的收尾句。

import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(router)

app.mount('#app')

App.vue

相当于一个俄罗斯套娃的最外层，它就包含了所有页面。

代码共分为三部分
1. < template > 和 < /template > 之间的部分
这部分的代码使用 html 语言，负责了页面的整体布局。我们在这部分需要完成样式设计的任务，比如我们都需要在页面上放置些什么，放置在什么位置。这是必不可缺的部分，其它两部分都是为了更好的服务和调整 html 中的元素。

2. < script > 和 < /script > 之间的部分
这部分的代码和开发算法时接触到的 C++, Python 等语言更为相近，我们将在这部分实现 import 导入，定义变量，定义函数等一些功能。

3. < style > 和 < /style > 之间的部分
这部分的代码负责样式的精调，包括字体大小、背景颜色等，都可以在此处调整。

本篇文章主要分析 template 部分

<template>
  <header>
    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <HelloWorld msg="You did it!" />

      <nav>
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/about">About</RouterLink>
      </nav>
    </div>
  </header>

  <RouterView />
</template>

1. <header>是一类特殊的样式类型，例如我们使用 <h1> 你好 </h1>，< h1 > 之间的内容就会系统被理解为是标题，并使用标题样式展示。此处我们用 < header > 括住了多行内容，这表示，这些内容都应当被识别为 header，并使用对应的样式展示。

2. <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
   该段较好理解，即在界面放置了一个图片，其中 src 指明了图片的位置，读者可尝试在 ‘./src/assets/’ 路径中放入自己的图片，然后将该部分代码替换为 src=“@/assets/图片名称”，实现图片的替换。值得注意的是，之前提到的样式均是通过 < 类型 > 内容 </ 类型> 的方式定义的，按照这种方式，此处的代码也可写作 < img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125"> < /img >，但可以发现以 < 类型 > 内容 </ 类型> 的格式来解读的话，此处其实并没有需要填写的 内容，于是就可以使用这里的简写格式 < img />。

3. <div class="wrapper"> 定义了一个类，表示 < div > < /div > 之间的内容被归为一类，就像一个学校，又再分出年级，分出班级，出于便捷性角度考虑，我们将具有相似定义要求的内容归为一类，可以统一修改样式。

4. <HelloWorld> 和 <header> 一样，都是一种特殊的样式，但需要说明的是，有些样式名称是系统默认存在的，例如 <header>，只要写出来，系统就能识别这是什么样式，这类默认的样式都有哪些读者可以在后续越来越多的实践中不断积累。此处需要指出的是 <HelloWorld> 样式并不是默认样式，而是在 < script > 部分导入的一种自定义模板，这种自定义的模板如何使用当然要参考原模板的要求。在学习前期，推荐首先使用默认样式，因此如何制作一个自己的模板，以及如何解读、使用他人定义的额外模板我们先不做详细分析。

5. <RouterLinker> 系统默认样式，提供了路由类型的元素，to="/" 部分表示点击该元素后，将跳转至 “/” 界面；Home 部分是显示样式，这个可点击的超链接以 Home 字样对外显示。

6. <RouterView /> 系统默认样式。在学习过程中，我们需要掌握两点，第一点是设计想法，第二点是如何使用代码将这一想法实现出来。
   首先我们先分析网页的设计想法：我们的网页名称为 localhost:5173，页面包括有 localhost:5173/ 和 localhost:5173/home（我将它称为 localhost:5173 的子页面）。我希望所有的页面都分为两部分，一部分是左侧的固定画面，这部分所有的页面内容相同，雷打不动。一部分是右侧的动态画面，这部分将因子页面而异。
   然后哦我们来看代码是如何实现这个想法的。我们之前提到 App.vue 是俄罗斯套娃的最外层，掌管着所有页面信息，因此，所有页面的共同部分直接写在这个 App.vue 中就可以了。而动态部分则需要 <RouterView/> 来实现，这相当于在此处规划了一片区域，具体这片区间将展示些什么内容，将会在不同页面的定义中告诉系统。

根据上述分析，假设我们的设计想法是，所有的页面都含有一个通用的 logo，但其它内容不同界面都独立设计，完全不相同，那么我们整段< template > 部分代码应该只包含两行，形式如下

<template>
    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="50" height="50" />
    <RouterView />
</template>

读者可以自行验证这种想法。该想法如果按预期执行，这也将标志着我们的理解是正确的。

至此，我们就将 App.vue 部分解读完毕了。通过这部分我们已经初步具备了设计一个页面的能力，随着我们学会更多的样式，例如 < h1 > 样式，< uploader > 样式，我们就可以设计出更好的界面。但还有一个问题，即该段代码并没有体现出动态部分是如何完成设计的。这个问题也将在下面的解读板块中得到解答。

index.js

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import AboutView from '../views/AboutView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      component: AboutView
    }
  ]
})

export default router

可以注意到，我对原代码做了修改，修改了 about 界面处 component 的声明方式，以及对应的 import 了 AboutView。原代码中的懒加载在初期学习时可以先不考虑。这伴随着不必要的学习成本，阻碍了我们在前期快速搭建一个我们心目中的界面。

这部分的代码包括
import HomeView from '../views/HomeView.vue' 从文件中导入我们设计的其它界面，其中 import xxx from ‘path’ 中的 xxx 即为导入后的名称，可自定义，例如读者可将原代码尝试修改为 import HzyEmile from '../views/HomeView.vue' + {path: '/',name: 'home',component: HzyEmile}, 这将具有完全相同的效果。

以及路由定义部分
实际上，我们只需要关注下述部分，我们需要将所有的子页面都按照下述方式定义，每个子页面我们需要提供

1. path 这代表了子页面的路径，例如 path: '/test' 意味着该页面应当通过 localhost:5173/test 访问
2. name 这表示我们对这个页面的内部命名代码，后续我们想要 @ 这个界面时需要用到这个名称，在前期学习属于不关键的信息
3. component 表示这个界面的设计样式，我们需要在这部分告诉系统 localhost:5173/test 的 < RouterView > 部分到底长成什么样。实现方式就是先从 .vue 文件中 import 进来，再赋值在此处。

routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      component: AboutView
    }
  ]

实践环节！

经过上述阶段的代码阅读和学习之后，让我们来运用知识做一个简单实践！假设我的需求是，想要创立一个额外的子界面，可通过 localhost:5173/testt 访问，该子界面只有一个 “Hello World” 字样（读者可以根据自己的想法，学习对应的组件，设计更复杂的界面；或者使用现成模板；或者让 gpt 来写）。

现在让我们来实现它！主要分为两个步骤，步骤一：把这个界面设计出来（参考 App.vue 中是怎么做的），步骤二：把这个子页面融入到现有体系中（修改 index.js)，其它都不需要修改。

步骤一
创建 ‘./src/views/Testtt.vue’ 文件

<template>
    Hello World!
</template>

步骤二
在 index.js 中增加一段 import Testtt from '../views/Testtt.vue' 和一段 { path: '/testtt', name: 'testtt', component: Testtt }

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import AboutView from '../views/AboutView.vue'
import Testtt from '../views/Testtt.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      component: AboutView
    },
    {
      path: '/testtt',
      name: 'testtt',
      component: Testtt
    }
  ]
})

export default router

完成修改后执行 npm run dev 编译，如果我们的命令行本身就已经处于 npm run dev 阶段了，那我们在修改代码后使用 ctrl + s 保存时，实际上界面也会对应的重新编译和实现。由于我们没有为这个界面设置跳转方式，所以我们需要手动在网页中输入网址 http://localhost:5173/testtt 跳转至界面。

测试成功！

使用 Ant Design Vue

至此，我们已经具备了对原代码的修改能力，可以构建出属于自己的网页了，但如何将网页设计的好看其实也需要相当的时间和精力。但好消息是，对于初步上手者而言，实际上有许多已经设计好的组件供我们使用。

Vue 架构实际上帮助我们快速创建了一个界面的骨干，相当于提供了一个画布、完成了承重墙和毛坯房的搭建。 而一些组件库，如 Ant Design Vue （阿里 Ant Design of Vue 官网组件库） 则提供了丰富的基础 UI 组件，为我们提供了图案、提供了精装修所需的积木。遵循于该套架构和生态，我们可以使用现成的代码，快速的按需构建出我们的界面。

我将在后续的文章中介绍如何快速搭建出下图这样更酷炫的界面！