9.0 简单轮子 总结

大纲链接 §

[toc]

阶段性总结

截图

  • 只在有设计稿和需求文档的情况下写代码
    • 落实设计稿
    • 落实需求文档
    • 明确责任
  • 单元测试是重构的前提
  • 工具知识（webpack/scss）能用就行
  • 设计模式——写代码的套路
    • 发布订阅 emit/on/off/once
    • 单向数据流 相邻节点不形成数据环
    • 正交 props
      • 不存在互相影响的因素
    • 代码可测试 测试驱动
    • 简化 0 思考
      • 抽象
      • 命名
      • 提取方法
    • 面向荔枝写代码
      • 文档化
      • 重构

参考

制作自己的官网

使用VuePress v1.x 快速上手->

安装与配置 VuePress

将 VuePress 安装为本地依赖

1

yarn add -D vuepress

在 package.json 中添加 scripts

1
2
3
4
5
6
7
8
9

...
{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}
...

创建文档后在本地启动服务器，就可以看到页面

1

yarn docs:dev

创建文档目录与首页文档

1
2

mkdir docs
mkdir docs && echo '# Hello VuePress' > docs/README.md

修改首页展示文档 docs/README.md

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

---

home: true
heroImage: /images/Logo.jpg
heroText: Vueel UI
tagline: 一个基于Vue2.6的UI组件库
actionText: 查看使用文档 →
actionLink: /introduction/
features:
- title: 包含常用组件
  details: 小巧，五脏俱全，可按需导入
- title: 直观地展示demo与源码 下拉按钮
  details: 在 Markdown 中使用 Vue 组件，配合 codepen 演示 demo
- title: 记录Vue学习、踩坑与技术成长
  details: 通过封装各种通用组件，了解Vue.js特性，并且分享给其他开发者
  footer: Vue UI

---

配置

展示自己的组件

部署到GitHub Pages

添加二维码和短连接