Remove code/docusaurus from index
No files matched your search
@@ -0,0 +1,3 @@
|
||||
[submodule "docusaurus"]
|
||||
path = docusaurus
|
||||
url = https://github.com/oneao/docusaurus
|
||||
@@ -1,20 +0,0 @@
|
||||
# Dependencies
|
||||
/node_modules
|
||||
|
||||
# Production
|
||||
/build
|
||||
|
||||
# Generated files
|
||||
.docusaurus
|
||||
.cache-loader
|
||||
|
||||
# Misc
|
||||
.DS_Store
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
@@ -1,4 +0,0 @@
|
||||
{
|
||||
"recommendations": [
|
||||
]
|
||||
}
|
||||
@@ -1,57 +0,0 @@
|
||||
{
|
||||
"editor.defaultFormatter": "oxc.oxc-vscode",
|
||||
" editor.formatOnSave": true,
|
||||
// Disable the default formatter, use eslint instead
|
||||
"prettier.enable": false,
|
||||
"editor.formatOnSave": false,
|
||||
|
||||
// Auto fix
|
||||
"editor.codeActionsOnSave": {
|
||||
"source.fixAll.eslint": "explicit",
|
||||
"source.organizeImports": "never"
|
||||
},
|
||||
|
||||
// Silent the stylistic rules in your IDE, but still auto fix them
|
||||
"eslint.rules.customizations": [
|
||||
{ "rule": "style/*", "severity": "off", "fixable": true },
|
||||
{ "rule": "format/*", "severity": "off", "fixable": true },
|
||||
{ "rule": "*-indent", "severity": "off", "fixable": true },
|
||||
{ "rule": "*-spacing", "severity": "off", "fixable": true },
|
||||
{ "rule": "*-spaces", "severity": "off", "fixable": true },
|
||||
{ "rule": "*-order", "severity": "off", "fixable": true },
|
||||
{ "rule": "*-dangle", "severity": "off", "fixable": true },
|
||||
{ "rule": "*-newline", "severity": "off", "fixable": true },
|
||||
{ "rule": "*quotes", "severity": "off", "fixable": true },
|
||||
{ "rule": "*semi", "severity": "off", "fixable": true }
|
||||
],
|
||||
|
||||
// Enable eslint for all supported languages
|
||||
"eslint.validate": [
|
||||
"javascript",
|
||||
"javascriptreact",
|
||||
"typescript",
|
||||
"typescriptreact",
|
||||
"vue",
|
||||
"html",
|
||||
"markdown",
|
||||
"json",
|
||||
"json5",
|
||||
"jsonc",
|
||||
"yaml",
|
||||
"toml",
|
||||
"xml",
|
||||
"gql",
|
||||
"graphql",
|
||||
"astro",
|
||||
"svelte",
|
||||
"css",
|
||||
"less",
|
||||
"scss",
|
||||
"pcss",
|
||||
"postcss"
|
||||
],
|
||||
|
||||
"markdown.copyFiles.destination": {
|
||||
"**/*.md": "${documentDirName}/assets/${unixTime}.${fileExtName}"
|
||||
}
|
||||
}
|
||||
@@ -1,41 +0,0 @@
|
||||
# Website
|
||||
|
||||
This website is built using [Docusaurus](https://docusaurus.io/), a modern static website generator.
|
||||
|
||||
## Installation
|
||||
|
||||
```bash
|
||||
yarn
|
||||
```
|
||||
|
||||
## Local Development
|
||||
|
||||
```bash
|
||||
yarn start
|
||||
```
|
||||
|
||||
This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
|
||||
|
||||
## Build
|
||||
|
||||
```bash
|
||||
yarn build
|
||||
```
|
||||
|
||||
This command generates static content into the `build` directory and can be served using any static contents hosting service.
|
||||
|
||||
## Deployment
|
||||
|
||||
Using SSH:
|
||||
|
||||
```bash
|
||||
USE_SSH=true yarn deploy
|
||||
```
|
||||
|
||||
Not using SSH:
|
||||
|
||||
```bash
|
||||
GIT_USER=<Your GitHub username> yarn deploy
|
||||
```
|
||||
|
||||
If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.
|
||||
@@ -1,12 +0,0 @@
|
||||
---
|
||||
slug: first-blog-post
|
||||
title: First Blog Post
|
||||
authors: [slorber, yangshun]
|
||||
tags: [hola, docusaurus]
|
||||
---
|
||||
|
||||
Lorem ipsum dolor sit amet...
|
||||
|
||||
<!-- truncate -->
|
||||
|
||||
...consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
||||
@@ -1,44 +0,0 @@
|
||||
---
|
||||
slug: long-blog-post
|
||||
title: Long Blog Post
|
||||
authors: yangshun
|
||||
tags: [hello, docusaurus]
|
||||
---
|
||||
|
||||
This is the summary of a very long blog post,
|
||||
|
||||
Use a `<!--` `truncate` `-->` comment to limit blog post size in the list view.
|
||||
|
||||
<!-- truncate -->
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
||||
@@ -1,24 +0,0 @@
|
||||
---
|
||||
slug: mdx-blog-post
|
||||
title: MDX Blog Post
|
||||
authors: [slorber]
|
||||
tags: [docusaurus]
|
||||
---
|
||||
|
||||
Blog posts support [Docusaurus Markdown features](https://docusaurus.io/docs/markdown-features), such as [MDX](https://mdxjs.com/).
|
||||
|
||||
:::tip
|
||||
|
||||
Use the power of React to create interactive blog posts.
|
||||
|
||||
:::
|
||||
|
||||
{/* truncate */}
|
||||
|
||||
For example, use JSX to create an interactive button:
|
||||
|
||||
```js
|
||||
<button onClick={() => alert("button clicked!")}>Click me!</button>
|
||||
```
|
||||
|
||||
<button onClick={() => alert("button clicked!")}>Click me!</button>
|
||||
|
Before Width: | Height: | Size: 94 KiB |
@@ -1,29 +0,0 @@
|
||||
---
|
||||
slug: welcome
|
||||
title: Welcome
|
||||
authors: [slorber, yangshun]
|
||||
tags: [facebook, hello, docusaurus]
|
||||
---
|
||||
|
||||
[Docusaurus blogging features](https://docusaurus.io/docs/blog) are powered by the [blog plugin](https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-blog).
|
||||
|
||||
Here are a few tips you might find useful.
|
||||
|
||||
<!-- truncate -->
|
||||
|
||||
Simply add Markdown files (or folders) to the `blog` directory.
|
||||
|
||||
Regular blog authors can be added to `authors.yml`.
|
||||
|
||||
The blog post date can be extracted from filenames, such as:
|
||||
|
||||
- `2019-05-30-welcome.md`
|
||||
- `2019-05-30-welcome/index.md`
|
||||
|
||||
A blog post folder can be convenient to co-locate blog post images:
|
||||
|
||||

|
||||
|
||||
The blog supports tags as well!
|
||||
|
||||
**And if you don't want a blog**: just delete this directory, and use `blog: false` in your Docusaurus config.
|
||||
@@ -1,25 +0,0 @@
|
||||
yangshun:
|
||||
name: Yangshun Tay
|
||||
title: Ex-Meta Staff Engineer, Co-founder GreatFrontEnd
|
||||
url: https://linkedin.com/in/yangshun
|
||||
image_url: https://github.com/yangshun.png
|
||||
page: true
|
||||
socials:
|
||||
x: yangshunz
|
||||
linkedin: yangshun
|
||||
github: yangshun
|
||||
newsletter: https://www.greatfrontend.com
|
||||
|
||||
slorber:
|
||||
name: Sébastien Lorber
|
||||
title: Docusaurus maintainer
|
||||
url: https://sebastienlorber.com
|
||||
image_url: https://github.com/slorber.png
|
||||
page:
|
||||
# customize the url of the author page at /blog/authors/<permalink>
|
||||
permalink: "/all-sebastien-lorber-articles"
|
||||
socials:
|
||||
x: sebastienlorber
|
||||
linkedin: sebastienlorber
|
||||
github: slorber
|
||||
newsletter: https://thisweekinreact.com
|
||||
@@ -1,19 +0,0 @@
|
||||
facebook:
|
||||
label: Facebook
|
||||
permalink: /facebook
|
||||
description: Facebook tag description
|
||||
|
||||
hello:
|
||||
label: Hello
|
||||
permalink: /hello
|
||||
description: Hello tag description
|
||||
|
||||
docusaurus:
|
||||
label: Docusaurus
|
||||
permalink: /docusaurus
|
||||
description: Docusaurus tag description
|
||||
|
||||
hola:
|
||||
label: Hola
|
||||
permalink: /hola
|
||||
description: Hola tag description
|
||||
@@ -1,9 +0,0 @@
|
||||
[React Native](https://reactnative.dev/) 是一个开源框架,用于构建跨平台的移动应用。它允许开发者使用 React 来构建原生的 iOS 和 Android 应用。
|
||||
|
||||
主要特点:
|
||||
- 跨平台开发:通过一次编写代码,React Native 可以在 iOS 和 Android 上运行,大大减少开发时间和成本。
|
||||
- 原生性能:React Native 使用原生组件(如按钮、文本框等),提供接近原生应用的性能和用户体验。
|
||||
- 热重载:开发者可以实时查看代码修改的效果,而无需重新加载整个应用。
|
||||
- 组件化开发:通过 React 的组件化理念,开发者可以更高效地构建和维护应用界面。
|
||||
- 丰富的生态系统:React Native 拥有大量的第三方库和工具,帮助开发者快速实现功能。
|
||||
|
||||
@@ -1,8 +0,0 @@
|
||||
[Expo](https://docs.expo.dev/) 是一个基于 React Native 的框架,旨在简化移动应用开发。它提供了一套工具和服务,让开发者可以更快速地构建、测试和发布 React Native 应用。
|
||||
|
||||
主要特点:
|
||||
- 快速上手:无需复杂配置,直接在手机上查看代码效果。
|
||||
- 内置功能:相机、位置服务、推送通知等常用功能,免去手动集成。
|
||||
- 跨平台支持:同一套代码可在 iOS 和 Android 上运行。
|
||||
- 热重载:修改代码后,应用会即时更新,提升开发效率。
|
||||
|
||||
@@ -1,22 +0,0 @@
|
||||
创建项目命令:
|
||||
|
||||
```bash
|
||||
pnpm create expo-app@latest --template blank-typescript
|
||||
```
|
||||
|
||||
[官网模板](https://docs.expo.dev/more/create-expo/) 如下:
|
||||
|
||||
| 模板名称 | 描述 |
|
||||
| ------------------------------------------------------------ | ------------------------------------------------------------ |
|
||||
| [`default`](https://github.com/expo/expo/tree/main/templates/expo-template-default) | 默认模板,用于构建多页面应用。包含推荐工具,如 **Expo CLI**、**Expo Router** 路由库,并启用 **TypeScript** 配置。适合大多数应用。 |
|
||||
| [`blank`](https://github.com/expo/expo/tree/main/templates/expo-template-blank) | 最简模板,仅安装最基本依赖,不包含导航配置。 |
|
||||
| [`blank-typescript`](https://github.com/expo/expo/tree/main/templates/expo-template-blank-typescript) | 空白模板,但启用了 **TypeScript** 支持。 |
|
||||
| [`tabs`](https://github.com/expo/expo/tree/main/templates/expo-template-tabs) | 启用基于文件的路由系统(Expo Router),并默认使用 **TypeScript**,适合多标签页结构的应用。 |
|
||||
| [`bare-minimum`](https://github.com/expo/expo/tree/main/templates/expo-template-bare-minimum) | 带有原生目录(`android` 与 `ios`)的空白模板,创建时会自动运行 [`npx expo prebuild`](https://docs.expo.dev/workflow/prebuild)。适合需要直接修改原生代码的项目。 |
|
||||
|
||||
**启动项目:**
|
||||
|
||||
```bash
|
||||
npx expo start
|
||||
```
|
||||
|
||||
@@ -1,166 +0,0 @@
|
||||
**生成基础文件**,后面要用到:
|
||||
|
||||
```bash
|
||||
npx expo customize babel.config.js
|
||||
npx expo customize metro.config.js
|
||||
```
|
||||
|
||||
## 配置eslint格式化
|
||||
|
||||
可以使用快捷命令(推荐):
|
||||
|
||||
```bash
|
||||
pnpm dlx @antfu/eslint-config@latest
|
||||
```
|
||||
|
||||
安装:
|
||||
|
||||
```bash
|
||||
pnpm i -D eslint @antfu/eslint-config
|
||||
```
|
||||
|
||||
新建 `eslint.config.mjs` 文件:
|
||||
|
||||
```js
|
||||
import antfu from '@antfu/eslint-config'
|
||||
|
||||
export default antfu({
|
||||
stylistic: {
|
||||
indent: 2, // 缩进为 2 个空格(可选 4 或 'tab')
|
||||
quotes: 'single', // 使用单引号(可选 'double')
|
||||
},
|
||||
rules: {
|
||||
'unused-imports/no-unused-imports': 'warn',
|
||||
'unused-imports/no-unused-vars': 'warn',
|
||||
'@typescript-eslint/no-use-before-define': 'off', // 关闭 TS 的“定义前使用”警告
|
||||
'no-console': 'off', // 关闭 console 报错
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
配置 vscode 模板,修改 `.vscode/settings.json` :
|
||||
|
||||
> 注意安装 eslint 插件
|
||||
|
||||
```json
|
||||
{
|
||||
// Disable the default formatter, use eslint instead
|
||||
"prettier.enable": false,
|
||||
"editor.formatOnSave": false,
|
||||
|
||||
// Auto fix
|
||||
"editor.codeActionsOnSave": {
|
||||
"source.fixAll.eslint": "explicit",
|
||||
"source.organizeImports": "never"
|
||||
},
|
||||
|
||||
// Silent the stylistic rules in you IDE, but still auto fix them
|
||||
"eslint.rules.customizations": [
|
||||
{ "rule": "style/*", "severity": "off", "fixable": true },
|
||||
{ "rule": "format/*", "severity": "off", "fixable": true },
|
||||
{ "rule": "*-indent", "severity": "off", "fixable": true },
|
||||
{ "rule": "*-spacing", "severity": "off", "fixable": true },
|
||||
{ "rule": "*-spaces", "severity": "off", "fixable": true },
|
||||
{ "rule": "*-order", "severity": "off", "fixable": true },
|
||||
{ "rule": "*-dangle", "severity": "off", "fixable": true },
|
||||
{ "rule": "*-newline", "severity": "off", "fixable": true },
|
||||
{ "rule": "*quotes", "severity": "off", "fixable": true },
|
||||
{ "rule": "*semi", "severity": "off", "fixable": true }
|
||||
],
|
||||
|
||||
// Enable eslint for all supported languages
|
||||
"eslint.validate": [
|
||||
"javascript",
|
||||
"javascriptreact",
|
||||
"typescript",
|
||||
"typescriptreact",
|
||||
"vue",
|
||||
"html",
|
||||
"markdown",
|
||||
"json",
|
||||
"jsonc",
|
||||
"yaml",
|
||||
"toml",
|
||||
"xml",
|
||||
"gql",
|
||||
"graphql",
|
||||
"astro",
|
||||
"svelte",
|
||||
"css",
|
||||
"less",
|
||||
"scss",
|
||||
"pcss",
|
||||
"postcss"
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## 配置深度链接
|
||||
|
||||
作用:通过链接就可以跳转到该app。
|
||||
|
||||
在 `app.json` 文件下进行配置:
|
||||
|
||||
```json
|
||||
{
|
||||
"expo": {
|
||||
"scheme": "oneao"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
然后就可以通过这个配置 从别的应用或者浏览器跳转到你的app:
|
||||
|
||||
```
|
||||
oneao://courses/react-native
|
||||
```
|
||||
|
||||
## 定义 src 路径别名 @
|
||||
|
||||
> 参考:https://docs.expo.dev/guides/typescript/
|
||||
|
||||
修改 `tsconfig.json` 文件:
|
||||
|
||||
```json
|
||||
{
|
||||
"extends": "expo/tsconfig.base",
|
||||
"compilerOptions": {
|
||||
"baseUrl": "./",
|
||||
"paths": {
|
||||
"@/*": ["src/*"]
|
||||
},
|
||||
"strict": true
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
安装 `module-resolver` :
|
||||
|
||||
```
|
||||
pnpm add -D babel-plugin-module-resolver
|
||||
```
|
||||
|
||||
修改 `babel.config.js` :
|
||||
|
||||
```js
|
||||
module.exports = function (api) {
|
||||
api.cache(true)
|
||||
return {
|
||||
presets: [
|
||||
['babel-preset-expo', { jsxImportSource: 'nativewind' }],
|
||||
'nativewind/babel',
|
||||
],
|
||||
plugins: [
|
||||
[
|
||||
'module-resolver',
|
||||
{
|
||||
root: ['./src'],
|
||||
alias: {
|
||||
'@': './src',
|
||||
},
|
||||
},
|
||||
],
|
||||
],
|
||||
}
|
||||
}
|
||||
```
|
||||
@@ -1,189 +0,0 @@
|
||||
## 云打包
|
||||
1. 安装 EAS CLI
|
||||
|
||||
```bash
|
||||
npm install -g eas-cli
|
||||
```
|
||||
|
||||
2. 注册并登录 Expo 账户
|
||||
|
||||
- 访问 https://expo.dev/ 注册账户,然后命令行登录:
|
||||
|
||||
```bash
|
||||
expo login
|
||||
```
|
||||
|
||||
3. 配置项目构建
|
||||
|
||||
- 输入以下命令,选择 Android 平台即可。
|
||||
|
||||
```bash
|
||||
eas build:configure
|
||||
```
|
||||
|
||||
4. 构建 Android 包
|
||||
|
||||
- 默认构建 AAB 包(上传 Google Play):
|
||||
|
||||
```bash
|
||||
eas build --platform android
|
||||
```
|
||||
|
||||
- 构建 APK(可直接安装):
|
||||
|
||||
```bash
|
||||
eas build -p android --profile preview
|
||||
```
|
||||
|
||||
## 本地打包(EAS方式)
|
||||
|
||||
## 本地打包(原生方式)
|
||||
### 1. 安装 [Android Studio]( https://developer.android.com/?hl=zh-cn)
|
||||
|
||||
1. 下载安装
|
||||
|
||||
- 按照官网提示依次安装 SDK 工具和必要组件。
|
||||
|
||||
- 安装完成后,记住 SDK 的安装路径(例如:`D:\data\sdk`,默认位置是:`C:\Users\<你的用户名>\AppData\Local\Android\Sdk`),后续需要用到。
|
||||
|
||||
2. 配置环境变量
|
||||
|
||||
- 打开 **系统属性 → 高级 → 环境变量**。
|
||||
|
||||
- 在 **系统变量** 中新增:
|
||||
|
||||
```
|
||||
变量名:ANDROID_HOME
|
||||
变量值:D:\data\sdk
|
||||
```
|
||||
|
||||
- 在 **Path** 中新增:
|
||||
|
||||
```bash
|
||||
%ANDROID_HOME%\platform-tools
|
||||
%ANDROID_HOME%\tools
|
||||
%ANDROID_HOME%\tools\bin
|
||||
```
|
||||
|
||||
- 保存设置。
|
||||
|
||||
3. 验证安装
|
||||
|
||||
- 打开命令行,执行:
|
||||
|
||||
```
|
||||
echo %ANDROID_HOME%
|
||||
```
|
||||
|
||||
- 如果输出 SDK 路径,则说明配置成功。
|
||||
|
||||
|
||||
|
||||
### 2. 安装 [jdk17](https://adoptium.net/zh-CN/temurin/releases?version=8&os=any&arch=any)
|
||||
|
||||
1. 下载安装
|
||||
|
||||
- 下载对应版本解压即可。
|
||||
- 安装成功后,记住 jdk 的安装路径,后续需要用到。
|
||||
|
||||
2. 配置环境变量
|
||||
|
||||
- 打开 **系统属性 → 高级 → 环境变量**。
|
||||
|
||||
- 在 **系统变量** 中新增:
|
||||
|
||||
```bash
|
||||
变量名:JAVA_HOME
|
||||
变量值:D:\devtool\jdk\jdk-17.0.16+8
|
||||
```
|
||||
|
||||
- 在 **Path** 中新增:
|
||||
|
||||
```bash
|
||||
%JAVA_HOME%\bin
|
||||
```
|
||||
|
||||
- 保存设置。
|
||||
|
||||
3. 验证安装
|
||||
|
||||
- 打开命令行,执行:
|
||||
|
||||
```bash
|
||||
java --version
|
||||
```
|
||||
|
||||
- 如果输出 jdk 的信息,则说明配置成功。
|
||||
|
||||
|
||||
|
||||
### 3. Expo 项目启用 [Prebuild](https://docs.expo.dev/workflow/prebuild/)
|
||||
|
||||
1. 生成原生项目
|
||||
|
||||
```bash
|
||||
npx expo prebuild
|
||||
```
|
||||
|
||||
然后执行完毕后,会生成 `android` 目录。
|
||||
|
||||
2. 清除并重新生成原生项目
|
||||
|
||||
```bash
|
||||
npx expo prebuild --clean
|
||||
```
|
||||
|
||||
会删除已有的 `android` 和 `ios` 目录,然后重新生成。
|
||||
|
||||
## 打包体积优化
|
||||
方法一:找到 `android/gradle.properties` 文件,找到 `reactNativeArchitectures` ,根据需要删除即可
|
||||
|
||||
```properties
|
||||
reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
|
||||
```
|
||||
|
||||
方法二:原生方法,在 `android/app/build.gradle` 文件中添加或修改以下配置:
|
||||
|
||||
```
|
||||
android {
|
||||
// 其他配置...
|
||||
|
||||
splits {
|
||||
abi {
|
||||
enable true // 启用按 CPU 架构拆分
|
||||
reset() // 重置默认架构列表
|
||||
include 'arm64-v8a', 'armeabi-v7a'
|
||||
universalApk false // 是否生成包含所有架构的通用 APK(false 表示只生成分架构的独立包)
|
||||
// 还有一个 exclude 配置是排除指定架构的
|
||||
}
|
||||
}
|
||||
|
||||
// 其他配置...
|
||||
}
|
||||
```
|
||||
|
||||
**说明:**
|
||||
|
||||
- `enable true`:启用架构拆分功能。
|
||||
- `reset()`:清空默认的架构配置,避免重复。
|
||||
- `include`:指定要生成的架构包,比如只打 `arm64-v8a` 和 `armeabi-v7a`。
|
||||
- `universalApk false`:不生成通用包(即包含所有架构的 APK)。
|
||||
|
||||
**举例:**
|
||||
|
||||
执行打包命令后,将生成多个包,例如:
|
||||
|
||||
```
|
||||
app-arm64-v8a-release.apk
|
||||
app-armeabi-v7a-release.apk
|
||||
```
|
||||
|
||||
每个 APK 只包含对应架构的二进制文件,体积更小。
|
||||
|
||||
如果把 `universalApk` 设置为 `true`,则只会生成一个:
|
||||
|
||||
```
|
||||
app-universal-release.apk
|
||||
```
|
||||
|
||||
这个包能在 `arm64-v8a` 和 `armeabi-v7a` 架构的设备上运行,但体积最大。
|
||||
@@ -1,7 +0,0 @@
|
||||
{
|
||||
"label": "expo",
|
||||
"position": 1,
|
||||
"link": {
|
||||
"type": "generated-index"
|
||||
}
|
||||
}
|
||||
@@ -1,109 +0,0 @@
|
||||
NativeWind 原子化 CSS 库
|
||||
> 官网:https://www.nativewind.dev/docs/getting-started/installation
|
||||
|
||||
1. 安装依赖
|
||||
|
||||
```bash
|
||||
npx expo add nativewind react-native-reanimated react-native-safe-area-context
|
||||
npx expo add tailwindcss@^3.4.17 -- --save-dev
|
||||
```
|
||||
|
||||
2. 运行 `npx tailwindcss init` 生成 `tailwind.config.js` 文件,添加配置:
|
||||
|
||||
```js
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
// NOTE: Update this to include the paths to all files that contain Nativewind classes.
|
||||
content: ['./App.tsx', './components/**/*.{js,jsx,ts,tsx}'],
|
||||
presets: [require('nativewind/preset')],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
```
|
||||
|
||||
3. 创建 `global.css` 文件:
|
||||
|
||||
```css
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
```
|
||||
|
||||
|
||||
注意在全局引入
|
||||
|
||||
4. 修改 `babel.config.js` 文件:
|
||||
|
||||
> 如果没有该文件,执行 `npx expo customize babel.config.js` 命令创建。
|
||||
|
||||
```js
|
||||
module.exports = function (api) {
|
||||
api.cache(true)
|
||||
return {
|
||||
presets: [
|
||||
['babel-preset-expo', { jsxImportSource: 'nativewind' }],
|
||||
'nativewind/babel',
|
||||
],
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
5. 修改 `metro.config.js` 文件:
|
||||
|
||||
> 如果没有该文件,执行 `npx expo customize metro.config.js` 命令创建。
|
||||
|
||||
```js
|
||||
const { getDefaultConfig } = require('expo/metro-config')
|
||||
const { withNativeWind } = require('nativewind/metro')
|
||||
|
||||
const config = getDefaultConfig(__dirname)
|
||||
|
||||
module.exports = withNativeWind(config, { input: './global.css' })
|
||||
```
|
||||
|
||||
6. 新建 `src/types/nativewind-env.d.ts` 文件:
|
||||
|
||||
```ts
|
||||
/// <reference types="nativewind/types" />
|
||||
```
|
||||
|
||||
7. 安装 ` react-native-css-interop` :
|
||||
|
||||
```bash
|
||||
npx expo install react-native-css-interop
|
||||
```
|
||||
|
||||
8. 检验是否生效
|
||||
|
||||
```tsx
|
||||
import { Text, View } from 'react-native'
|
||||
import './global.css'
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<View className="flex-1 items-center justify-center bg-white">
|
||||
<Text className="text-xl font-bold text-blue-500">
|
||||
Welcome to Nativewind!
|
||||
</Text>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
如果不生效,记得修改 `tailwind.config.js` 的目标路径:
|
||||
|
||||
```js
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
// NOTE: Update this to include the paths to all files that contain Nativewind classes.
|
||||
content: ['./src/app/_layout.tsx', './src/components/**/*.{js,jsx,ts,tsx}'],
|
||||
presets: [require('nativewind/preset')],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
```
|
||||
@@ -1,290 +0,0 @@
|
||||
Gluestack UI UI 组件库
|
||||
> 官网:https://gluestack.io/ui/docs/home/getting-started/installation
|
||||
|
||||
## 方式一:CLI
|
||||
|
||||
```bash
|
||||
npx gluestack-ui init
|
||||
```
|
||||
|
||||
## 方式二:Manual(推荐)
|
||||
|
||||
**前置条件:** 需要安装 `nativewind`
|
||||
|
||||
1. 安装依赖:
|
||||
|
||||
```bash
|
||||
npx expo add @gluestack-ui/core @gluestack-ui/utils react-native-svg @gluestack/ui-next-adapter
|
||||
```
|
||||
|
||||
2. 从 [github](https://github.com/gluestack/gluestack-ui/tree/main/src/components/ui/gluestack-ui-provider) 复制必须的组件到 `@/components/ui/gluestack-ui-provider`。
|
||||
|
||||
3. 修改 `tailwind.config.js` 文件:
|
||||
|
||||
```bash
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
darkMode: process.env.DARK_MODE ? process.env.DARK_MODE : 'class',
|
||||
content: [
|
||||
'./app/**/*.{html,js,jsx,ts,tsx,mdx}',
|
||||
'./components/**/*.{html,js,jsx,ts,tsx,mdx}',
|
||||
'./utils/**/*.{html,js,jsx,ts,tsx,mdx}',
|
||||
'./*.{html,js,jsx,ts,tsx,mdx}',
|
||||
'./src/**/*.{html,js,jsx,ts,tsx,mdx}',
|
||||
],
|
||||
presets: [require('nativewind/preset')],
|
||||
important: 'html',
|
||||
safelist: [
|
||||
{
|
||||
pattern:
|
||||
// eslint-disable-next-line regexp/no-dupe-disjunctions
|
||||
/(bg|border|text|stroke|fill)-(primary|secondary|tertiary|error|success|warning|info|typography|outline|background|indicator)-(0|50|100|200|300|400|500|600|700|800|900|950|white|gray|black|error|warning|muted|success|info|light|dark|primary)/,
|
||||
},
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: {
|
||||
0: 'rgb(var(--color-primary-0)/<alpha-value>)',
|
||||
50: 'rgb(var(--color-primary-50)/<alpha-value>)',
|
||||
100: 'rgb(var(--color-primary-100)/<alpha-value>)',
|
||||
200: 'rgb(var(--color-primary-200)/<alpha-value>)',
|
||||
300: 'rgb(var(--color-primary-300)/<alpha-value>)',
|
||||
400: 'rgb(var(--color-primary-400)/<alpha-value>)',
|
||||
500: 'rgb(var(--color-primary-500)/<alpha-value>)',
|
||||
600: 'rgb(var(--color-primary-600)/<alpha-value>)',
|
||||
700: 'rgb(var(--color-primary-700)/<alpha-value>)',
|
||||
800: 'rgb(var(--color-primary-800)/<alpha-value>)',
|
||||
900: 'rgb(var(--color-primary-900)/<alpha-value>)',
|
||||
950: 'rgb(var(--color-primary-950)/<alpha-value>)',
|
||||
},
|
||||
secondary: {
|
||||
0: 'rgb(var(--color-secondary-0)/<alpha-value>)',
|
||||
50: 'rgb(var(--color-secondary-50)/<alpha-value>)',
|
||||
100: 'rgb(var(--color-secondary-100)/<alpha-value>)',
|
||||
200: 'rgb(var(--color-secondary-200)/<alpha-value>)',
|
||||
300: 'rgb(var(--color-secondary-300)/<alpha-value>)',
|
||||
400: 'rgb(var(--color-secondary-400)/<alpha-value>)',
|
||||
500: 'rgb(var(--color-secondary-500)/<alpha-value>)',
|
||||
600: 'rgb(var(--color-secondary-600)/<alpha-value>)',
|
||||
700: 'rgb(var(--color-secondary-700)/<alpha-value>)',
|
||||
800: 'rgb(var(--color-secondary-800)/<alpha-value>)',
|
||||
900: 'rgb(var(--color-secondary-900)/<alpha-value>)',
|
||||
950: 'rgb(var(--color-secondary-950)/<alpha-value>)',
|
||||
},
|
||||
tertiary: {
|
||||
50: 'rgb(var(--color-tertiary-50)/<alpha-value>)',
|
||||
100: 'rgb(var(--color-tertiary-100)/<alpha-value>)',
|
||||
200: 'rgb(var(--color-tertiary-200)/<alpha-value>)',
|
||||
300: 'rgb(var(--color-tertiary-300)/<alpha-value>)',
|
||||
400: 'rgb(var(--color-tertiary-400)/<alpha-value>)',
|
||||
500: 'rgb(var(--color-tertiary-500)/<alpha-value>)',
|
||||
600: 'rgb(var(--color-tertiary-600)/<alpha-value>)',
|
||||
700: 'rgb(var(--color-tertiary-700)/<alpha-value>)',
|
||||
800: 'rgb(var(--color-tertiary-800)/<alpha-value>)',
|
||||
900: 'rgb(var(--color-tertiary-900)/<alpha-value>)',
|
||||
950: 'rgb(var(--color-tertiary-950)/<alpha-value>)',
|
||||
},
|
||||
error: {
|
||||
0: 'rgb(var(--color-error-0)/<alpha-value>)',
|
||||
50: 'rgb(var(--color-error-50)/<alpha-value>)',
|
||||
100: 'rgb(var(--color-error-100)/<alpha-value>)',
|
||||
200: 'rgb(var(--color-error-200)/<alpha-value>)',
|
||||
300: 'rgb(var(--color-error-300)/<alpha-value>)',
|
||||
400: 'rgb(var(--color-error-400)/<alpha-value>)',
|
||||
500: 'rgb(var(--color-error-500)/<alpha-value>)',
|
||||
600: 'rgb(var(--color-error-600)/<alpha-value>)',
|
||||
700: 'rgb(var(--color-error-700)/<alpha-value>)',
|
||||
800: 'rgb(var(--color-error-800)/<alpha-value>)',
|
||||
900: 'rgb(var(--color-error-900)/<alpha-value>)',
|
||||
950: 'rgb(var(--color-error-950)/<alpha-value>)',
|
||||
},
|
||||
success: {
|
||||
0: 'rgb(var(--color-success-0)/<alpha-value>)',
|
||||
50: 'rgb(var(--color-success-50)/<alpha-value>)',
|
||||
100: 'rgb(var(--color-success-100)/<alpha-value>)',
|
||||
200: 'rgb(var(--color-success-200)/<alpha-value>)',
|
||||
300: 'rgb(var(--color-success-300)/<alpha-value>)',
|
||||
400: 'rgb(var(--color-success-400)/<alpha-value>)',
|
||||
500: 'rgb(var(--color-success-500)/<alpha-value>)',
|
||||
600: 'rgb(var(--color-success-600)/<alpha-value>)',
|
||||
700: 'rgb(var(--color-success-700)/<alpha-value>)',
|
||||
800: 'rgb(var(--color-success-800)/<alpha-value>)',
|
||||
900: 'rgb(var(--color-success-900)/<alpha-value>)',
|
||||
950: 'rgb(var(--color-success-950)/<alpha-value>)',
|
||||
},
|
||||
warning: {
|
||||
0: 'rgb(var(--color-warning-0)/<alpha-value>)',
|
||||
50: 'rgb(var(--color-warning-50)/<alpha-value>)',
|
||||
100: 'rgb(var(--color-warning-100)/<alpha-value>)',
|
||||
200: 'rgb(var(--color-warning-200)/<alpha-value>)',
|
||||
300: 'rgb(var(--color-warning-300)/<alpha-value>)',
|
||||
400: 'rgb(var(--color-warning-400)/<alpha-value>)',
|
||||
500: 'rgb(var(--color-warning-500)/<alpha-value>)',
|
||||
600: 'rgb(var(--color-warning-600)/<alpha-value>)',
|
||||
700: 'rgb(var(--color-warning-700)/<alpha-value>)',
|
||||
800: 'rgb(var(--color-warning-800)/<alpha-value>)',
|
||||
900: 'rgb(var(--color-warning-900)/<alpha-value>)',
|
||||
950: 'rgb(var(--color-warning-950)/<alpha-value>)',
|
||||
},
|
||||
info: {
|
||||
0: 'rgb(var(--color-info-0)/<alpha-value>)',
|
||||
50: 'rgb(var(--color-info-50)/<alpha-value>)',
|
||||
100: 'rgb(var(--color-info-100)/<alpha-value>)',
|
||||
200: 'rgb(var(--color-info-200)/<alpha-value>)',
|
||||
300: 'rgb(var(--color-info-300)/<alpha-value>)',
|
||||
400: 'rgb(var(--color-info-400)/<alpha-value>)',
|
||||
500: 'rgb(var(--color-info-500)/<alpha-value>)',
|
||||
600: 'rgb(var(--color-info-600)/<alpha-value>)',
|
||||
700: 'rgb(var(--color-info-700)/<alpha-value>)',
|
||||
800: 'rgb(var(--color-info-800)/<alpha-value>)',
|
||||
900: 'rgb(var(--color-info-900)/<alpha-value>)',
|
||||
950: 'rgb(var(--color-info-950)/<alpha-value>)',
|
||||
},
|
||||
typography: {
|
||||
0: 'rgb(var(--color-typography-0)/<alpha-value>)',
|
||||
50: 'rgb(var(--color-typography-50)/<alpha-value>)',
|
||||
100: 'rgb(var(--color-typography-100)/<alpha-value>)',
|
||||
200: 'rgb(var(--color-typography-200)/<alpha-value>)',
|
||||
300: 'rgb(var(--color-typography-300)/<alpha-value>)',
|
||||
400: 'rgb(var(--color-typography-400)/<alpha-value>)',
|
||||
500: 'rgb(var(--color-typography-500)/<alpha-value>)',
|
||||
600: 'rgb(var(--color-typography-600)/<alpha-value>)',
|
||||
700: 'rgb(var(--color-typography-700)/<alpha-value>)',
|
||||
800: 'rgb(var(--color-typography-800)/<alpha-value>)',
|
||||
900: 'rgb(var(--color-typography-900)/<alpha-value>)',
|
||||
950: 'rgb(var(--color-typography-950)/<alpha-value>)',
|
||||
white: '#FFFFFF',
|
||||
gray: '#D4D4D4',
|
||||
black: '#181718',
|
||||
},
|
||||
outline: {
|
||||
0: 'rgb(var(--color-outline-0)/<alpha-value>)',
|
||||
50: 'rgb(var(--color-outline-50)/<alpha-value>)',
|
||||
100: 'rgb(var(--color-outline-100)/<alpha-value>)',
|
||||
200: 'rgb(var(--color-outline-200)/<alpha-value>)',
|
||||
300: 'rgb(var(--color-outline-300)/<alpha-value>)',
|
||||
400: 'rgb(var(--color-outline-400)/<alpha-value>)',
|
||||
500: 'rgb(var(--color-outline-500)/<alpha-value>)',
|
||||
600: 'rgb(var(--color-outline-600)/<alpha-value>)',
|
||||
700: 'rgb(var(--color-outline-700)/<alpha-value>)',
|
||||
800: 'rgb(var(--color-outline-800)/<alpha-value>)',
|
||||
900: 'rgb(var(--color-outline-900)/<alpha-value>)',
|
||||
950: 'rgb(var(--color-outline-950)/<alpha-value>)',
|
||||
},
|
||||
background: {
|
||||
0: 'rgb(var(--color-background-0)/<alpha-value>)',
|
||||
50: 'rgb(var(--color-background-50)/<alpha-value>)',
|
||||
100: 'rgb(var(--color-background-100)/<alpha-value>)',
|
||||
200: 'rgb(var(--color-background-200)/<alpha-value>)',
|
||||
300: 'rgb(var(--color-background-300)/<alpha-value>)',
|
||||
400: 'rgb(var(--color-background-400)/<alpha-value>)',
|
||||
500: 'rgb(var(--color-background-500)/<alpha-value>)',
|
||||
600: 'rgb(var(--color-background-600)/<alpha-value>)',
|
||||
700: 'rgb(var(--color-background-700)/<alpha-value>)',
|
||||
800: 'rgb(var(--color-background-800)/<alpha-value>)',
|
||||
900: 'rgb(var(--color-background-900)/<alpha-value>)',
|
||||
950: 'rgb(var(--color-background-950)/<alpha-value>)',
|
||||
error: 'rgb(var(--color-background-error)/<alpha-value>)',
|
||||
warning: 'rgb(var(--color-background-warning)/<alpha-value>)',
|
||||
muted: 'rgb(var(--color-background-muted)/<alpha-value>)',
|
||||
success: 'rgb(var(--color-background-success)/<alpha-value>)',
|
||||
info: 'rgb(var(--color-background-info)/<alpha-value>)',
|
||||
light: '#FBFBFB',
|
||||
dark: '#181719',
|
||||
},
|
||||
indicator: {
|
||||
primary: 'rgb(var(--color-indicator-primary)/<alpha-value>)',
|
||||
info: 'rgb(var(--color-indicator-info)/<alpha-value>)',
|
||||
error: 'rgb(var(--color-indicator-error)/<alpha-value>)',
|
||||
},
|
||||
},
|
||||
fontFamily: {
|
||||
'heading': undefined,
|
||||
'body': undefined,
|
||||
'mono': undefined,
|
||||
'jakarta': ['var(--font-plus-jakarta-sans)'],
|
||||
'roboto': ['var(--font-roboto)'],
|
||||
'code': ['var(--font-source-code-pro)'],
|
||||
'inter': ['var(--font-inter)'],
|
||||
'space-mono': ['var(--font-space-mono)'],
|
||||
},
|
||||
fontWeight: {
|
||||
extrablack: '950',
|
||||
},
|
||||
fontSize: {
|
||||
'2xs': '10px',
|
||||
},
|
||||
boxShadow: {
|
||||
'hard-1': '-2px 2px 8px 0px rgba(38, 38, 38, 0.20)',
|
||||
'hard-2': '0px 3px 10px 0px rgba(38, 38, 38, 0.20)',
|
||||
'hard-3': '2px 2px 8px 0px rgba(38, 38, 38, 0.20)',
|
||||
'hard-4': '0px -3px 10px 0px rgba(38, 38, 38, 0.20)',
|
||||
'hard-5': '0px 2px 10px 0px rgba(38, 38, 38, 0.10)',
|
||||
'soft-1': '0px 0px 10px rgba(38, 38, 38, 0.1)',
|
||||
'soft-2': '0px 0px 20px rgba(38, 38, 38, 0.2)',
|
||||
'soft-3': '0px 0px 30px rgba(38, 38, 38, 0.1)',
|
||||
'soft-4': '0px 0px 40px rgba(38, 38, 38, 0.1)',
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
4. 使用 `GluestackUIProvider` 包括着整个组件:
|
||||
|
||||
```tsx
|
||||
// App.tsx
|
||||
import { GluestackUIProvider } from '@/components/ui/gluestack-ui-provider'
|
||||
import '@/global.css' // Make sure this path is correct
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<GluestackUIProvider>{/* Add your app code here */}</GluestackUIProvider>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
## 测试
|
||||
|
||||
下载对应组件:
|
||||
|
||||
```bash
|
||||
npx gluestack-ui add button
|
||||
```
|
||||
|
||||
引入使用:
|
||||
|
||||
```tsx
|
||||
import { StyleSheet, Text, View } from 'react-native'
|
||||
import { SafeAreaView } from 'react-native-safe-area-context'
|
||||
import { Button, ButtonText } from '@/components/ui/button'
|
||||
import { GluestackUIProvider } from '@/components/ui/gluestack-ui-provider'
|
||||
import '@/styles/global.css'
|
||||
|
||||
export default function Layout() {
|
||||
return (
|
||||
<GluestackUIProvider>
|
||||
<SafeAreaView style={styles.container}>
|
||||
<View className="flex-1 items-center justify-center bg-white">
|
||||
<Text className="text-xl font-bold text-blue-500">
|
||||
Welcome to Nativewind!
|
||||
</Text>
|
||||
<Button>
|
||||
<ButtonText>你好</ButtonText>
|
||||
</Button>
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
</GluestackUIProvider>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: '#f5f5f5',
|
||||
paddingHorizontal: 16,
|
||||
}
|
||||
})
|
||||
```
|
||||
@@ -1,6 +0,0 @@
|
||||
Lucide 是一个轻量级、开源的图标库
|
||||
> 官网:https://lucide.dev/icons/
|
||||
|
||||
```bash
|
||||
npx expo add lucide-react-native
|
||||
```
|
||||
@@ -1,7 +0,0 @@
|
||||
{
|
||||
"label": "第三方库",
|
||||
"position": 2,
|
||||
"link": {
|
||||
"type": "generated-index"
|
||||
}
|
||||
}
|
||||
@@ -1,34 +0,0 @@
|
||||
## 设置页面背景色
|
||||
|
||||
在 `pages.json` 中设置 `backgroundColor` 并未生效。
|
||||
|
||||
设置全局背景色在 `App.vue` 中进行设置
|
||||
|
||||
```css
|
||||
<!--此标签需要新建,不要和样式搞在一起-->
|
||||
<style>
|
||||
page {
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
设置单个页面背景色就在对应的页面中设置
|
||||
|
||||
```css
|
||||
<!--此标签需要新建,不要和样式搞在一起-->
|
||||
<style scoped>
|
||||
page {
|
||||
background-color: red;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
|
||||
``` css
|
||||
<style>
|
||||
page {
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
@@ -1,100 +0,0 @@
|
||||
## 白屏问题
|
||||
|
||||
环境:
|
||||
|
||||
- 浏览器:Chrome56
|
||||
- Unibest:快速开发框架,官网:https://unibest.tech/
|
||||
|
||||
出现白屏参考上面的方案。
|
||||
|
||||
使用的是 Vscode 模板的话,直接参考
|
||||
|
||||
使用的是 Hbuilderx 模板的话,在根目录下添加`vite.config.js`文件
|
||||
|
||||
```js
|
||||
import Uni from '@dcloudio/vite-plugin-uni'
|
||||
import legacy from '@vitejs/plugin-legacy'
|
||||
import { defineConfig } from 'vite'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
uni(),
|
||||
legacyPlugin({
|
||||
// 配置参考上面的 md 文件
|
||||
})
|
||||
]
|
||||
})
|
||||
```
|
||||
|
||||
## 原生Tabbar遮挡
|
||||
|
||||
如果Uniapp原生的Tabbar会遮挡一部分内容,这是因为部分低版本浏览器可能不支持 `env` 计算函数,所以导致整个样式设置失效。
|
||||
|
||||
**解决方案:**
|
||||
|
||||
新建 `/hooks/useSafeAreaBottom` 文件夹
|
||||
|
||||
在该目录下新建 `index.ts` 和 `index.css` 文件,添加一下内容
|
||||
`index.css`:
|
||||
|
||||
```css
|
||||
.safe-area-bottom {
|
||||
padding-bottom: 50px;
|
||||
padding-bottom: calc(50px + constant(safe-area-inset-bottom));
|
||||
padding-bottom: calc(50px + env(safe-area-inset-bottom));
|
||||
}
|
||||
// 设置为50px是因为Uniapp的tabber的高度固定为50px。
|
||||
```
|
||||
|
||||
`index.ts`:
|
||||
|
||||
```ts
|
||||
import './index.css'
|
||||
|
||||
export function useSafeAreaBottom(): {
|
||||
safeAreaInsets: UniApp.GetSystemInfoResult['safeAreaInsets']
|
||||
needSafeAreaBottom: boolean
|
||||
} {
|
||||
const systemInfo = uni.getSystemInfoSync()
|
||||
|
||||
const safeAreaInsets: UniApp.GetSystemInfoResult['safeAreaInsets']
|
||||
= systemInfo.safeAreaInsets ?? {
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
}
|
||||
|
||||
// ✅ 仅检测是否支持 env(safe-area-inset-bottom)
|
||||
const supportsEnv
|
||||
= typeof window !== 'undefined'
|
||||
&& 'CSS' in window
|
||||
&& typeof CSS.supports === 'function'
|
||||
&& CSS.supports('padding-bottom', 'env(safe-area-inset-bottom)')
|
||||
|
||||
const needSafeAreaBottom = !supportsEnv
|
||||
|
||||
return {
|
||||
safeAreaInsets,
|
||||
needSafeAreaBottom,
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
使用:
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view
|
||||
:class="{ 'safe-area-bottom': needSafeAreaBottom }"
|
||||
:style="{ marginTop: safeAreaInsets.top + 'px' }"
|
||||
>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useSafeAreaBottom } from '@/hooks/useSafeAreaBottom/index'
|
||||
|
||||
const { safeAreaInsets, needSafeAreaBottom } = useSafeAreaBottom()
|
||||
</script>
|
||||
```
|
||||
@@ -1,381 +0,0 @@
|
||||
> 背景:现在使用 HBuilderX 打自定义基座的话,一个账号会有限制次数。并且时间过慢。
|
||||
|
||||
## 1. 安装 Android Studio
|
||||
|
||||
使用该工具进行自定义基座。
|
||||
|
||||
下载地址:https://developer.android.com/studio?hl=zh-cn
|
||||
|
||||
按照顺序安装即可,注意SDK的位置不要安装到C盘
|
||||
|
||||
## 2. 下载 HBuilderX 离线SDK
|
||||
|
||||
下载地址:https://nativesupport.dcloud.net.cn/AppDocs/download/android.html
|
||||
|
||||
**注意:下载的 SDK 的版本需要与 HBuilderX 的版本保持一致。**
|
||||
|
||||
历史版本:https://pan.baidu.com/share/init?surl=KtOCtMZJSgfAayHNjTpdTg&pwd=4hvi
|
||||
|
||||
## 3. 导入 HBuilder-Integrate-AS 项目到 Android Studio
|
||||
|
||||
解压从 HBuilderX 下载后的 Android-SDK,使用 Android Studio 打开解压后的 HBuilder-Integrate-AS 项目。
|
||||
|
||||

|
||||
|
||||
导入成功后,会发现目录只有部分内容。
|
||||
|
||||

|
||||
|
||||
这时候需要将 Android 更新为 Project 既可查看到项目全部内容
|
||||
|
||||

|
||||
|
||||
修改后的效果
|
||||
|
||||

|
||||
|
||||
## 4. 配置 Andriod Studio
|
||||
|
||||
配置 JDK ,配置路径:Settings - Build - Build Tools - Gradle
|
||||
|
||||
将 Gradle JDK 的路径修改为本地的路径,修改后点击 `Apply` 即可。注意:JDK 的版本需要和 Gradle 的版本进行适配,如果不适配那么运行的时候也会有详细的报错信息。
|
||||
|
||||

|
||||
|
||||
## 5. Uniapp开发者中心 申请相关信息
|
||||
|
||||
### 5.1 创建应用
|
||||
|
||||
首先根据应用名称检查是否已经存在当前的项目。
|
||||
|
||||

|
||||
|
||||
有过没有的话则点击右上角的 `创建应用` 按钮进行创建:
|
||||
|
||||

|
||||
|
||||
创建成功后会添加到 **我的应用** 列表中
|
||||
|
||||

|
||||
|
||||
点击对应的 **应用名称** 即可进入对应的应用
|
||||
|
||||
### 5.2 申请云端证书
|
||||
|
||||
点击创建证书
|
||||
|
||||

|
||||
|
||||
因为需要时间,过段时间刷新即可
|
||||
|
||||

|
||||
|
||||
创建成功后,点击 **证书详情 ** 这里面有需要的一些信息。
|
||||
|
||||
需要的有 别名、MD5、SHA1、SHA256
|
||||
|
||||

|
||||
|
||||
同时还需要证书密码,点击 **查看证书密码 ** 即可获取到。
|
||||
|
||||

|
||||
|
||||
现在记录的信息有: 别名、MD5、SHA1、SHA256、证书密码
|
||||
|
||||
注意下载申请过的证书,后面需要用到
|
||||
|
||||

|
||||
|
||||
### 5.3 新增平台信息
|
||||
|
||||
进入 **各平台信息** ,点击 **新增** 按钮
|
||||
|
||||

|
||||
|
||||
填写以下信息,注意填写包名(任意),该包名后面使用到。这个时候 SHA1、MD5、SHA256 就是在 [5.2 申请云端证书](#52-申请云端证书) 章节申请的信息。
|
||||
|
||||

|
||||
|
||||
创建成功后就会显示
|
||||
|
||||

|
||||
|
||||
创建离线Key,点击刚刚创建的平台信息的 创建离线Key 按钮
|
||||
|
||||

|
||||
|
||||
点击进行创建,创建成功后,会显示 **查看离线Key**
|
||||
|
||||

|
||||
|
||||
点击查看对应的离线Key,主要保留该值,后面会用到
|
||||
|
||||
## 6. 配置导入过的 HBuilder-Integrate-AS 项目
|
||||
|
||||
配置 `HBuilder-Integrate-AS\simpleDemo\build.gradle` ,这些修改的信息 已经都在 [5. Uniapp开发者中心 申请相关信息](#5-Uniapp开发者中心 申请相关信息) 申请过了,我已标注。注意下载云端证书,并放到 simpleDemo 目录下。
|
||||
|
||||

|
||||
|
||||
替换 离线Key(该值就在 [5.3 新增平台信息](#53-新增平台信息) 申请过了),配置 `HBuilder-Integrate-AS\simpleDemo\src\main\AndroidManifest.xml` 文件。
|
||||
|
||||

|
||||
|
||||
配置 `HBuilder-Integrate-AS\simpleDemo\src\main\assets\data\dcloud_control.xml` ,替换自己项目的appid。
|
||||
|
||||

|
||||
|
||||
## 7. Hbuilder X 导出本地打包资源
|
||||
|
||||
注意 APPID 需要和创建应用的 appid 保持一致。如果不一致,可以去源码视图进行修改
|
||||
|
||||

|
||||
|
||||
导出成功后,路径参考:
|
||||
|
||||

|
||||
|
||||
复制 **resources** 文件夹下面文件夹,然后替换 **HBuilder-Integrate-AS** 项目中的 `HBuilder-Integrate-AS\simpleDemo\src\main\assets\apps\__UNI__A` 目录,将 `__UNI__A` 文件夹替换为导出的 `__UNI__9063282` 文件夹,替换后如下:
|
||||
|
||||

|
||||
|
||||
确保 应用版本名称 和 应用版本号保持一致
|
||||
|
||||

|
||||
|
||||

|
||||
|
||||
## 8. 运行项目
|
||||
|
||||
先进行加载配置好的项目
|
||||
|
||||

|
||||
|
||||
加载成功后即可出现蓝色运行按钮,点击运行即可
|
||||
|
||||

|
||||
|
||||
## 9. 导入原生插件
|
||||
|
||||
> 如果不需要该步可以忽略,不影响自定义基座。
|
||||
|
||||
参考网站:https://zh.uniapp.dcloud.io/plugin/native-plugin.html#%E6%9C%AC%E5%9C%B0%E6%8F%92%E4%BB%B6-%E9%9D%9E%E5%86%85%E7%BD%AE%E5%8E%9F%E7%94%9F%E6%8F%92%E4%BB%B6
|
||||
|
||||
### 9.1 下载插件
|
||||
|
||||
这里用 **DCloud-RichAlert** 举例,插件下载地址:https://ext.dcloud.net.cn/plugin?id=36
|
||||
|
||||
下载完毕后,新建 **nativeplugins** 文件夹,将解压后的插件放到该文件夹下面
|
||||
|
||||

|
||||
|
||||
9.2 配置本地插件
|
||||
|
||||

|
||||
|
||||
选择插件
|
||||
|
||||

|
||||
|
||||
配置成功页面
|
||||
|
||||

|
||||
|
||||
然后就可以使用啦,在页面中添加测试代码
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view class="content">
|
||||
<image class="logo" src="/static/logo.png"></image>
|
||||
<view class="text-area">
|
||||
<text class="title">{{title}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: 'Hello',
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
const dcRichAlert = uni.requireNativePlugin('DCloud-RichAlert')
|
||||
dcRichAlert.show(
|
||||
{
|
||||
position: 'bottom',
|
||||
title: '提示信息',
|
||||
titleColor: '#FF0000',
|
||||
content:
|
||||
"<a href='https://uniapp.dcloud.io/' value='Hello uni-app'>uni-app</a> 是一个使用 Vue.js 开发跨平台应用的前端框架!\n免费的\n免费的\n免费的\n重要的事情说三遍",
|
||||
contentAlign: 'left',
|
||||
checkBox: {
|
||||
title: '不再提示',
|
||||
isSelected: true,
|
||||
},
|
||||
buttons: [
|
||||
{
|
||||
title: '取消',
|
||||
},
|
||||
{
|
||||
title: '否',
|
||||
},
|
||||
{
|
||||
title: '确认',
|
||||
titleColor: '#3F51B5',
|
||||
},
|
||||
],
|
||||
},
|
||||
(result) => {
|
||||
switch (result.type) {
|
||||
case 'button':
|
||||
console.log('callback---button--' + result.index)
|
||||
break
|
||||
case 'checkBox':
|
||||
console.log('callback---checkBox--' + result.isSelected)
|
||||
break
|
||||
case 'a':
|
||||
console.log('callback---a--' + JSON.stringify(result))
|
||||
break
|
||||
case 'backCancel':
|
||||
console.log('callback---backCancel--')
|
||||
break
|
||||
}
|
||||
},
|
||||
)
|
||||
},
|
||||
methods: {},
|
||||
}
|
||||
</script>
|
||||
|
||||
```
|
||||
|
||||
当然,现在还没有结束,如果需要在本地看到效果,需要重复 [7. Hbuilder X 导出本地打包资源](#7-Hbuilder X 导出本地打包资源) 步骤,将新的打包资源将旧的替换掉。
|
||||
|
||||
### 9.3 配置项目
|
||||
|
||||
**重要的下一步**,将 `nativeplugins\DCloud-RichAlert\android\uniplugin_richalert.aar` 复制到 `HBuilder-Integrate-AS\simpleDemo\libs` 文件夹下。
|
||||
|
||||

|
||||
|
||||
然后呢,还没有结束哦。
|
||||
|
||||
在assets目录下创建 **dcloud_uniplugins.json** 文件,添加以下内容
|
||||
|
||||
```json
|
||||
{
|
||||
"nativePlugins": [
|
||||
{
|
||||
"plugins": [
|
||||
{
|
||||
"type": "module",
|
||||
"name": "DCloud-RichAlert",
|
||||
"class": "uni.dcloud.io.uniplugin_richalert.RichAlertWXModule"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||

|
||||
|
||||
### 9.4 配置gradle文件
|
||||
|
||||
添加制定依赖。
|
||||
|
||||
```
|
||||
dependencies {
|
||||
implementation fileTree(dir: 'libs', include: ['*.aar', '*.jar'], exclude: [])
|
||||
implementation 'androidx.appcompat:appcompat:1.1.0'
|
||||
implementation 'androidx.localbroadcastmanager:localbroadcastmanager:1.0.0'
|
||||
implementation 'androidx.core:core:1.1.0'
|
||||
implementation "androidx.fragment:fragment:1.1.0"
|
||||
implementation 'androidx.recyclerview:recyclerview:1.1.0'
|
||||
implementation 'com.facebook.fresco:fresco:2.5.0'
|
||||
implementation "com.facebook.fresco:animated-gif:2.5.0"
|
||||
implementation 'com.github.bumptech.glide:glide:4.9.0'
|
||||
implementation 'com.alibaba:fastjson:1.2.83'
|
||||
implementation 'androidx.webkit:webkit:1.5.0'
|
||||
// 基座需要,必须添加。主要是这个是
|
||||
implementation 'com.github.bumptech.glide:glide:4.9.0'
|
||||
}
|
||||
```
|
||||
|
||||

|
||||
|
||||
### 9.5 运行项目
|
||||
|
||||
然后就是可以重新运行项目啦。运行成功的结果如下:
|
||||
|
||||

|
||||
|
||||
## 10. 自定义基座
|
||||
|
||||
### 10.1 Debug 配置
|
||||
|
||||
修改 `HBuilder-Integrate-AS\simpleDemo\src\main\assets\data\dcloud_control.xml` 文件,设置 Debug 模式:
|
||||
|
||||
```xml
|
||||
<hbuilder debug="true" syncDebug="true">
|
||||
<apps>
|
||||
<app appid="__UNI__ID" appver=""/>
|
||||
</apps>
|
||||
</hbuilder>
|
||||
```
|
||||
|
||||

|
||||
|
||||
修改 `HBuilder-Integrate-AS\simpleDemo\build.gradle` 在该文件中添加 **okhttp3** 依赖
|
||||
|
||||
```
|
||||
dependencies {
|
||||
implementation "com.alibaba:fastjson:1.2.83"
|
||||
implementation "com.squareup.okhttp3:okhttp:3.12.12"
|
||||
}
|
||||
```
|
||||
|
||||

|
||||
|
||||
### 10.2 导入 Debug SDK
|
||||
|
||||
需要导入的 SDK 位于 `Android-SDK@4.66.82418_20250520\SDK\libs` 中
|
||||
|
||||

|
||||
|
||||
将 **debug-server-release.aar** 复制到 **libs** 下面
|
||||
|
||||

|
||||
|
||||
### 10.3 生成APK文件
|
||||
|
||||

|
||||
|
||||
生成后会生成在 debug 目录下
|
||||
|
||||

|
||||
|
||||
### 10.4 复制APK文件到HBuilderX中
|
||||
|
||||
1. 在HBuilderX项目中创建创建 unpackage 目录,在 unpackage 目录中创建 debug 目录,将上述生成的APK文件拷贝到debug目录中。
|
||||
2. **重命名**文件为 **android_debug.apk**,目录结构参考下图
|
||||

|
||||
|
||||
### 10.5 运行自定义基座
|
||||
|
||||

|
||||
|
||||
选择自定义基座
|
||||
|
||||

|
||||
|
||||
点击运行,运行结果如下:
|
||||
|
||||

|
||||
|
||||
同时能支持 **热更新** 。修改下,查看效果吧。
|
||||
|
||||

|
||||
|
||||
## 11. 模块及三方 SDK 配置
|
||||
|
||||
参考官网:https://nativesupport.dcloud.net.cn/AppDocs/usemodule/androidModuleConfig/others.html
|
||||
|
Before Width: | Height: | Size: 62 KiB |
|
Before Width: | Height: | Size: 7.3 KiB |
|
Before Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 55 KiB |
|
Before Width: | Height: | Size: 131 KiB |
|
Before Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 19 KiB |
|
Before Width: | Height: | Size: 33 KiB |
|
Before Width: | Height: | Size: 35 KiB |
|
Before Width: | Height: | Size: 30 KiB |
|
Before Width: | Height: | Size: 5.8 KiB |
|
Before Width: | Height: | Size: 35 KiB |
|
Before Width: | Height: | Size: 45 KiB |
|
Before Width: | Height: | Size: 69 KiB |
|
Before Width: | Height: | Size: 33 KiB |
|
Before Width: | Height: | Size: 51 KiB |
|
Before Width: | Height: | Size: 34 KiB |
|
Before Width: | Height: | Size: 208 KiB |
|
Before Width: | Height: | Size: 212 KiB |
|
Before Width: | Height: | Size: 111 KiB |
|
Before Width: | Height: | Size: 128 KiB |
|
Before Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 41 KiB |
|
Before Width: | Height: | Size: 62 KiB |
|
Before Width: | Height: | Size: 105 KiB |
|
Before Width: | Height: | Size: 83 KiB |
|
Before Width: | Height: | Size: 137 KiB |
|
Before Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 114 KiB |
|
Before Width: | Height: | Size: 21 KiB |
|
Before Width: | Height: | Size: 29 KiB |
|
Before Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 47 KiB |
|
Before Width: | Height: | Size: 124 KiB |
|
Before Width: | Height: | Size: 31 KiB |
|
Before Width: | Height: | Size: 39 KiB |
|
Before Width: | Height: | Size: 117 KiB |
|
Before Width: | Height: | Size: 49 KiB |
|
Before Width: | Height: | Size: 29 KiB |
|
Before Width: | Height: | Size: 94 KiB |
|
Before Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 48 KiB |
|
Before Width: | Height: | Size: 19 KiB |
|
Before Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 17 KiB |
@@ -1,65 +0,0 @@
|
||||
环境:
|
||||
- 浏览器:Chrome56
|
||||
- Vue:^3.5.15
|
||||
- Vite:6.3.5
|
||||
|
||||
解决方案:
|
||||
|
||||
`@vitejs/plugin-legacy` ,该包是Vite提供的一个插件,为打包后的文件提供传统浏览器兼容性支持。官网:https://github.com/vitejs/vite/tree/main/packages/plugin-legacy
|
||||
|
||||
`terser`,主要用于压缩代码,还有代码混淆、源码映射等功能。
|
||||
|
||||
```bash
|
||||
pnpm i @vitejs/plugin-legacy terser -D
|
||||
```
|
||||
|
||||
安装上述依赖后,在 `vite.config.ts/js` 中添加以下内容:
|
||||
|
||||
```ts
|
||||
import legacy from '@vitejs/plugin-legacy'
|
||||
// 在插件处添加一下功能
|
||||
plugins: [
|
||||
legacy({
|
||||
// 目标浏览器环境,'defaults' 是浏览器列表默认设置,支持 Chrome 56 及以上
|
||||
targets: ['defaults', 'Chrome >= 56'],
|
||||
|
||||
// 额外引入的兼容性 polyfill,这里加入了对 generator 函数的支持
|
||||
additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
|
||||
|
||||
// 是否生成兼容旧浏览器的代码块(chunk)
|
||||
renderLegacyChunks: true,
|
||||
|
||||
// 需要引入的具体 polyfill 列表,确保目标环境缺失的 API 得到支持
|
||||
polyfills: [
|
||||
'es.symbol', // Symbol 支持
|
||||
'es.array.filter', // Array.prototype.filter 支持
|
||||
'es.promise', // Promise 支持
|
||||
'es.promise.finally', // Promise.prototype.finally 支持
|
||||
'es.object.assign', // Object.assign 支持
|
||||
'es.map', // Map 支持
|
||||
'es.set', // Set 支持
|
||||
'es.array.for-each', // Array.prototype.forEach 支持
|
||||
'es.object.define-properties', // Object.defineProperties 支持
|
||||
'es.object.define-property', // Object.defineProperty 支持
|
||||
'es.object.get-own-property-descriptor', // Object.getOwnPropertyDescriptor 支持
|
||||
'es.object.get-own-property-descriptors', // Object.getOwnPropertyDescriptors 支持
|
||||
'es.object.keys', // Object.keys 支持
|
||||
'es.object.to-string', // Object.prototype.toString 支持
|
||||
'web.dom-collections.for-each', // DOM 集合的 forEach 支持
|
||||
'esnext.global-this', // 全局变量 globalThis 支持
|
||||
'esnext.string.match-all', // String.prototype.matchAll 支持
|
||||
'es.array.iterator', // 数组迭代器支持
|
||||
'es.string.includes', // String.prototype.includes 支持
|
||||
'es.string.starts-with', // String.prototype.startsWith 支持
|
||||
'es.object.values', // Object.values 支持
|
||||
],
|
||||
}),
|
||||
]
|
||||
```
|
||||
|
||||
`targets` 可以参考:[Browserslist官网](https://github.com/browserslist/browserslist) 查询
|
||||
|
||||
**注意该方案只在打包后生效。**
|
||||
|
||||
|
||||
|
||||
@@ -1,3 +0,0 @@
|
||||
PostgreSQL(常简称“Postgres”)是一款强调可扩展性和标准兼容性的对象关系型数据库管理系统(ORDBMS)。作为数据库服务器,其核心功能是安全存储数据并支持最佳实践,同时支持本地或网络(含互联网)中的应用程序按需检索数据。它可处理从小型单机应用到高并发互联网应用的各类负载,最新版本还支持数据库复制以提升安全性和可扩展性。
|
||||
|
||||
PostgreSQL 实现了 SQL:2011 标准的大部分功能,支持 ACID 事务(含多数 DDL 语句),通过多版本并发控制(MVCC)避免锁竞争,提供防脏读和完全可序列化能力。它支持复杂 SQL 查询、多种索引类型、可更新视图、物化视图、触发器、外键,以及函数和存储过程,并拥有丰富的第三方扩展。此外,PostgreSQL 支持从其他数据库迁移,通过标准 SQL 兼容和迁移工具,甚至可通过内置或第三方扩展模拟专有数据库的特性(如 Oracle)。
|
||||
@@ -1,15 +0,0 @@
|
||||
## Docker安装
|
||||
dockerhub网站:https://hub.docker.com/_/postgres
|
||||
|
||||
1. 拉取
|
||||
|
||||
```bash
|
||||
docker pull postgres@18
|
||||
```
|
||||
2. 运行
|
||||
|
||||
```bash
|
||||
docker run --name postgres18 -e POSTGRES_PASSWORD=xxx -p 5432:5432 -d postgres:18
|
||||
```
|
||||
|
||||
> 初始化数据库:postgres 默认用户名:postgres
|
||||
@@ -1,11 +0,0 @@
|
||||
SQL Server 是微软推出的一款关系型数据库管理系统(RDBMS),主要用于存储、管理和处理结构化数据。
|
||||
|
||||
简单来说可以这样理解:
|
||||
|
||||
稳定可靠:常用于企业级应用,适合处理大量数据和高并发场景
|
||||
|
||||
功能全面:支持事务、索引、视图、存储过程、触发器等常见数据库功能
|
||||
|
||||
和微软生态集成好:和 Windows、.NET、Azure 等配合非常顺畅
|
||||
|
||||
易上手:自带管理工具(SSMS),对新手和运维都比较友好
|
||||
@@ -1,200 +0,0 @@
|
||||
## Windows系统
|
||||
|
||||
### 安装
|
||||
|
||||
**1**、登陆微软中国官网:[Microsoft - Official Home Page](https://link.zhihu.com/?target=https%3A//www.microsoft.com/zh-cn/);在搜索中输入 SQL Server 2008 并搜索。
|
||||
|
||||

|
||||
|
||||
下载链接:
|
||||
|
||||
[Download Microsoft® SQL Server® 2008 R2 SP2 - Express Edition from Official Microsoft Download Center](https://link.zhihu.com/?target=https%3A//www.microsoft.com/zh-CN/download/details.aspx%3Fid%3D30438)
|
||||
|
||||
**2**、下载
|
||||
|
||||
下载 64 位程序,如果系统是 32 位,就选 32 位的
|
||||
|
||||

|
||||
|
||||
这里只下载 **SQLEXPR_x64_CHS.exe** ,可视化工具选用 **Navicat**
|
||||
|
||||
**3**、安装
|
||||
|
||||
先安装SQL,再安装 SQL Management Studio
|
||||
|
||||
双击SQLEXPR_x64.CHS
|
||||
|
||||

|
||||
|
||||
等待加载完毕
|
||||
|
||||
(这时会有一定的几率提醒你的电脑缺少[Microsoft .NET Framework 2.0](https://zhida.zhihu.com/search?content_id=102713512&content_type=Article&match_order=1&q=Microsoft+.NET+Framework+2.0&zd_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJ6aGlkYV9zZXJ2ZXIiLCJleHAiOjE3NDk3MzMwMzQsInEiOiJNaWNyb3NvZnQgLk5FVCBGcmFtZXdvcmsgMi4wIiwiemhpZGFfc291cmNlIjoiZW50aXR5IiwiY29udGVudF9pZCI6MTAyNzEzNTEyLCJjb250ZW50X3R5cGUiOiJBcnRpY2xlIiwibWF0Y2hfb3JkZXIiOjEsInpkX3Rva2VuIjpudWxsfQ.riy6QZKx3etA1Hd2g0oaCLoNl0G_pzuoq8tZqWZXfFo&zhida_source=entity) 或更高版本
|
||||
|
||||
根据他的提示进行安装就行)
|
||||
|
||||

|
||||
|
||||
如果没有,请忽略这一步。
|
||||
|
||||
当他顺利加载完毕之后,我们就可以看到下图所示的界面,**点击全新安装**
|
||||
|
||||

|
||||
|
||||

|
||||
|
||||
接受并下一步
|
||||
|
||||

|
||||
|
||||
点击安装
|
||||
|
||||
一直下一步,保持默认设置到”实例配置“这一节,并选择”默认实例“,并点击下一步
|
||||
|
||||

|
||||
|
||||
再一路下一步到”数据库引擎配置这一节“
|
||||
|
||||

|
||||
|
||||
如果没有用户的话就点击”添加当前用户”
|
||||
|
||||

|
||||
|
||||
错误报告可选可不选
|
||||
|
||||
一直下一步直到安装完成
|
||||
|
||||

|
||||
|
||||
到此为止,我们的安装过程已经进行完成了。 SQL Management Studio 可按照需求安装
|
||||
|
||||
### 配置
|
||||
|
||||
#### 服务
|
||||
|
||||
Windows 系统:`win` + `r` 输入 `services.msc` ,打开后找到 SqlServer 相关的,并将服务修改为自动,并且需要 首次 手动启动
|
||||
|
||||

|
||||
|
||||

|
||||
|
||||
#### 协议
|
||||
|
||||
`win` 键启动搜索,搜索 SQL Server 配置管理器
|
||||
|
||||

|
||||
|
||||
点击 SQL Server 配置管理器,确保该三个协议已启动,未启动则启动
|
||||
|
||||
#### 端口
|
||||
|
||||
右键 TCP/IP
|
||||
|
||||

|
||||
|
||||
点击属性,修改 TCP 端口 为 1433
|
||||
|
||||

|
||||
|
||||
点击 应用 和 确认后,**重启电脑才能生效**
|
||||
|
||||
### 校验
|
||||
|
||||
**校验是否安装正确**
|
||||
|
||||
打开 **命令提示符**(Win + R,输入 `cmd`,回车)
|
||||
|
||||
Windows 上默认安装 SQL Server 的时候,通常会带有 `sqlcmd` 工具(如果没有,可能需要单独安装“命令行工具”)。
|
||||
|
||||
1. 打开 **命令提示符**(Win + R,输入 `cmd`,回车)
|
||||
2. 输入以下命令连接本机默认实例:
|
||||
|
||||
```bash
|
||||
sqlcmd -S localhost -E
|
||||
```
|
||||
|
||||
参数说明:
|
||||
|
||||
- `-S localhost` :连接本机默认实例
|
||||
- `-E` :使用 Windows 身份验证
|
||||
|
||||
3. 如果成功连接,你会看到类似如下提示:
|
||||
|
||||
```shell
|
||||
1>
|
||||
```
|
||||
|
||||
4. 在提示符后输入测试命令:
|
||||
|
||||
```sql
|
||||
SELECT @@VERSION;
|
||||
GO
|
||||
```
|
||||
|
||||
然后按回车,输出当前 SQL Server 版本信息,证明连接成功。
|
||||
|
||||
5. 输入
|
||||
|
||||
```
|
||||
QUIT
|
||||
```
|
||||
|
||||
退出命令行界面。
|
||||
|
||||
### 启用混合模式认证(SQL Server 和 Windows 认证)
|
||||
|
||||
默认情况下,SQL Server 只开启 Windows 认证(Windows Authentication Mode),你需要手动开启“混合模式”(Mixed Mode Authentication),才能使用 SQL Server 账号(如 `sa`)登录。
|
||||
|
||||
1. 打开命令提示符,连接到 SQL Server:
|
||||
|
||||
```bash
|
||||
sqlcmd -S localhost -E
|
||||
```
|
||||
|
||||
2. 执行以下命令开启混合模式:
|
||||
|
||||
```sql
|
||||
EXEC xp_instance_regwrite
|
||||
N'HKEY_LOCAL_MACHINE',
|
||||
N'Software\Microsoft\MSSQLServer\MSSQLServer',
|
||||
N'LoginMode',
|
||||
REG_DWORD,
|
||||
2
|
||||
GO
|
||||
```
|
||||
|
||||
> 说明:`LoginMode` 设置为 `2` 表示混合模式,`1` 表示只 Windows 认证。
|
||||
|
||||
3. 重启 SQL Server 服务,使设置生效:
|
||||
|
||||
- 打开服务管理器,找到 `SQL Server (实例名)` 服务,点击“重启”或先停止再启动。
|
||||
|
||||
4. 启用 `sa` 账号并设置密码(默认可能禁用)
|
||||
|
||||
继续用 `sqlcmd` 执行:
|
||||
|
||||
```
|
||||
ALTER LOGIN sa ENABLE;
|
||||
GO
|
||||
ALTER LOGIN sa WITH PASSWORD = '你的强密码';
|
||||
GO
|
||||
```
|
||||
|
||||
- **密码建议**:至少 8 位,包含大小写字母、数字和特殊符号。
|
||||
|
||||
5. 测试账号密码登录
|
||||
|
||||
- 使用 `sqlcmd`:
|
||||
|
||||
```bash
|
||||
sqlcmd -S localhost -U sa -P 你的密码
|
||||
```
|
||||
|
||||
- 连接成功即开启账号密码登录。
|
||||
|
||||
6. 额外说明
|
||||
|
||||
- 修改注册表和重启服务后才生效。
|
||||
- 也可以用 PowerShell 或其他管理工具执行上述 SQL 命令。
|
||||
- 强烈建议启用强密码,防止安全风险。
|
||||
- 生产环境尽量避免启用 `sa`,建议创建新的 SQL 登录账号。
|
||||
|
Before Width: | Height: | Size: 35 KiB |
|
Before Width: | Height: | Size: 34 KiB |
|
Before Width: | Height: | Size: 69 KiB |
|
Before Width: | Height: | Size: 21 KiB |
|
Before Width: | Height: | Size: 135 KiB |
|
Before Width: | Height: | Size: 25 KiB |
|
Before Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 125 KiB |
|
Before Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 142 KiB |
|
Before Width: | Height: | Size: 156 KiB |
|
Before Width: | Height: | Size: 151 KiB |
|
Before Width: | Height: | Size: 64 KiB |
|
Before Width: | Height: | Size: 173 KiB |
|
Before Width: | Height: | Size: 168 KiB |
|
Before Width: | Height: | Size: 21 KiB |
|
Before Width: | Height: | Size: 83 KiB |
@@ -1,15 +0,0 @@
|
||||
Docker 是一个 容器化平台,可以让你把应用程序和它运行所需的环境打包在一起,形成一个独立的“容器”。
|
||||
简单来说,它就像一个轻量级的虚拟机,但比虚拟机更快、更省资源。
|
||||
|
||||
## 概念
|
||||
1. 镜像(Image)
|
||||
- 镜像是一个 只读模板,包含应用程序和依赖环境。
|
||||
- 可以理解为应用的快照,像“配方”。
|
||||
2. 容器(Container)
|
||||
- 容器是镜像的 运行实例,可以启动、停止、删除。
|
||||
- 可以理解为根据配方做出来的“饭菜”。
|
||||
3. Dockerfile
|
||||
- 用来定义镜像内容的文件,相当于“配方清单”。
|
||||
- 里面写明了基础镜像、依赖、环境变量、运行命令等。
|
||||
4. Docker Hub
|
||||
- 官方提供的镜像仓库,可以下载别人已经打包好的镜像,也可以上传自己的镜像。
|
||||
@@ -1,291 +0,0 @@
|
||||
## 快速安装
|
||||
|
||||
轩辕提供的安装脚本:
|
||||
|
||||
```bash
|
||||
bash <(wget -qO- https://xuanyuan.cloud/docker.sh)
|
||||
```
|
||||
|
||||
> 参考网站:https://zhuanlan.zhihu.com/p/24461370776
|
||||
|
||||
## 脚本安装
|
||||
|
||||
### 对于基于Debian的系统(如Ubuntu、Debian)
|
||||
|
||||
```bash
|
||||
#!/bin/bash
|
||||
|
||||
# -------------------------
|
||||
# 1️⃣ 卸载旧版本 Docker
|
||||
# -------------------------
|
||||
sudo apt-get remove -y \
|
||||
docker \
|
||||
docker-engine \
|
||||
docker.io \
|
||||
containerd \
|
||||
runc \
|
||||
docker-ce \
|
||||
docker-ce-cli \
|
||||
containerd.io \
|
||||
docker-compose-plugin
|
||||
|
||||
# 可选:清理残留数据(慎用,会删除容器和镜像)
|
||||
# sudo rm -rf /var/lib/docker /var/lib/containerd
|
||||
|
||||
echo "旧版本 Docker 已卸载(如果存在)"
|
||||
|
||||
# -------------------------
|
||||
# 2️⃣ 更新软件包列表并安装必要依赖
|
||||
# -------------------------
|
||||
sudo apt-get update
|
||||
sudo apt-get install -y ca-certificates curl software-properties-common lsb-release
|
||||
|
||||
# -------------------------
|
||||
# 3️⃣ 创建密钥存储目录
|
||||
# -------------------------
|
||||
sudo install -m 0755 -d /etc/apt/keyrings
|
||||
|
||||
# -------------------------
|
||||
# 4️⃣ 下载Docker官方GPG密钥
|
||||
# -------------------------
|
||||
sudo curl -fsSL https://download.docker.com/linux/$(. /etc/os-release; echo "$ID")/gpg -o /etc/apt/keyrings/docker.asc
|
||||
sudo chmod a+r /etc/apt/keyrings/docker.asc
|
||||
|
||||
# -------------------------
|
||||
# 5️⃣ 添加 Docker 仓库
|
||||
# -------------------------
|
||||
if [ "$(lsb_release -is)" = "Ubuntu" ]; then
|
||||
echo \
|
||||
"deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.asc] https://download.docker.com/linux/ubuntu \
|
||||
$(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
|
||||
elif [ "$(lsb_release -is)" = "Debian" ]; then
|
||||
echo \
|
||||
"deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.asc] https://download.docker.com/linux/debian \
|
||||
$(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
|
||||
fi
|
||||
|
||||
sudo apt-get update
|
||||
echo "Docker 仓库已添加。"
|
||||
|
||||
# -------------------------
|
||||
# 6️⃣ 安装 Docker 及相关组件
|
||||
# -------------------------
|
||||
sudo apt-get install -y docker-ce docker-ce-cli containerd.io docker-compose-plugin
|
||||
|
||||
echo "Docker 安装完成 ✅"
|
||||
```
|
||||
|
||||
### 对于基于RHEL的系统(如CentOS、RHEL)
|
||||
|
||||
```bash
|
||||
#!/bin/bash
|
||||
|
||||
# -------------------------
|
||||
# 1️⃣ 卸载旧版本 Docker
|
||||
# -------------------------
|
||||
sudo yum remove -y docker \
|
||||
docker-client \
|
||||
docker-client-latest \
|
||||
docker-common \
|
||||
docker-latest \
|
||||
docker-latest-logrotate \
|
||||
docker-logrotate \
|
||||
docker-engine \
|
||||
docker-ce \
|
||||
docker-ce-cli \
|
||||
containerd.io \
|
||||
docker-compose-plugin
|
||||
|
||||
echo "旧版本 Docker 已卸载(如果存在)"
|
||||
|
||||
# -------------------------
|
||||
# 2️⃣ 安装 yum 配置管理工具
|
||||
# -------------------------
|
||||
sudo yum install -y yum-utils
|
||||
|
||||
# -------------------------
|
||||
# 3️⃣ 检测系统发行版并添加 Docker 仓库
|
||||
# -------------------------
|
||||
if [ -f /etc/centos-release ]; then
|
||||
# CentOS 系统
|
||||
sudo yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo
|
||||
elif [ -f /etc/redhat-release ]; then
|
||||
# RHEL 系统
|
||||
# 注意:RHEL 用户需要启用订阅管理仓库
|
||||
sudo yum-config-manager --add-repo https://download.docker.com/linux/rhel/docker-ce.repo
|
||||
else
|
||||
echo "未识别的发行版,脚本退出。"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
# -------------------------
|
||||
# 4️⃣ 更新 yum 缓存
|
||||
# -------------------------
|
||||
sudo yum makecache fast
|
||||
echo "Docker 仓库已添加。"
|
||||
|
||||
# -------------------------
|
||||
# 5️⃣ 安装 Docker 及相关组件
|
||||
# -------------------------
|
||||
sudo yum install -y docker-ce docker-ce-cli containerd.io docker-compose-plugin
|
||||
|
||||
echo "Docker 安装完成 ✅"
|
||||
```
|
||||
|
||||
### 通用脚本
|
||||
|
||||
```bash
|
||||
#!/bin/bash
|
||||
|
||||
set -e
|
||||
|
||||
# -------------------------
|
||||
# 1️⃣ 卸载旧版本 Docker
|
||||
# -------------------------
|
||||
remove_old_docker() {
|
||||
if command -v apt-get >/dev/null 2>&1; then
|
||||
sudo apt-get remove -y docker docker-engine docker.io containerd runc docker-ce docker-ce-cli containerd.io docker-compose-plugin || true
|
||||
elif command -v yum >/dev/null 2>&1; then
|
||||
sudo yum remove -y docker \
|
||||
docker-client \
|
||||
docker-client-latest \
|
||||
docker-common \
|
||||
docker-latest \
|
||||
docker-latest-logrotate \
|
||||
docker-logrotate \
|
||||
docker-engine \
|
||||
docker-ce \
|
||||
docker-ce-cli \
|
||||
containerd.io \
|
||||
docker-compose-plugin || true
|
||||
fi
|
||||
echo "旧版本 Docker 已卸载(如果存在)"
|
||||
}
|
||||
|
||||
# -------------------------
|
||||
# 2️⃣ 安装 Docker(DEB 系统)
|
||||
# -------------------------
|
||||
install_docker_deb() {
|
||||
local distro=$1
|
||||
local codename=$2
|
||||
sudo apt-get update
|
||||
sudo apt-get install -y apt-transport-https ca-certificates curl software-properties-common lsb-release
|
||||
sudo install -m 0755 -d /etc/apt/keyrings
|
||||
sudo curl -fsSL "https://download.docker.com/linux/$distro/gpg" -o /etc/apt/keyrings/docker.asc
|
||||
sudo chmod a+r /etc/apt/keyrings/docker.asc
|
||||
echo "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.asc] https://download.docker.com/linux/$distro $codename stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
|
||||
sudo apt-get update
|
||||
sudo apt-get install -y docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin
|
||||
sudo systemctl enable --now docker
|
||||
}
|
||||
|
||||
# -------------------------
|
||||
# 3️⃣ 安装 Docker(RPM 系统)
|
||||
# -------------------------
|
||||
install_docker_rpm() {
|
||||
local distro=$1
|
||||
if [ "$distro" = "fedora" ]; then
|
||||
sudo dnf -y install dnf-plugins-core
|
||||
else
|
||||
sudo yum install -y yum-utils
|
||||
fi
|
||||
sudo yum-config-manager --add-repo "https://download.docker.com/linux/$distro/docker-ce.repo"
|
||||
sudo yum makecache fast
|
||||
sudo yum install -y docker-ce docker-ce-cli containerd.io docker-compose-plugin
|
||||
sudo systemctl enable --now docker
|
||||
}
|
||||
|
||||
# -------------------------
|
||||
# 4️⃣ 主流程
|
||||
# -------------------------
|
||||
remove_old_docker
|
||||
|
||||
# 检测 Linux 发行版
|
||||
if [ -f /etc/os-release ]; then
|
||||
. /etc/os-release
|
||||
else
|
||||
echo "无法确定您的 Linux 发行版。"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
case $ID in
|
||||
ubuntu|debian|raspbian)
|
||||
echo "检测到 $ID $VERSION_CODENAME,开始安装 Docker..."
|
||||
install_docker_deb $ID $VERSION_CODENAME
|
||||
;;
|
||||
centos|rhel|fedora|sles)
|
||||
echo "检测到 $ID,开始安装 Docker..."
|
||||
install_docker_rpm $ID
|
||||
;;
|
||||
*)
|
||||
echo "不支持的 Linux 发行版:$ID"
|
||||
exit 1
|
||||
;;
|
||||
esac
|
||||
|
||||
echo "Docker 及 Docker Compose 安装完成 ✅"
|
||||
```
|
||||
|
||||
### 运行脚本
|
||||
|
||||
```bash
|
||||
# 1.创建脚本
|
||||
vim docker-script.sh
|
||||
|
||||
# 2.输入内容 i 进行编辑模式, :wq 保存
|
||||
|
||||
# 3.赋予权限
|
||||
chmod +x docker-script.sh
|
||||
|
||||
# 4.运行脚本
|
||||
./docker-script.sh
|
||||
```
|
||||
|
||||
## 镜像设置
|
||||
|
||||
不设置镜像会导致拉取速度非常慢
|
||||
访问 https://api.suoyinmulu.com/open/v1/docker-hub/seeded-up/lists 获取最新的docker镜像,将 list 中的内容拷贝到 docker 中的 registry-mirrors 中。
|
||||
|
||||
```bash
|
||||
sudo vim /etc/docker/daemon.json
|
||||
```
|
||||
|
||||
```json
|
||||
{
|
||||
"registry-mirrors": [
|
||||
// list
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
刷新:
|
||||
|
||||
```bash
|
||||
sudo systemctl daemon-reload && sudo systemctl restart docker
|
||||
```
|
||||
|
||||
## 问题
|
||||
### 权限不足
|
||||
1. 添加docker用户组(默认有)
|
||||
|
||||
```
|
||||
sudo groupadd docker
|
||||
```
|
||||
|
||||
2. 添加当前用户到docker组中
|
||||
|
||||
```
|
||||
sudo gpasswd -a $USER docker
|
||||
```
|
||||
|
||||
3. 更新用户组
|
||||
|
||||
```
|
||||
newgrp docker
|
||||
```
|
||||
|
||||
4. 重启生效 或 提前执行(建议重启)
|
||||
|
||||
```
|
||||
sudo chown root:docker /var/run/docker.sock
|
||||
```
|
||||
@@ -1,34 +0,0 @@
|
||||
Docusaurus 是一个开源的静态网站生成器,专注于帮助开发者快速构建、部署和维护文档类网站。
|
||||
> 官网:https://docusaurus.io/zh-CN/
|
||||
|
||||
## 优点
|
||||
- 高度自定义:
|
||||
- 使用 react 开发,并支持自定义扩展组件或自定义页面
|
||||
- 提供 swizzle 命令可完全自定义布局
|
||||
- 基础页面干净整洁,可快速捕捉到关键信息
|
||||
- 社区群庞大,拥有广大的社区支持
|
||||
- 同时支持 docs(文档) 和 blog(博客),能够有更多的选择
|
||||
|
||||
## 快速开始
|
||||
|
||||
### 1.环境要求
|
||||
- Node版本最低 20
|
||||
|
||||
### 2.安装
|
||||
```bash
|
||||
npx create-docusaurus@latest my-website classic
|
||||
```
|
||||
如果需要支持 `typescript`,则使用
|
||||
```bash
|
||||
npx create-docusaurus@latest my-website classic --typescript
|
||||
```
|
||||
|
||||
### 3.运行
|
||||
下载依赖
|
||||
```bash
|
||||
pnpm i
|
||||
```
|
||||
运行项目
|
||||
```bash
|
||||
pnpm run start
|
||||
```
|
||||
@@ -1,35 +0,0 @@
|
||||
默认的项目结构如下
|
||||
```text
|
||||
my-website
|
||||
├── blog
|
||||
│ ├── 2019-05-28-hola.md
|
||||
│ ├── 2019-05-29-hello-world.md
|
||||
│ └── 2020-05-30-welcome.md
|
||||
├── docs
|
||||
│ ├── doc1.md
|
||||
│ ├── doc2.md
|
||||
│ ├── doc3.md
|
||||
│ └── mdx.md
|
||||
├── src
|
||||
│ ├── css
|
||||
│ │ └── custom.css
|
||||
│ └── pages
|
||||
│ ├── styles.module.css
|
||||
│ └── index.ts
|
||||
├── static
|
||||
│ └── img
|
||||
├── docusaurus.config.ts
|
||||
├── package.json
|
||||
├── README.md
|
||||
├── sidebars.ts
|
||||
└── yarn.lock
|
||||
```
|
||||
|
||||
目录介绍:
|
||||
|
||||
- `blog` - 存放博客文章,格式是 Markdown
|
||||
- `docs` - 存放文档内容,也用 Markdown 格式
|
||||
- `src` - 存放自定义的页面和样式。
|
||||
- `static` - 存放自定义的页面和样式
|
||||
- `docusaurus.config.ts` - 配置网站的各种信息
|
||||
- `sidebars.ts` - 配置 docs 侧边栏的内容和结构
|
||||