mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-05-20 21:39:15 +08:00
Merge branch 'dev' into next
This commit is contained in:
commit
2b77f96fc5
@ -1,33 +1,8 @@
|
||||
import fse from 'fs-extra';
|
||||
import { join } from 'path';
|
||||
import { build } from 'vite';
|
||||
import { getPackageJson, getVantConfig, LIB_DIR } from '../common/constant.js';
|
||||
import { getPackageJson } from '../common/constant.js';
|
||||
import { mergeCustomViteConfig } from '../common/index.js';
|
||||
import { getViteConfigForPackage } from '../config/vite.package.js';
|
||||
|
||||
// generate entry file for nuxt
|
||||
async function genEntryForSSR() {
|
||||
const { name } = getVantConfig();
|
||||
const cjsPath = join(LIB_DIR, 'ssr.js');
|
||||
const mjsPath = join(LIB_DIR, 'ssr.mjs');
|
||||
|
||||
const cjsContent = `'use strict';
|
||||
|
||||
if (process.env.NODE_ENV === 'production') {
|
||||
module.exports = require('./${name}.cjs.min.js');
|
||||
} else {
|
||||
module.exports = require('./${name}.cjs.js');
|
||||
};
|
||||
`;
|
||||
|
||||
const mjsContent = `export * from './index.js';\n`;
|
||||
|
||||
return Promise.all([
|
||||
fse.outputFile(cjsPath, cjsContent),
|
||||
fse.outputFile(mjsPath, mjsContent),
|
||||
]);
|
||||
}
|
||||
|
||||
export async function compileBundles() {
|
||||
const dependencies = getPackageJson().dependencies || {};
|
||||
const externals = Object.keys(dependencies);
|
||||
@ -64,5 +39,4 @@ export async function compileBundles() {
|
||||
await Promise.all(
|
||||
configs.map((config) => build(mergeCustomViteConfig(config)))
|
||||
);
|
||||
await genEntryForSSR();
|
||||
}
|
||||
|
@ -3,7 +3,7 @@ import { inBrowser } from '../utils';
|
||||
|
||||
type ScrollElement = HTMLElement | Window;
|
||||
|
||||
const overflowScrollReg = /scroll|auto/i;
|
||||
const overflowScrollReg = /scroll|auto|overlay/i;
|
||||
const defaultRoot = inBrowser ? window : undefined;
|
||||
|
||||
function isElement(node: Element) {
|
||||
|
@ -172,6 +172,28 @@ const app = createApp();
|
||||
app.use(Button);
|
||||
```
|
||||
|
||||
#### 4. Style of Function Components
|
||||
|
||||
Some components of Vant are provided as function, including `Toast`, `Dialog`, `Notify` and `ImagePreview`. When using function components, `unplugin-vue-components` can not auto import the component style, so we need to import style manually.
|
||||
|
||||
```js
|
||||
// Toast
|
||||
import { Toast } from 'vant';
|
||||
import 'vant/es/toast/style';
|
||||
|
||||
// Dialog
|
||||
import { Dialog } from 'vant';
|
||||
import 'vant/es/dialog/style';
|
||||
|
||||
// Notify
|
||||
import { Notify } from 'vant';
|
||||
import 'vant/es/notify/style';
|
||||
|
||||
// ImagePreview
|
||||
import { ImagePreview } from 'vant';
|
||||
import 'vant/es/image-preview/style';
|
||||
```
|
||||
|
||||
> Vant supports tree shaking by default, so you don't necessarily need the webpack plugin, if you can't accept the full import of css.
|
||||
|
||||
### Import all components (not recommended)
|
||||
|
@ -173,7 +173,29 @@ const app = createApp();
|
||||
app.use(Button);
|
||||
```
|
||||
|
||||
> 注意:Vant 默认支持通过 Tree Shaking,因此你也可以不配置任何插件,直接通过 Tree Shaking 来移除不需要的 JS 代码,但 CSS 无法通过这种方式优化。
|
||||
#### 4. 引入函数组件的样式
|
||||
|
||||
Vant 中有个别组件是以函数的形式提供的,包括 `Toast`,`Dialog`,`Notify` 和 `ImagePreview` 组件。在使用函数组件时,`unplugin-vue-components` 无法自动引入对应的样式,因此需要手动引入样式。
|
||||
|
||||
```js
|
||||
// Toast
|
||||
import { Toast } from 'vant';
|
||||
import 'vant/es/toast/style';
|
||||
|
||||
// Dialog
|
||||
import { Dialog } from 'vant';
|
||||
import 'vant/es/dialog/style';
|
||||
|
||||
// Notify
|
||||
import { Notify } from 'vant';
|
||||
import 'vant/es/notify/style';
|
||||
|
||||
// ImagePreview
|
||||
import { ImagePreview } from 'vant';
|
||||
import 'vant/es/image-preview/style';
|
||||
```
|
||||
|
||||
> 注意:Vant 支持 Tree Shaking,因此你也可以不配置任何插件,通过 Tree Shaking 即可移除不需要的 JS 代码,但 CSS 无法通过这种方式优化。
|
||||
|
||||
### 导入所有组件(不推荐)
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user