From 441c37641db5052966c69e264ec992b181182fea Mon Sep 17 00:00:00 2001 From: ajaxzheng <894103554@qq.com> Date: Fri, 14 Feb 2025 14:21:59 +0800 Subject: [PATCH] docs(sites): update official website documentation and readme (#2895) --- .../sites/demos/pc/webdoc/develop-demo-en.md | 2 +- .../sites/demos/pc/webdoc/develop-demo.md | 2 +- .../demos/pc/webdoc/import-components.md | 154 +++++------------- .../sites/demos/pc/webdoc/installation-en.md | 2 +- .../sites/demos/pc/webdoc/installation.md | 5 +- .../cli/src/commands/build/build-entry-app.ts | 4 +- packages/vue-runtime/README.md | 1 - packages/vue-runtime/README.zh-CN.md | 1 - 8 files changed, 48 insertions(+), 123 deletions(-) diff --git a/examples/sites/demos/pc/webdoc/develop-demo-en.md b/examples/sites/demos/pc/webdoc/develop-demo-en.md index dc6bc05fd4..832a41e0f5 100644 --- a/examples/sites/demos/pc/webdoc/develop-demo-en.md +++ b/examples/sites/demos/pc/webdoc/develop-demo-en.md @@ -51,7 +51,7 @@ import vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [vue()], define: { - 'process.env': { ...process.env } + 'process.env': { TINY_MODE: 'pc' } } }) ``` diff --git a/examples/sites/demos/pc/webdoc/develop-demo.md b/examples/sites/demos/pc/webdoc/develop-demo.md index 3b718b489b..2ee8b45ecc 100644 --- a/examples/sites/demos/pc/webdoc/develop-demo.md +++ b/examples/sites/demos/pc/webdoc/develop-demo.md @@ -51,7 +51,7 @@ import vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [vue()], define: { - 'process.env': { ...process.env } + 'process.env': { TINY_MODE: 'pc' } } }) ``` diff --git a/examples/sites/demos/pc/webdoc/import-components.md b/examples/sites/demos/pc/webdoc/import-components.md index 996e788a62..442c770241 100644 --- a/examples/sites/demos/pc/webdoc/import-components.md +++ b/examples/sites/demos/pc/webdoc/import-components.md @@ -14,121 +14,67 @@ npm i @opentiny/unplugin-tiny-vue -D 然后把以下代码插入到你项目的 `Vite` 或 `Webpack` 配置文件中。 -Vite - -```ts -// vite.config.ts - -import autoImportPlugin from '@opentiny/unplugin-tiny-vue' - -export default { - plugins: [autoImportPlugin('vite')] -} -``` - -Webpack - -```js -// vue.config.js - -const autoImportPlugin = require('@opentiny/unplugin-tiny-vue') - -module.exports = defineConfig({ - configureWebpack: { - plugins: [autoImportPlugin('webpack')] - } -}) -``` - -这样你就能直接在项目中使用 TinyVue 的组件，这些组件都是自动按需导入的，无需手动导入，且不用担心项目体积变得太大。 - -你也可以只使用 TinyVueResolver，这样就可以和其他组件库一起使用。 +实现效果类似于单组件引入：`TinyVueSingleResolver('TinyModal') => import TinyModal from '@opentiny/vue-modal'` Vite -```ts -// vite.config.ts - +```js +// vite.config.js +import { defineConfig } from 'vite' import Components from 'unplugin-vue-components/vite' -import { TinyVueResolver } from '@opentiny/unplugin-tiny-vue' +import AutoImport from 'unplugin-auto-import/vite' +import { TinyVueSingleResolver } from '@opentiny/unplugin-tiny-vue' -export default { +export default defineConfig({ plugins: [ Components({ - resolvers: [TinyVueResolver] + resolvers: [TinyVueSingleResolver] + }), + AutoImport({ + resolvers: [TinyVueSingleResolver] }) ] -} +}) ``` Webpack ```js -// vue.config.js - -const Components = require('unplugin-vue-components/webpack').default -const TinyVueResolver = require('@opentiny/unplugin-tiny-vue').TinyVueResolver - -module.exports = defineConfig({ - configureWebpack: { - plugins: [ - Components({ - resolvers: [TinyVueResolver] - }) - ] - } -}) -``` - -#### 关于函数式组件 - -TinyModal，TinyNotify，TinyLoading 可使用函数形式调用，在使用时，需使用 `unplugin-auto-import` 实现自动导入。 - -Vite +// webpack.config.js +const Components = require('unplugin-vue-components/webpack') +const AutoImport = require('unplugin-auto-import/webpack') +const { TinyVueSingleResolver } = require('@opentiny/unplugin-tiny-vue') -```js -// vite.config.js -import Components from 'unplugin-vue-components/vite' -import AutoImport from 'unplugin-auto-import/vite' -import { TinyVueResolver } from '@opentiny/unplugin-tiny-vue' - -module.exports = defineConfig({ - configureWebpack: { - plugins: [ - Components({ - resolvers: [TinyVueResolver] - }), - AutoImport({ - resolvers: [TinyVueResolver] - }) - ] - } -}) +module.exports = { + plugins: [ + Components({ + resolvers: [TinyVueSingleResolver] + }), + AutoImport({ + resolvers: [TinyVueSingleResolver] + }) + ] +} ``` -Webpack +#### 温馨提示 -```js -// webpack.config.js -const Components = require('unplugin-vue-components/webpack').default -const AutoImport = require('unplugin-auto-import/webpack').default -const TinyVueResolver = require('@opentiny/unplugin-tiny-vue').TinyVueResolver - -module.exports = defineConfig({ - configureWebpack: { - plugins: [ - Components({ - resolvers: [TinyVueResolver] - }), - AutoImport({ - resolvers: [TinyVueResolver] - }) - ] +因为 `pnpm` 工程的特点之一是：项目中显示引入的依赖需要提前在 `package.json` 中声明（防止幽灵依赖），所以在 `pnpm` 工程使用该插件时需要在 `package.json` 中声明项目用到的每一个 `TinyVue` 组件依赖（`TinyVue` 每个组件都是一个 `npm` 包）。依赖声明可以参考以下配置： + +```json +{ + "dependencies": { + "@opentiny/vue-button": "~3.x.x", + "@opentiny/vue-alert": "~3.x.x", + "@opentiny/vue-input": "~3.x.x", + ... } -}) +} ``` -想了解更多自动按需导入的信息，请参考：[unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) 和 [unplugin-auto-import](https://github.com/antfu/unplugin-auto-import)。 +想了解更多自动按需导入的信息，请参考： +[unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) +[unplugin-auto-import](https://github.com/antfu/unplugin-auto-import) ## 多组件引入 @@ -197,25 +143,7 @@ export default { ], 'pc' // 此配置非必选，按需配置 (pc|mobile|mobile-first) ) - ], - define: { - 'process.env': { ...process.env } - } -} -``` - -### 温馨提示 - -因为 `pnpm` 工程的特点之一是：项目中显示引入的依赖需要提前在 `package.json` 中声明（防止幽灵依赖），所以在 `pnpm` 工程使用该插件时需要在 `package.json` 中声明项目用到的每一个 `TinyVue` 组件依赖（`TinyVue` 每个组件都是一个 `npm` 包）。依赖声明可以参考以下配置： - -```json -{ - "dependencies": { - "@opentiny/vue-button": "~3.x.x", - "@opentiny/vue-alert": "~3.x.x", - "@opentiny/vue-input": "~3.x.x", - ... - } + ] } ``` diff --git a/examples/sites/demos/pc/webdoc/installation-en.md b/examples/sites/demos/pc/webdoc/installation-en.md index 7f7bc3e129..4e12c68ed6 100644 --- a/examples/sites/demos/pc/webdoc/installation-en.md +++ b/examples/sites/demos/pc/webdoc/installation-en.md @@ -42,7 +42,7 @@ import vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [vue()], define: { - 'process.env': { ...process.env } + 'process.env': { TINY_MODE: 'pc' } } }) ``` diff --git a/examples/sites/demos/pc/webdoc/installation.md b/examples/sites/demos/pc/webdoc/installation.md index 7d1e17761d..3aa560eaee 100644 --- a/examples/sites/demos/pc/webdoc/installation.md +++ b/examples/sites/demos/pc/webdoc/installation.md @@ -42,7 +42,7 @@ import vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [vue()], define: { - 'process.env': { ...process.env } + 'process.env': { TINY_MODE: 'pc' } } }) ``` @@ -50,7 +50,7 @@ export default defineConfig({

为了避免 @opentiny/vue 的月度版本 (minor) 升级带来的不确定因素，因此推荐在您的工程中的 package.json 中依赖包的版本号前使用 ~， 比如 "@opentiny/vue": "~3.12.0。

-

@opentiny/vue 支持多种模式。如果您的工程非移动端工程，可以在上面配置代码中的process.env中，声明TINY_MODE的值，以使工程在构建时，能将移动端模式的代码摇掉，优化打包产物的体积。比如 'process.env': { ...process.env,TINY_MODE:'pc' }。

+

@opentiny/vue 支持多种模式。如果您的工程非移动端工程，可以在上面配置代码中的process.env中，声明TINY_MODE的值，以使工程在构建时，能将移动端模式的代码摇掉，优化打包产物的体积。比如 'process.env': { TINY_MODE:'pc' }。

## 通过 CDN 方式引入 (v3.16.0 及之前的版本可用) @@ -83,7 +83,6 @@ export default defineConfig({ | Runtime 名称 | 使用说明 | | ------------------------- | -------------------------- | | tiny-vue-pc.mjs | 包含所有 pc 模板的组件集合 | -| tiny-vue-mobile.mjs | 包含所有移动模板的组件集合 | | tiny-vue-mobile-first.mjs | 包含所有多端模板的组件集合 | | tiny-vue-simple.mjs | 包含常用组件的集合 | diff --git a/internals/cli/src/commands/build/build-entry-app.ts b/internals/cli/src/commands/build/build-entry-app.ts index 19fe35f44e..b40a13104d 100644 --- a/internals/cli/src/commands/build/build-entry-app.ts +++ b/internals/cli/src/commands/build/build-entry-app.ts @@ -54,8 +54,8 @@ export const install = (app, opts = {}) => { * mobile 包含素有mobile组件 * mobile-first 包含所有多端组件 */ -type RunTimeModeType = 'all' | 'pc' | 'mobile' | 'mobile-first' | 'simple' -const runtimeModeList: Array = ['all', 'pc', 'mobile', 'mobile-first', 'simple'] +type RunTimeModeType = 'all' | 'pc' | 'mobile-first' | 'simple' +const runtimeModeList: Array = ['all', 'pc', 'mobile-first', 'simple'] // 简易模式下需要排除的组件列表，包括chart、业务组件、冷门组件等 const notSimpleComponents = [ diff --git a/packages/vue-runtime/README.md b/packages/vue-runtime/README.md index 708aa713d1..028b19a7c4 100644 --- a/packages/vue-runtime/README.md +++ b/packages/vue-runtime/README.md @@ -9,7 +9,6 @@ In order to meet different business needs, `TinyVue` provides multiple forms of | Runtime name | Instructions | | ------------------------- | ----------------------------------------------------------------- | | tiny-vue-pc.mjs | A collection of components including all pc templates | -| tiny-vue-mobile.mjs | A collection of components including all mobile templates | | tiny-vue-mobile-first.mjs | A collection of components including all multi-terminal templates | | tiny-vue-simple.mjs | A collection of commonly used components | diff --git a/packages/vue-runtime/README.zh-CN.md b/packages/vue-runtime/README.zh-CN.md index 38079a8f26..dc404a7b45 100644 --- a/packages/vue-runtime/README.zh-CN.md +++ b/packages/vue-runtime/README.zh-CN.md @@ -9,7 +9,6 @@ | Runtime 名称 | 使用说明 | | ------------------------- | -------------------------- | | tiny-vue-pc.mjs | 包含所有pc模板的组件集合 | -| tiny-vue-mobile.mjs | 包含所有移动模板的组件集合 | | tiny-vue-mobile-first.mjs | 包含所有多端模板的组件集合 | | tiny-vue-simple.mjs | 包含常用组件的集合 |