Jeremy UI 前端框架开发（一）

写在前面

开始

大前端时代，最近在面试前端工程师的过程中，有感而发，技术更新迭代快，学习成本高。浏览了各大博客论坛，千差万别，比较混乱。最终决定参考 Element UI 的设计风格，主题色选择紫色（受到 MaterialDesignInXamlToolkit 的影响），写一套基于 Vue3 的 UI 框架库和对应的官方网站，方便后期在项目中快速使用，也算是对 Vue3 新特性的学习和总结。

分析官网

界面布局

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

主题风格

紫色

详细说明

搭建官网

创建方式有很多，而我这里选择通过 Vite 进行创建 Vue3 项目，在开始之前我们需要注意兼容性问题：

Vite 需要 Node.js 版本 >= 12.0.0

使用 npm 创建 jeremy-ui 项目

•直接创建

mkdir jeremy-ui
cd jeremy-ui
cva .

•脚手架创建（根据提示信息创建即可，注意选择 vue -> vue-ts）

启动项目

cd jeremy-ui
npm install
npm run dev

正常情况下，你就可以在浏览器上( http://localhost:3000/ ) 预览项目了。

注意 如果你不是通过脚手架去创建的项目，那么你可能需要将 main.js 改成 main.ts 。另外，你还> 需要在 src 目录下添加 shims.d.ts 文件，让 ts 文件能够识别 vue 后缀的文件。

shims.d.ts 文件源码如下：

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

整体布局设计

根据之前的分析，我们能够得出结论，首先，最大宽度限制需要作用到 app 上，所以相应的样式应该写在 app.vue 上，其次，首页和文档页的顶边栏，其功能为：

可见并不完全相同，也就是说不是同一个组件的复用，所以应该将顶边栏组件分别嵌入首页和文档页组件，而不是嵌入 app.vue ，然后，首页显然没有侧边栏，所以首页的内容直接写在其模板内即可，而文档页需要侧边栏和内容区域，但是文档页的侧边栏，实际上与弹出的顶部菜单是相同的内容，所以只需要编写一次，然后复用为侧边栏和顶部菜单即可。

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

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

总体样式表 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 中的引入

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>

依赖包的安装

请参考 package.json 文件，对应更新一下，然后再项目根目录下执行 npm install 即可。

{
  "name": "jeremy-ui",
  "version": "0.0.3",
  "files": [
    "lib/*"
  ],
  "main": "lib/jeremy.js",
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "dependencies": {
    "github-markdown-css": "^4.0.0",
    "marked": "^1.2.8",
    "prismjs": "^1.23.0",
    "vue": "^3.0.4",
    "vue-router": "^4.0.4"
  },
  "devDependencies": {
    "@vue/compiler-sfc": "^3.0.4",
    "rollup-plugin-esbuild": "^4.7.2",
    "rollup-plugin-scss": "^3.0.0",
    "rollup-plugin-terser": "^7.0.2",
    "rollup-plugin-vue": "^6.0.0",
    "sass": "^1.44.0",
    "vite": "^1.0.0-rc.13"
  }
}

路由设计

既然有多个页面，那肯定就要通过路由进行跳转。路由显然是使用 vue-router，首先安装它。要注意，默认安装的 vue-router 是 3.x.x 版本的，只能用于 vue2，要想用于 vue3，必须是 4.x.x 版本

通过 npm info vue-router 可以看到最新版（ next 版本）是 4.0.4（如有变化，下载最新版即可），则我们通过 npm install [email protected] 安装适合 vue3 的 vue-router。

Jeremy UI 官网的路由设计如下：

因为目前还没有试图，所以我们先把框架写好，暂时写一个空的引入即可，router.ts 如下

import { createWebHistory, createRouter } from 'vue-router'

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

然后再在 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

为了官网的相对美观，我们决定使用 SVG，可以使用 icon font 提供的免费图标，使用教程大致如下

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

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

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

svg 的命名，参考 icon font 上”我的项目”里设置的每个图标的名称，另外，如果项目中的图标有任何变化，必须要重新生成引用链接！

相关资源

GitHub 仓库：jeremy-ui

GitHub 分支说明

小伙伴 clone 之后可以参考 dev 分支，可以向 dev 分支提交 PR 哦！

- End -