diff --git a/site/docs/getting-started.md b/site/docs/getting-started.md index ba22517c6..2f381ee09 100644 --- a/site/docs/getting-started.md +++ b/site/docs/getting-started.md @@ -5,10 +5,9 @@ spline: explain ---
-

由于 vue 2.7 与 tdesign-vue 目前的其他依赖不兼容，请暂时保证您的 vue 版本在 2.7 以下。

-

建议您将项目依赖配置为`vue: ~2.6.14`。 -

如果项目同时使用了 vue-template-compiler，请保证 vue-template-compiler 的安装版本与vue一致。

-

接下来我们将支持在 vue 2.7 中使用，具体时间请关注版本更新动态。

+

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

## 安装 @@ -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`。 @@ -36,6 +37,7 @@ npm i tdesign-vue ``` npm package 中提供了多种构建产物，可以阅读 [这里](https://github.com/Tencent/tdesign/blob/main/docs/develop-install.md) 了解不同目录下产物的差别。 + ## 使用 TDesign 提供了三种方式使用组件，具体使用方式如下 @@ -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'; // 引入组件库的少量全局样式变量 @@ -83,9 +88,11 @@ Vue.use(VueCompositionAPI); // 必须是项目的第一个 use ``` 并安装两个 unplugin 相关的第三方包 + ```bash npm install -D unplugin-vue-components unplugin-auto-import ``` + 然后在 Webpack 或 Vite 对应的配置文件添加上述插件。 #### Vite @@ -127,6 +134,7 @@ module.exports = { ], }; ``` + > `TDesignResolver` 支持的配置，可以点击此[链接](https://github.com/antfu/unplugin-vue-components/blob/main/src/core/resolvers/tdesign.ts#L4)。 ## 快速体验 @@ -136,9 +144,8 @@ module.exports = { ## 浏览器兼容性 | [IE / Edge](http://godban.github.io/browsers-support-badges/)
IE / Edge | [Firefox](http://godban.github.io/browsers-support-badges/)
Firefox | [Chrome](http://godban.github.io/browsers-support-badges/)
Chrome | [Safari](http://godban.github.io/browsers-support-badges/)
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) @@ -157,8 +164,7 @@ Vue.use(VueCompositionAPI); // 必须是第一个 use Vue.use(otherPlugin); ``` - -Q: 是否内置reset样式统一页面元素的默认样式 ？ +Q: 是否内置 reset 样式统一页面元素的默认样式 ？ A: `0.43.0` 版本开始我们不再引入 `reset.less`，影响最大的是移除了原先全局盒子模型的设定： @@ -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` diff --git a/site/src/components/page.vue b/site/src/components/page.vue index c5a7dcf31..4d85dcf3a 100644 --- a/site/src/components/page.vue +++ b/site/src/components/page.vue @@ -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, '_') });