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 { 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 { mergeCustomViteConfig } from '../common/index.js';
|
||||||
import { getViteConfigForPackage } from '../config/vite.package.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() {
|
export async function compileBundles() {
|
||||||
const dependencies = getPackageJson().dependencies || {};
|
const dependencies = getPackageJson().dependencies || {};
|
||||||
const externals = Object.keys(dependencies);
|
const externals = Object.keys(dependencies);
|
||||||
@ -64,5 +39,4 @@ export async function compileBundles() {
|
|||||||
await Promise.all(
|
await Promise.all(
|
||||||
configs.map((config) => build(mergeCustomViteConfig(config)))
|
configs.map((config) => build(mergeCustomViteConfig(config)))
|
||||||
);
|
);
|
||||||
await genEntryForSSR();
|
|
||||||
}
|
}
|
||||||
|
@ -3,7 +3,7 @@ import { inBrowser } from '../utils';
|
|||||||
|
|
||||||
type ScrollElement = HTMLElement | Window;
|
type ScrollElement = HTMLElement | Window;
|
||||||
|
|
||||||
const overflowScrollReg = /scroll|auto/i;
|
const overflowScrollReg = /scroll|auto|overlay/i;
|
||||||
const defaultRoot = inBrowser ? window : undefined;
|
const defaultRoot = inBrowser ? window : undefined;
|
||||||
|
|
||||||
function isElement(node: Element) {
|
function isElement(node: Element) {
|
||||||
|
@ -172,6 +172,28 @@ const app = createApp();
|
|||||||
app.use(Button);
|
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.
|
> 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)
|
### Import all components (not recommended)
|
||||||
|
@ -173,7 +173,29 @@ const app = createApp();
|
|||||||
app.use(Button);
|
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