vue

自制官网

★课程简介

  1. Vue 造轮子的基本思路
  2. 制作你的第一个官网

本次毕设就到这里了，做完这节课，你就应该可以创建一个自己的轮子的官网了。

问：npx vuepress dev docs 报错如何解决？

报错主要是因为 npm 比较傻逼，用 yarn 代替 npm 即可。

  1. rm -rf node_modules
  2. 搜 yarn ，找到官网，按说明安装 yarn（不要用 npm i -g yarn 来安装 yarn，因为 npm 傻逼）
  3. yarn install
  4. npx vuepress dev docs 不报错

★讲义

◇总结

img

◇官网

官网：https://frankfang.github.io/frank-test-1/

代码：https://github.com/FrankFang/frank-test-1/blob/doc-1/deploy.sh

★阶段性总结

toast组件里边有这样一份代码，而这看起来会让觉得很多余：

<div class="wrapper" :class="toastClasses"></div>

为啥不这样：

<div class="wrapper" :class="{[`position-${this.position}`]: true}"></div>

而是看起来「多余」的这样（即使是一行，也要抽出成一个属性过来）：

{
  computed: {
  	toastClasses() {
  		return {
  			[`position-${this.position}`]: true
  		}
    }
	}
}

而这个设计模式就是「不要让人思考」，可见这种模式与大众所知道的23种模式格格不入，但你想想「设计模式」即「写代码的套路」，所以叫它为设计模式也是非常正常的事儿。

那么什么叫「不要让人思考」呢？

意思就是如果你把一个套路固定下来了，那么你就一直用这个套路，这样大家看你代码的时候，就能预测出你是怎样写代码的了！比如toast组件是这样写，那么其它xxx组件也得这样写！

而这其实也叫「面向离职写代码」

关于「面向离职写代码」它有很多好处：

芳芳曾经就是在某个公司面向离职写代码的！

在芳芳离开腾讯加入阿里之前，去了一个小团队，而当时芳芳进去的时候就知道，最多两年，肯定会离职的！因为，当时给自己定了一个目标，那就是在两年内「把自己提升很多！」

这个时候芳芳就已经是面向离职写代码了，于是就做了一下这么几件事情：

  1. 所有东西文档化。

    文档化的意思是今天离职，明天就可以走了，为什么就可以走了呢？因为我所有重要的知识都写在文档上了，我把文档发给你或者把文档链接发给你，那么我就可以走了，而这就叫做「今天离职，明天就可以走」。而不是说离职的时候，再去整理之前代码的文档，而这样就很不好了！

  2. 一种感——因为你要离职，所以你希望离职的时候，不要让代码那么难看。所以你一直会有一种被观察感！比如这单元测试很难写，能不能不写呀？此时，你就想想，明天的你就要离职了，还是要写一下吧！不然代码太烂会被吐槽的！总之，这就是让你给自己一个比较严格的要求！比如测试用例，那我就尽量做到80%的覆盖率，然后我的文档至少每个组件我都描述一下，因为有人要看呀！话说，难道不离职，就不这样干了吗？反正工作几年后，这代码又不是我维护，或者这代码一直是我维护的，不会忘记，那我就随便写一下呗！反正我记得，然而实际上，你一个星期之后，你这代码就看不懂了！总之「被观察感」以及「假设有一个人会看你代码」这个是非常重要的！

  3. 由于是面向离职写代码，所以你不能让人有一种是觉得你是做得干不下去才走的感觉，如果你是干不下去才走的，那么你这样做就是在祈求公司留你，而不是面向离职写代码！既然你要走，那么你就得在你表现最后的时候走，这样就会让你在团队中有一种表现优异的感觉！芳芳当时就这样，给自己一个期限，然后逼着自己在这个期限里边，给团队做出一些贡献，不然，等自己走了，还是一个平淡无奇的感觉！而这就非常不好了，所以就有一种紧迫感，我必须让自己在两年之内贡献出一个或者说产出一个东西，然后自己再走，这样自己走的时候，就走得非常的心安理得了！

话说，讲这3点，跟我们造轮子有啥关系呢？

一样的，我觉得大家造完轮子就可以走了，如果你可以给一个公司造一个很好用的轮子，其实你接下来有两条路，升职加薪，如果不给升职加薪，那就走呗！因为自己已经用最好的代码帮公司提高了效率了，但是公司还是不给你升职加薪，那么我就得走了。

总之，写完这个轮子有两种可能，要么升职加薪，要么跳槽

以上就是关于我们在代码中的一些设计模式套路！接下来，思考一下文档该怎么写？

对自己有严格要求，不要草草了事！

★制作自己的官网

★总结

★Q&A

①写代码时，担心耦合？

谷歌搜索「担心代码 耦合」

➹：编程思想里面，何谓解耦？ - 知乎

➹：怎样才能在写代码时没有一种「如履薄冰」的感觉？ - 知乎

➹：图解7种耦合关系

➹：代码中关于耦合性的初步认识 - 掘金

➹：编程原则（Programming Principles） - 耗子的博客

②在做程序员的道路上，你掌握了什么概念或技术使你感觉自我提升突飞猛进？

在学习 Vue 的时候，理解了单向数据流，感觉对 Vue 的使用提升突飞猛进！

➹：在做程序员的道路上，你掌握了什么概念或技术使你感觉自我提升突飞猛进？ - 知乎

③npm 改 yarn？

  1. rm -rf node_modules
  2. yarn install
  3. 删掉 package-lock.json，这是npm5之后加入了默认锁文件功能，yarn默认也有一个 yarn.lock，所以就删掉一个多余的！

为啥要改？

因为我们使用了 vuepress 做官网！

如果之后该轮子项目改为了webpack作为打包工具，那么：

如果你的现有项目依赖了 webpack 3.x，推荐使用 Yarn 而不是 npm 来安装 VuePress。因为在这种情形下，npm 会生成错误的依赖树。

➹：package-lock.json和yarn.lock的包依赖区别 - 用户与产品 - SegmentFault 思否

④使用 vuepress 搭建官网？

  1. ` Can’t resolve ‘sass-loader’ in ‘xxx’`
yarn add -D node-sass
yarn add -D sass-loader
  1. 要让侧边栏有标题而不是路径需要添加下边这个：
---
title: Button 按钮
---

一般默认是把文件名当作标题！

  1. 展示一个轮子的模板：

说明文档：

---
title: Button 按钮
---

# Button 按钮

## 简单用法

### 预览

<ClientOnly>
  <General-Button1/>
</ClientOnly>

### 代码

```html
<w-button>默认按钮</w-button>
<w-button icon="settings">默认按钮</w-button>
<w-button :loading="true">默认按钮</w-button>
<w-button disabled>禁用按钮</w-button>
```

注入的组件：

<template>
  <div class="button1">
    <w-button>默认按钮</w-button>
    <w-button icon="settings">默认按钮</w-button>
    <w-button :loading="true">默认按钮</w-button>
    <w-button disabled>禁用按钮</w-button>
  </div>
</template>

<script>
import Button from "../../../../src/button.vue";
export default {
  name: "button1",
  components: {
    "w-button": Button
  }
};
</script>
<style>
  .button1 {
    margin-top: 1.5em;
  }
</style>

预览效果：

1567088480600

  1. 侧边栏模板
{
    sidebar: [
      {
        title: '入门',
        collapsable: false,
        children: [
          '/install/',
          '/get-started/',
        ]
      },
      {
        title: '组件',
        collapsable: false,
        children: [
          {
            title: '通用',
            collapsable: true,
            children: [
              '/components/general/button',
              '/components/general/icon',
            ]
          },
        ]
      },
}

效果：

1567088572892

➹：使用vuepress报错总结 - 简书

➹：javascript - vue2.0中使用scss can’t resolve ‘scss-loader’ - SegmentFault 思否

⑤在更新文档时，配置适合自己的用户代码片段？

vue：

{
 "doc ui": {
    "prefix": "/docs",
    "body": [
      "<template>",
      "<div class=\"${TM_FILENAME_BASE/(.*)/${1:/downcase}/}\">",
      "",
      "</div>",
      "</template>",
      "",
      "<script>",
      "import Button from '../../../../src/button';",
      "export default {",
      "name: '$2${TM_FILENAME_BASE/(.*)/${1:/downcase}/}',",
      "components: {'w-button': Button},",
      "}",
      "</script>",
      "",
      "<style>",
      "  .${TM_FILENAME_BASE/(.*)/${1:/downcase}/} { margin-top: 1.5em;}",
      "</style>",
    ],
    "description": "Vue UI 轮子的文档"
  }
}

markdown：

{
  "vuepress component": {
    "prefix": "/zujian",
    "body": [
      "<ClientOnly>",
      "  <Xxx-Xxx />",
      "</ClientOnly>",
    ],
    "description": "使用 vuepress 插入自定义组件"
  }
}

⑥用vuepress写文档注意点？

* {
  box-sizing: border-box;
}

这一点在layout组件那块尤其明显！

<style>
.warm-toast {
  z-index: 30 !important;
}
</style>

<style scoped>
* {
  box-sizing: border-box;
}
.toast1 {
  margin-top: 1.5em;
}
</style>

这是在单组件文件里边写的，可以写两个style标签，一个是scoped，一个是全局的，如果把 .warm-toast写在 scoped里边，那么该样式是无法应用的。

注意toast组件是在使用插件时所创建的！而不是作为一个自定义标签而存在的！

➹：markdown-formatter/README_CN.md at master · sumnow/markdown-formatter

这对展示代码的代码块格式化尤其有效果！

export default {
  name: "WarmTabsHead",
  inject: ["eventBus"],
  mounted() {
    this.eventBus.$on("update:selected", (item, vm) => {
      this.updateLinePosition(vm);
    });
  },
  methods: {
    updateLinePosition(selectedVm) {
      let { width, left } = selectedVm.$el.getBoundingClientRect();
      let { left: left2 } = this.$refs.head.getBoundingClientRect();
      this.$refs.line.style.width = `${width}px`;
      this.$refs.line.style.left = `${left - left2}px`;
    }
  }
};

<style>
.tabs-item.active {
  font-weight: normal !important;
}
</style>

<style scoped>
* {
  box-sizing: border-box;
}
.tabs1 {
  margin-top: 1.5em;
}
</style>

<ClientOnly>
  <DataDisplay-Collapse2 />
</ClientOnly>

``` html
<w-collapse :selected.sync="selectedTab" single>
  <w-collapse-item title="title 1" name="1"></w-collapse-item>
  <w-collapse-item title="title 2" name="2"></w-collapse-item>
  <w-collapse-item title="title 3" name="3"></w-collapse-item>
</w-collapse>
```

解决姿势：把标题也当作是Collapse2组件的一部分！

language: node_js
node_js:
  - "8"
  - "9"
  - "10"
  - "11"
addons:
  chrome: stable
sudo: required
install: npm i -g npm
before_script:
  - "sudo chown root /opt/google/chrome/chrome-sandbox"
  - "sudo chmod 4755 /opt/google/chrome/chrome-sandbox"

➹：持续集成服务 Travis CI 教程 - 阮一峰的网络日志

1567405474049

➹：Critical dependency: the request of a dependency is an expression · Issue #2883 · parcel-bundler/parcel

➹：npm源管理器nrm使用教程 - 个人文章 - SegmentFault 思否

parcel打包后的结果始终无法让其它人使用我们的组件，我看了其它同学发布组件，使用的是webpack的umd！

⑦vuepress教程？

➹：VuePress搭建个人技术文档网站教程 - 个人文章 - SegmentFault 思否

⑧vuepress文档组件参考？

➹：快速上手 - 🚲 EchoWheel UI

➹：Xue-ui - 一套小巧的 Vue 组件

➹：Ant Design of React - Ant Design

⑨发布一个包？

➹：如何写一个npm包 - 咸鱼老弟

➹：11 - 如何创建 Node.js 模块 - npm 中文文档

➹：用webpack写个现代的JavaScript包 - 掘金

➹：★构建自己的npm包 简单实现 - 个人文章 - SegmentFault 思否

➹：如何发布第一个属于自己的npm包 - 技术分享 - SegmentFault 思否

➹：手把手发布一个npm包及相关注意事项 - 个人文章 - SegmentFault 思否

推荐每次发布，然后再下载测试！（这种姿势也很快！）

测试的姿势，就用parcel测试就好了，使用vue-cli构建的项目使用该ui库会报错呀！

或许是 link 的问题……

➹：一篇文章解决npm私有包频繁开发调试 - 汤姆C - SegmentFault 思否

⑪publish包的时候，请忽略一些文件？

创建一个 .npmignore，并添加一下内容：

/.idea/
/.vscode/
/docs/
/docs-dist/
/src/
deploy.sh
karma.conf.js
.travis.yml
.gitignore
index.html
.editorconfig
/test/

注：node_modules这个目录不需要写，自动忽略的

还有可以其它姿势可以做到，以上姿势是加入黑名单，还有其它姿势是加入白名单的！

➹：node.js - npm publish 怎样忽略文件？ - SegmentFault 思否

➹：如何过滤 npm publish 的文件 - CNode技术社区

⑫书写贡献者头像？

  1. 打开这个 https://github.com/ppambler/warm-ui/graphs/contributors
  2. 右键打开你看到的头像：https://avatars3.githubusercontent.com/u/36479648?s=40&v=4

注：s=40，表示头像的尺寸为40，默认是60

⑬添加图标？

☀️

➹：☀️ Black Sun With Rays Emoji

⑭安装markdown-it-task-checkbox？

安装：

yarn add markdown-it-task-checkbox

在config.js里边使用：

module.exports = {
	markdown: {
    lineNumbers: true,
    // markdown-it-anchor 的选项
    anchor: { permalink: false },
    // markdown-it-toc 的选项
    toc: { includeLevel: [1, 2] },
    // markdown-it-checkbox 的选项
    checkbox: {
      disabled: true,
      divWrap: false,
      divClass: 'checkbox',
      idPrefix: 'cbx_',
      ulClass: 'task-list',
      liClass: 'task-list-item'
    },
    extendMarkdown: md => {
      // 使用更多的 markdown-it 插件!
      md.use(require('markdown-it-task-checkbox'))
    }
  },
}

为啥使用？因为vuepress默认不支持「任务列表」语法呀！

➹：linsir/markdown-it-task-checkbox: A markdown-it plugin to create GitHub-style task lists with checkbox

⑮⑯⑰⑱⑲⑳