Yagol的网站

# VuePress

VuePress是基于markdown的静态网站构建框架

# 相关链接

# 本站的构建

  1. 创建vuepress项目
yarn init
yarn add -D vuepress
1
2
  1. 在package.json中添加如下脚本
{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}
1
2
3
4
5
6
  1. 参考vuepress官方文档 (opens new window)构建目录结构

# element-ui配置与使用

在enhanceApp.js中添加如下内容即可将element-ui导入到项目中

import Element from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

export default ({Vue, options, router}) => {
    Vue.use(Element);
};
1
2
3
4
5
6

与Vue相似，但区别在于书写在md文档中，如下是一个<el-button>

想要实现相关的相应，需要实现<script>，下面这个按钮实现了弹窗

与Vue相同，你不能写多个script，比如下面这个按钮，如果将其写下面的形式，则第一个按钮不会触发事件。我猜的，大概率被下面的<script>覆盖了


<el-button @click="open">我是弹窗按钮！</el-button>
<script>
export default {
  methods: {
    open() {
      this.$alert('事件弹窗！', '你好', {
        confirmButtonText: '确定',
      });
    }
  }
}
</script>
<el-button @click="secondOpen">第二个事件弹窗！</el-button>
<script>
export default {
  methods: {
    secondOpen() {
      this.$alert('我是第二个，与上面不同！', '你好', {
        confirmButtonText: '确定',
      });
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

因此，需要使用一个<script>书写所有的函数或参数，将两个函数写到一个里面，如下：


<script>
export default {
  methods: {
    open() {
      this.$alert('事件弹窗！', '你好', {
        confirmButtonText: '确定',
      });
    },
    secondOpen() {
      this.$alert('我是第二个，与上面不同！', '你好', {
        confirmButtonText: '确定',
      });
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

这样，下面这个按钮和上面的按钮就都可以使用啦

所以建议将所有的<script>内容写在md文档的最后

# 本站结构

本站的目录结构如下

foo

为啥不用tree？

因为tree不太好用，生成的没有.vuepress文件夹，且对空格的支持不太好

← Selenium 第一章 →