flink-bucket

10.9 代码中使用FlinkSQL

9/18/2023

# 报错处理

# 编译报错

如果编译报错如下，出现这个错误是因为 node.js V17版本中最近发布的OpenSSL3.0, 而OpenSSL3.0对允许算法和密钥大小增加了严格的限制，可能会对生态系统造成一些影响。

解决方案：

  1. 降低版本

  2. 设置参数如下可解决报错

set NODE_OPTIONS=--openssl-legacy-provider
1

# 快速使用

  1. 创建并进入一个新目录
mkdir vuepress-starter && cd vuepress-starter
1
  1. 初始化项目
npm init
1
  1. 将VuePress安装为本地依赖

不推荐全局安装VuePress

npm install -D vuepress
1
  1. 创建第一篇文档
mkdir docs

echo '# Hello VuePress' > docs/README.md
1
2
3
  1. 在package.json中添加一些scripts

会有默认的scripts会被添加，具体参考官网基本配置

{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}
1
2
3
4
5
6
  1. 在本地启动服务器
npm run docs:dev
1

之后，VuePress会在 http://localhost:8080 (opens new window)启动一个热重载的开发服务器

# 目录结构

VuePress的目录结构规则如下

.
├── docs
│   ├── .vuepress (可选的)
│   │   ├── components (可选的)
│   │   ├── theme (可选的)
│   │   │   └── Layout.vue
│   │   ├── public (可选的)
│   │   ├── styles (可选的)
│   │   │   ├── index.styl
│   │   │   └── palette.styl
│   │   ├── templates (可选的, 谨慎配置)
│   │   │   ├── dev.html
│   │   │   └── ssr.html
│   │   ├── config.js (可选的)
│   │   └── enhanceApp.js (可选的)
│   │ 
│   ├── README.md
│   ├── guide
│   │   └── README.md
│   └── config.md
│ 
└── package.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
  • docs/.vuepress：用于存放全局的配置、组件、静态资源等
  • docs/.vuepress/components：该目录中的Vue组件将会被自动注册为全局组件
  • docs/.vuepress/theme：用于存放本地主题
  • docs/.vuepress/styles：用于存放样式相关文件
  • docs/.vuepress/styles/index.sty1：将会被自动应用的全局样式文件，会生成在最终的 CSS 文件结尾，具有比默认样式更高的优先级
  • docs/.vuepress/styles/palette.styl： 用于重写默认颜色常量，或者设置新的 stylus 颜色常量
  • docs/.vuepress/public：静态资源目录
  • docs/.vuepress/templates：存储 HTML 模板文件
  • docs/.vuepress/templates/dev.html：用于开发环境的 HTML 模板文件
  • docs/.vuepress/templates/ssr.html：构建时基于 Vue SSR 的 HTML 模板文件
  • docs/.vuepress/config.js： 配置文件的入口文件，也可以是 YML 或 toml
  • docs/.vuepress/enhanceApp.js：客户端应用的增强。

# 默认的页面路由

默认把docs目录作为targetDir

# 基本配置

# 配置文件

如果没有任何配置，这个网站将会是非常有限的，用户也无法在网站上自由导航。为了更好的自定义网站，首先需要在文档目录下创建一个.vuepress目录，所有VuePress相关的文件都将会被放在这里。项目结构类似如下：

.
├─ docs
│  ├─ README.md
│  └─ .vuepress
│     └─ config.js
└─ package.json
1
2
3
4
5
6

一个VuePress网站必要的配置文件是.vuepress/config.js,它应该导出一个JavaScript对象：

module.exports = {
  title: 'Hello VuePress',
  description: 'Just playing around'
}
1
2
3
4

对于上述的配置，如果你运行起dev server，你应该能看到一个页面，它包含一个页头，里面包含一个标题和一个搜索框。VuePress 内置了基于 headers 的搜索 —— 它会自动为所有页面的标题、h2 和 h3 构建起一个简单的搜索索引。、

# 主题配置

一个 VuePress 主题应该负责整个网站的布局和交互细节。在 VuePress 中，目前自带了一个默认的主题，正是现在你所看到的，也可以更改设置为其他的主题。

# 应用级别的配置

由于 VuePress 是一个标准的 Vue 应用，你可以通过创建一个 .vuepress/enhanceApp.js 文件来做一些应用级别的配置，当该文件存在的时候，会被导入到应用内部。enhanceApp.js 应该 export default 一个钩子函数，并接受一个包含了一些应用级别属性的对象作为参数。你可以使用这个钩子来安装一些附加的 Vue 插件、注册全局组件，或者增加额外的路由钩子等：

// 使用异步函数也是可以的
export default ({
  Vue, // VuePress 正在使用的 Vue 构造函数
  options, // 附加到根实例的一些选项
  router, // 当前应用的路由实例
  siteData, // 站点元数据
  isServer // 当前应用配置是处于 服务端渲染 或 客户端
}) => {
  // ...做一些其他的应用级别的优化
}
1
2
3
4
5
6
7
8
9
10

# 静态资源

# 相对路径

所有的 Markdown 文件都会被 webpack 编译成 Vue 组件，因此你可以，并且应该更倾向于使用相对路径（Relative URLs）来引用所有的静态资源

![An image](./image.png)
1

同样地，这在 *.vue 文件的模板中一样可以工作，图片将会被 url-loader 和 file-loader 处理，在运行生成静态文件的构建任务时，文件会被复制到正确的位置。

除此之外，你也使用 ~ 前缀来明确地指出这是一个 webpack 的模块请求，这将允许你通过 webpack 别名来引用文件或者 npm 的依赖：

![Image from alias](~@alias/image.png)
![Image from dependency](~some-dependency/image.png)
1
2

Webpack 的别名可以通过 .vuepress/config.js 中 configureWebpack (opens new window) 来配置，如：

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@alias': 'path/to/some/dir'
      }
    }
  }
}
1
2
3
4
5
6
7
8
9

# 公共文件

有时，你可能需要提供一个静态资源，但是它们并不直接被你的任何一个 markdown 文件或者主题组件引用 —— 举例来说，favicons 和 PWA 的图标，在这种情形下，你可以将它们放在 .vuepress/public 中， 它们最终会被复制到生成的静态文件夹中。

# 基础路径

如果你的网站会被部署到一个非根路径，你将需要在 .vuepress/config.js 中设置 base，举例来说，如果你打算将你的网站部署到 https://foo.github.io/bar/，那么 base 的值就应该被设置为 "/bar/" (应当总是以斜杠开始，并以斜杠结束)。

有了基础路径（Base URL），如果你希望引用一张放在 .vuepress/public 中的图片，你需要使用这样路径：/bar/image.png，然而，一旦某一天你决定去修改 base，这样的路径引用将会显得异常脆弱。为了解决这个问题，VuePress 提供了内置的一个 helper $withBase（它被注入到了 Vue 的原型上），可以帮助你生成正确的路径：

<img :src="$withBase('/foo.png')" alt="foo">
1

值得一提的是，你不仅可以在你的 Vue 组件中使用上述的语法，在 Markdown 文件中亦是如此。

最后补充一句，一个 base 路径一旦被设置，它将会自动地作为前缀插入到 .vuepress/config.js 中所有以 / 开始的资源路径中。

# Markdown 拓展

# Header Anchors

所有的标题将会自动地应用 anchor 链接，anchor 的渲染可以通过 markdown.anchor (opens new window) 来配置。

# 链接

# 内部链接

网站内部的链接，将会被转换成 <router-link> 用于 SPA 导航。同时，站内的每一个文件夹下的 README.md 或者 index.md 文件都会被自动编译为 index.html，对应的链接将被视为 /。如下的文件结构为例：

.
├─ README.md
├─ foo
│  ├─ README.md
│  ├─ one.md
│  └─ two.md
└─ bar
   ├─ README.md
   ├─ three.md
   └─ four.md
1
2
3
4
5
6
7
8
9
10

假设你现在在 foo/one.md 中：

[Home](/) <!-- 跳转到根部的 README.md -->
[foo](/foo/) <!-- 跳转到 foo 文件夹的 index.html -->
[foo heading](./#heading) <!-- 跳转到 foo/index.html 的特定标题位置 -->
[bar - three](../bar/three.md) <!-- 具体文件可以使用 .md 结尾（推荐） -->
[bar - four](../bar/four.html) <!-- 也可以用 .html -->
1
2
3
4
5

# 链接的重定向

VuePress 支持重定向到干净链接。如果一个链接 /foo 找不到，VuePress 会自行寻找一个可用的 /foo/ 或 /foo.html。反过来，当 /foo/ 或 /foo.html 中的一个找不到时，VuePress 也会尝试寻找另一个。借助这种特性，我们可以通过官方插件 vuepress-plugin-clean-urls定制你的网站路径。

# 页面后缀

生成页面和内部链接时，默认使用.html作为后缀。可以通过config.markdown.pageSuffix进行自定义配置

# 外部链接

也可以配置

# Front Matter

字体设置做到了开箱即用的支持

---
title: Blogging Like a Hacker
lang: en-US
---
1
2
3
4

这些数据可以在当前 markdown 的正文，或者是任意的自定义或主题组件中使用。

# 生成目录

输入

[[toc]]
1

# 自定义容器

::: tip
这是一个提示
:::

::: warning
这是一个警告
:::

::: danger
这是一个危险警告
:::

::: details
这是一个详情块，在 IE / Edge 中不生效
:::
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 代码块中的语法高亮

VuePress 使用了 Prism来为 markdown 中的代码块实现语法高亮。Prism 支持大量的编程语言，你需要做的只是在代码块的开始倒勾中附加一个有效的语言别名：

``` js
export default {
  name: 'MyComponent',
  // ...
}
```
1
2
3
4
5
6

# 行号

你可以通过配置来为每个代码块显示行号：

module.exports = {
  markdown: {
    lineNumbers: true
  }
}
1
2
3
4
5
Last Updated: 9/19/2023, 9:40:02 AM