diff --git a/docs/guide/quick-start.md b/docs/guide/quick-start.md index 5bee0d3a..df042a94 100644 --- a/docs/guide/quick-start.md +++ b/docs/guide/quick-start.md @@ -18,11 +18,19 @@ order: 1 ## 安装/引入 +### CDN + ```html ``` -React 用户: +### NPM 安装 + +```bash +npm i @banana-ui/banana +``` + +### React 用户 ```bash npm i @banana-ui/react @@ -32,11 +40,88 @@ npm i @banana-ui/react ## 使用 +### 原生 HTML,或除 React 以外的前端框架 + +使用 CDN 安装/引入的用户,已经可以直接使用组件了 + ```html Hello Banana ``` -React 用户: +使用 NPM 安装的用户,需要引入组件后使用,这里以在 Vue 环境下使用举例: + +```vue + + + +``` + +:::warning{title="Vue 的按需引入"} +默认情况下,Vue 会将任何非原生的 HTML 标签优先当作 Vue 组件处理,而将“渲染一个自定义元素”作为后备选项。 +上面这句话出自 Vue 的官方文档,简单来说,如果你想在 Vue 中按需引入 Banana,你需要一些配置。 + +#### 浏览器内编译时的示例配置 ​ + +```js +// 仅在浏览器内编译时才会工作 +// 如果使用了构建工具,请看下面的配置示例 +app.config.compilerOptions.isCustomElement = (tag) => tag.includes('b-'); +``` + +#### Vite 示例配置 ​ + +```js +// vite.config.js +import vue from '@vitejs/plugin-vue'; + +export default { + plugins: [ + vue({ + template: { + compilerOptions: { + // 将'b-'开头的标签视为自定义元素 + isCustomElement: (tag) => tag.includes('b-'), + }, + }, + }), + ], +}; +``` + +#### Vue CLI 示例配置 ​ + +```js +// vue.config.js +module.exports = { + chainWebpack: (config) => { + config.module + .rule('vue') + .use('vue-loader') + .tap((options) => ({ + ...options, + compilerOptions: { + // 将'b-'开头的标签视为自定义元素 + isCustomElement: (tag) => tag.startsWith('b-'), + }, + })); + }, +}; +``` + +参考:https://cn.vuejs.org/guide/extras/web-components.html#using-custom-elements-in-vue + +::: + +### React 用户: ```jsx | pure import { Button } from '@banana-ui/react';