先宣传一下我自己的 UI 框架 Laby UI - 一个基于Vue3的UI框架

既然是一个 UI 框架，总要有展示的地方吧

让我们先搭一个官网

注意，本教程的所有样式表，可以直接照抄

如有修改需求，再去研究具体写了什么，不然从零研究实在太难了

设计选型

从零自己想一个官网也太难了，还是参考一下别人的官方文档设计

本 UI 框架参考了 element UI 的设计风格

大致提供了如下页面

顶边栏
首页
文档页
1. 侧边栏
2. 内容区域

然后选择一个自己的风格，既然 element 选择了蓝色风格，我就选择粉色的风格吧

绝对不是什么个人恶趣味，而是来自艾尔之光 - 娜薇，2333

需求分析

位置	特性
布局	两侧留白，内容在中间最大宽度 1200px，小于 1200px 时，宽度 100% 小于 500px 时，变为手机版
顶边栏	左侧是通往首页的跳转链接，右侧是通往文档页的跳转链接视口小于 500px 时，只显示前往首页的跳转
首页	分为两部分，视觉效果部分和特点介绍部分
首页-视觉	粉色极光背景，中间放置两个跳转链接，一个前往 github 查看代码，另一个前往文档页
首页-特点	包含3个特点，分别是 1. 使用了 vue3 新特性 2. 使用 ts 3. 代码易读
文档页	文档页实际由顶边栏和本体构成，本体包含侧边栏和内容区域
顶边栏-文档页	小于 500px 时，在左侧额外显示弹出侧边栏的按键，并使得侧边栏不可见
侧边栏	默认可见，选中高亮，但视口宽度小于 500px 时，默认不可见包含两个部分：指南和组件，各自有子级跳转
内容区域	根据侧边栏中选中的链接，显示 md 内容或组件范例内容

搭建官网

可以通过 vite 新建一个 vue3 项目

此处将项目命名为 laby-ui

运行以下命令即可创建

1
2
3

mkdir laby-ui
cd laby-ui
cva .

然后运行以下命令，进行初始化，并启动应用

1 2	npm install npm run dev

现在，就可以在 http://localhost:3000/ 预览项目了

然后照抄淘宝移动端的 meta，以便更好适配移动端

1 2	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">

然后，因为我们是 ts 项目，所以把 main.js 改为 main.ts

这时候，ts 可能无法识别 vue 后缀文件，加一个 shims 就好了

// shims.d.ts
declare module '*.vue' {
  import { ComponentOptions } from 'vue'
  const componentOptions: ComponentOptions
  export default componentOptions
}

当静态报错为”无法识别 vue 后缀的文件”时，打开该 ts，再返回原代码，即可解决红线报错

整体布局设计

根据需求分析，我们得到如下推论

首先，最大宽度等限制，是作用于整个 app 上的，所以这方面的样式应该写在 app.vue 上

其次，首页和文档页的顶边栏，其功能分别为

位置	功能
首页	不可以弹出菜单
文档页	根据情况显示或隐藏菜单

可见并不完全相同，也就是说不是同一个组件的复用，所以应该将顶边栏组件分别嵌入首页和文档页组件，而不是嵌入 app.vue

然后，首页显然没有侧边栏，所以首页的内容直接写在其模板内即可，而文档页需要侧边栏和内容区域

但是文档页的侧边栏，实际上与弹出的顶部菜单是相同的内容，所以只需要编写一次，然后复用为侧边栏和顶部菜单即可

除此之外，文档页的内容区域，还要分别展示 markdown 内容和组件内容，所以内容区域要分成两种进行编写

综上，首页大致为上下结构，恒定不变；文档页大致为T字结构，小于 1200px 时为上下结构，附有弹出菜单的选项。图示可以参考 Laby UI

让我们先完成 App 整体的控制

先引入总控制的样式表 index.scss，记得删除旧的 index.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul,
ol {
  list-style: none;
}
a {
  text-decoration: none;
  color: inherit;
  &:hover {
    text-decoration: underline;
    cursor: pointer;
  }
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
}

body {
  font-size: 16px;
  line-height: 1.5;
  color: #1d2c40;
  font-family: -apple-system, "Noto Sans", "Helvetica Neue", Helvetica,
    "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB",
    "Noto Sans CJK SC", "Source Han Sans SC", "Source Han Sans CN",
    "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti",
    SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;
}
.icon {
  width: 1em; height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

然后修改 main.ts 中的引入

1	import './index.scss'

最后完成 App.vue 的内容

<template>
  <div class="app">
    <router-view />
  </div>
</template>

<script lang="ts">
export default {
  name: "App",
};
</script>
<style lang="scss" scoped>
$max-width: 1200px;
.app {
  max-width: $max-width;
  margin-left: calc(50vw - 600px);
  position: relative;
  @media (max-width: $max-width) {
    margin-left: 0;
  }
}
</style>

通过 background-color 检查一下宽度，ok

注意使用 scss 需要安装 sass 依赖

1	npm install -D sass

千万不要丢了 -D，否则就不是安装到开发环境了

路由设计

既然有多个页面，那肯定就要通过路由进行跳转

路由显然是使用 vue-router，首先安装它

要注意，默认安装的 vue-router 是 3.x.x 版本的，只能用于 vue2

要想用于 vue3，必须是 4.x.x 版本

通过 npm info vue-router 可以看到最新版（next 版本）是 4.0.4（如有变化，下载最新版即可），则我们通过

1	npm install vue-router@4.0.4

安装适合 vue3 的 vue-router

然后设计路由，这个因人而异，这里给出我的路由设计如下

目标	路由
首页	/
文档页	/document
文档页 - 介绍	/document/introduction
文档页 - 安装	/document/install
文档页 - 快速上手	/document/start
文档页 - [组件名]	/document/[componentName]

至于 router.ts 的内容，因为现在暂无视图，所以我们先搁置，写一个空的引入就好

// src/router.ts
import { createWebHistory, createRouter } from 'vue-router'

const history = createWebHistory()
const router = createRouter({
    history,
    routes: [
    ]
})
export default router

然后在 main.ts 中引入

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import './index.scss'
import router from './router'

createApp(App).use(router).mount('#app')

使用 svg

有时候只有文字不太好看，有图片比较好

可以使用 icon font 提供的免费图标，使用教程大致如下

选择喜欢的图标，加入购物车
新建一个项目，或选择一个已有项目，将购物车里的图标加入该项目
进入”我的项目”，生成新的引用链接
选择 Symbol 模式，复制链接，粘贴到本地项目的 index.html 的新 script 标签中

之后就可以在本地使用如下的方式引用 svg 了

1
2
3

<svg>
    <use xlink:href="#icon-Vue"></use>
</svg>

svg 的命名，参考 icon font 上”我的项目”里设置的每个图标的名称

！！！如果图标有任何变化（包括数量或命名等），必须重新生成引用链接！！！

其余部分

篇幅所限，其余部分分开写了，请按顺序查看以下文章

感谢阅读