宝可梦ui项目 官网搭建总结

成品如下

预览地址：origami0227.github.io/pokemon-ui-…

所用技术栈

TypeScript

Vue3.0

Vue Router

Vite

设计思路

1. 参照ant design等成熟的ui库进行设计与构图
2. 使用vite搭建官网，包括首页以及文档页的框架
3. 参照ant design的组件ui进行api设计
4. 测试上线

初始化项目

全局安装vite-app

Vite 官⽅⽂档给出的命令为：

npm init vite-app<project-name>

yarn create vite-app<project-name>

全局安装vite-app后执⾏cva<project-name>

npx create-vite-app<project-name>

即npx会帮你安装所⽤到的包

---

这里Vue2 与Vue3 的区别：

90%的写法⼀致除了以下：

Vue3的template标签⽀持多个根标签，Vue2不⽀持

Vue3使⽤createApp() Vue2使⽤new Vue()

比如createApp(组件) new Vue({template,render})

---

引入Vue Router4

路由器，⽤于⻚⾯切换

查看Vue Router的所有版本号

npm info vue-router versions

安装Vue Router

yarn add vue-router@版本号

初始化Vue Router

在router.ts内创建history对象和router对象

import {createWebHashHistory, createRouter} from 'vue-router'
const history = createWebHashHistory()

const router = createRouter({

history:history,

routes:[

{path:'/',component:Origami}//访问根路径时渲染Origami

]

})

router-view 当你的路由path 与访问的地址相符时，会将指定的组件替换该 router-view router-link 实现路由之间的跳转

创建官网

使用figma创建项目设计出初稿，大致分为首页和文档页。其中包括了顶部导航和文档页的侧边导航aside。

首页Home.vue

Topnav:左logo 右menu

Banner：⽂件介绍+开始按钮

点击开始按钮可以跳转到Doc.vue

文档页Doc.vue

Topnav:左logo 右menu

Content:左aside 右main

在aside⾥⾯添加router-link

便于⽤户切换⽂档

tips：出现的问题单独发了博客总结。

---

做完官网，后续我们会补充更多的组件，所以可以对于路由进行一下优化。

使用到了嵌套路由

routes: [

{path:'/doc',component:Doc,children:[

{path:'switch',component:SwitchDemo}

]}

至此我们的官网的首页和文档页搭建完毕。后面就是添加组件了。