Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs: update documentation for vue 2.7 support #2491

Merged
merged 1 commit into from
Jun 8, 2023
Merged

docs: update documentation for vue 2.7 support #2491

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 24 additions & 11 deletions site/docs/getting-started.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,9 @@ spline: explain
---

<div style="background: var(--td-warning-color-2); padding: 14px 24px; border-radius: 3px; color: #555a65; line-height: 22px">
<p>由于 vue 2.7 与 tdesign-vue 目前的其他依赖不兼容，请暂时保证您的 vue 版本在 <b>2.7 以下</b>。</p>
<p>建议您将项目依赖配置为`vue: ~2.6.14`。
<p>如果项目同时使用了 vue-template-compiler，请保证 vue-template-compiler 的安装版本与vue一致。</p>
<p>接下来我们将支持在 vue 2.7 中使用，具体时间请关注版本更新动态。</p>
<p>tdesign-vue 在 1.4.0 版本之后支持在 vue2.7 中使用</p>
<p>如果您需要在vue2.7中使用tdesign-vue 请安装 tdesign-vue@naruto 或在具体指定版本后加-naruto的标识 我们在1.4版本起的每个版本都同步构建了一份在vue2.7中使用的版本
<p>如tdesign-vue@1.4.0 适用于 vue 2.6 tdesign-vue@1.4.0-naruto 适用于 vue 2.7</p>
</div>

## 安装
Expand All @@ -18,8 +17,10 @@ spline: explain
推荐使用 npm 方式进行开发

```shell
npm i tdesign-vue
npm i tdesign-vue // 在vue 2.6及以下使用
npm i tdesign-vue@naruto // 在vue 2.7使用
```

### 通过 浏览器引入 安装

目前可以通过 [unpkg.com/tdesign-vue](https://unpkg.com/tdesign-vue) 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。由于部分组件依赖了`@vue/composition-api`，除了像其他 vue2 版本的组件库一样需要引入`vue`，还需要额外手动引入`@vue/composition-api`。
Expand All @@ -36,6 +37,7 @@ npm i tdesign-vue
```

npm package 中提供了多种构建产物，可以阅读 [这里](https://github.com/Tencent/tdesign/blob/main/docs/develop-install.md) 了解不同目录下产物的差别。

## 使用

TDesign 提供了三种方式使用组件，具体使用方式如下
Expand Down Expand Up @@ -73,7 +75,10 @@ Vue.use(TButton);

除此之外，也可以使用 `unplugin-vue-components` 和 `unplugin-auto-import` 来实现自动导入：

您仍需在项目引入组件库的少量全局样式变量及`@vue/composition-api`
如果是在 vue2.6 版本中使用 您仍需在项目引入组件库的少量全局样式变量及`@vue/composition-api`

如果是在 vue2.7 版本中使用 您不再需要在项目引入`@vue/composition-api`

```js
import VueCompositionAPI from '@vue/composition-api';
// 引入组件库的少量全局样式变量
Expand All @@ -83,9 +88,11 @@ Vue.use(VueCompositionAPI); // 必须是项目的第一个 use
```

并安装两个 unplugin 相关的第三方包

```bash
npm install -D unplugin-vue-components unplugin-auto-import
```

然后在 Webpack 或 Vite 对应的配置文件添加上述插件。

#### Vite
Expand Down Expand Up @@ -127,6 +134,7 @@ module.exports = {
],
};
```

> `TDesignResolver` 支持的配置，可以点击此[链接](https://github.com/antfu/unplugin-vue-components/blob/main/src/core/resolvers/tdesign.ts#L4)。

## 快速体验
Expand All @@ -136,9 +144,8 @@ module.exports = {
## 浏览器兼容性

| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/> IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Safari |
| --- | --- | --- | --- |
| Edge >=91 | Firefox >=83 | Chrome >=91 | Safari >=14.1 |

| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Edge >=91 | Firefox >=83 | Chrome >=91 | Safari >=14.1 |

详情参见[桌面端组件库浏览器兼容性说明](https://github.com/Tencent/tdesign/wiki/Browser-Compatibility)

Expand All @@ -157,8 +164,7 @@ Vue.use(VueCompositionAPI); // 必须是第一个 use
Vue.use(otherPlugin);
```


Q: 是否内置reset样式统一页面元素的默认样式 ？
Q: 是否内置 reset 样式统一页面元素的默认样式 ？

A: `0.43.0` 版本开始我们不再引入 `reset.less`，影响最大的是移除了原先全局盒子模型的设定：

Expand All @@ -176,8 +182,15 @@ A: `0.43.0` 版本开始我们不再引入 `reset.less`，影响最大的是移
import 'tdesign-vue/dist/reset.css';
```

Q: 如何在 vue 2.7 中使用?

A: tdesign-vue 在 `1.4.0` 版本之后支持在 vue2.7 中使用。如果您需要在 vue2.7 中使用 tdesign-vue 请安装 tdesign-vue@naruto 或在具体指定版本后加-naruto 的标识 我们在 1.4 版本起的每个版本都同步构建了一份在 vue2.7 中使用的版本

如`tdesign-vue@1.4.0` 适用于 `vue 2.6` `tdesign-vue@1.4.0-naruto` 适用于 `vue 2.7`

Q: 为什么使用有些组件的时候会出现一些奇怪的错误？

A: 使用组件的时候看到这类错误 `vue.runtime.esm.js:4605 [Vue warn]: inject() can only be used inside setup() or functional components.` 说明虽然 `package.json` 中设置的版本号为 `^2.6.14`，但实际上安装了 Vue2.7 的版本，可以在 `node_modules` 目录中检查实际安装的版本号。

由于 Vue2.7 和 Vue2.6 不兼容，请务必确保自己安装的版本号是 Vue2.6.x。
如果您确实需要使用 vue2.7 请安装 `tdesign-vue@naruto`
3 changes: 2 additions & 1 deletion site/src/components/page.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,8 @@ export default {
(nums[0] === '0' && nums[1] < 32) ||
v.indexOf('alpha') > -1 ||
v.indexOf('patch') > -1 ||
v.indexOf('rc') > -1
v.indexOf('rc') > -1 ||
v.indexOf('naruto') > -1
)
return false;
options.unshift({ label: v, value: v.replace(/\./g, '_') });
Expand Down