103 lines
3.0 KiB
Markdown
103 lines
3.0 KiB
Markdown
|
# 开发环境搭建
|
|||
|
|
|
|||
|
|
## 基础软件安装
|
|||
|
|
|
|||
|
|
首先，我们需要安装 `nodejs`、`npm`等用于开发的基础软件。
|
|||
|
|
|
|||
|
|
Node.js 可以通过不同的方式安装，所有主要平台的官方软件包均可在 [https://nodejs.cn/download/](https://nodejs.cn/download/) 获得。
|
|||
|
|
|
|||
|
|
一种非常方便的安装 Node.js 的方法是通过包管理器，[https://nodejs.cn/download/package-manager/](https://nodejs.cn/download/package-manager/) 中列出了适用于 macOS、Linux 和 Windows 的其他软件包管理器。
|
|||
|
|
|
|||
|
|
## 获取项目源码
|
|||
|
|
|
|||
|
|
通过以下命令获取项目源代码：
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
git clone https://gitee.com/uai-team/uai-editor
|
|||
|
|
cd uai-editor
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 依赖软件安装
|
|||
|
|
|
|||
|
|
有爱文档是一个`Nodejs`项目，正常情况下只需要执行`npm install`即可完成依赖的安装，但是因为项目中依赖了`@tiptap-pro`下的一些扩展，因此在执行`npm install`命令前需要做一些额外的操作。
|
|||
|
|
|
|||
|
|
### 注册Tiptap Cloud账号
|
|||
|
|
|
|||
|
|
通过[https://cloud.tiptap.dev/register](https://cloud.tiptap.dev/register)链接注册一个Tiptap Cloud账号。
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
验证注册的邮箱。
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
填写团队信息。
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
填写个人信息。
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
### 登录Tiptap Cloud账号
|
|||
|
|
|
|||
|
|
通过[https://cloud.tiptap.dev/login](https://cloud.tiptap.dev/login)链接登录已有账号。
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
### 获取NPM token
|
|||
|
|
|
|||
|
|
通过[https://cloud.tiptap.dev/v2/features/pro-extensions](https://cloud.tiptap.dev/v2/features/pro-extensions)链接，获取个人的NPM registry token。
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
复制以上Token的内容，备用。
|
|||
|
|
|
|||
|
|
### 创建.npmrc配置文件
|
|||
|
|
|
|||
|
|
根据官方文档[https://tiptap.dev/docs/guides/pro-extensions](https://tiptap.dev/docs/guides/pro-extensions)或[https://cloud.tiptap.dev/v2/features/pro-extensions](https://cloud.tiptap.dev/v2/features/pro-extensions)，在克隆项目的根目录下创建`.npmrc`文件，并填入文件内容。
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
@tiptap-pro:registry=https://registry.tiptap.dev/
|
|||
|
|
@tiptap-cloud:registry=https://registry.tiptap.dev/
|
|||
|
|
//registry.tiptap.dev/:_authToken=${上图中复制的Token}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
即，`.npmrc`文件的内容应该为：
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
@tiptap-pro:registry=https://registry.tiptap.dev/
|
|||
|
|
@tiptap-cloud:registry=https://registry.tiptap.dev/
|
|||
|
|
//registry.tiptap.dev/:_authToken=SnF9fofcsYRXn***************WCtXj
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
此时，项目的目录结构应该为：
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
uai-editor
|
|||
|
|
├── src
|
|||
|
|
├── .gitignore
|
|||
|
|
├── .npmignore
|
|||
|
|
├── .npmrc # 这个是通过前面的步骤新增加的配置文件
|
|||
|
|
├── LICENSE
|
|||
|
|
├── README.md
|
|||
|
|
├── index.html
|
|||
|
|
├── package.json
|
|||
|
|
├── tsconfig.json
|
|||
|
|
└── vite.config.ts
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 执行软件安装
|
|||
|
|
|
|||
|
|
完成以上操作后，就可以执行`npm install`来进行依赖的安装了。
|
|||
|
|
|
|||
|
|
## 软件运行
|
|||
|
|
|
|||
|
|
最后，我们需要运行项目，执行以下命令可以运行项目或自己的项目：
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
npm install
|
|||
|
|
|
|||
|
|
npm run dev
|
|||
|
|
```
|