Merge branch 'dev' into next

This commit is contained in:
chenjiahan
2022-02-08 14:56:38 +08:00
32 changed files with 570 additions and 406 deletions

View File

@@ -68,5 +68,4 @@ pnpm add @vant/cli -D
- [命令](https://github.com/youzan/vant/tree/dev/packages/vant-cli/docs/commands.md)
- [配置指南](https://github.com/youzan/vant/tree/dev/packages/vant-cli/docs/config.md)
- [目录结构](https://github.com/youzan/vant/tree/dev/packages/vant-cli/docs/directory.md)
- [桌面端组件](https://github.com/youzan/vant/tree/dev/packages/vant-cli/docs/desktop.md)
- [更新日志](https://github.com/youzan/vant/tree/dev/packages/vant-cli/changelog.md)

View File

@@ -1,72 +1,57 @@
# 更新日志
## v4.0.0-rc.6
## v4.0.0
- 修复通过 pnpm 安装使用时报错的问题
## v4.0.0-rc.4
- 新增 CommonJS 格式的构建产物,分别为 `lib/[name].cjs.js``lib/[name].cjs.min.js`
- 现在 ESModule 和 CommonJS 格式的产物会自动对外部依赖进行 external 处理
- 修复 Windows 路径兼容问题
## v4.0.0-rc.3
`2022-02-07`
### 不兼容更新
- 支持的 node 版本范围提升到 `^14.16.0 || >=16.0.0`
- 使用 vite 代替 webpack 进行构建,移除了所有 webpack 相关依赖
- 使用 esbuild 进行代码转义和压缩
- babel preset 添加了 `cjs` 后缀,现在需要通过 `@vant/cli/preset.cjs` 引入
- vant.config.js 重命名为 `vant.config.mjs`,由 commonJs 变更为 ESModule 格式
### Features
- 新增 build.configureWebpack 配置项
### 依赖升级
对以下依赖进行了大版本升级:
- eslint v8
## v4.0.0-beta.6
### 不兼容更新
- 使用 vite 代替 webpack 进行构建,移除了所有 webpack 相关依赖
- 站点构建产物的目录由 `site` 调整为 `site-dist`
- 不再支持 webpack.config.js 配置文件
- 不再支持 less import 语法中使用波浪号
- 不再在 demo 文件中自动注册组件
- 暂时不支持预览桌面端组件
- 移除 build 命令的 --watch 参数
- 移除内置的 babel-plugin-import 插件
- 由于不再使用 html-webpack-plugin, 因此移除了 site.htmlPluginOptions 配置项
- 为了避免幽灵依赖,不再默认依赖 `@vue/test-utils`,使用时需要手动安装
- 为了减少依赖数量,移除了默认安装的 sass 依赖,使用 sass 时需要手动安装:
```bash
yarn add sass
```
- 为了避免 Phantom dependency不再默认依赖 `@vue/test-utils`,使用时需要手动安装
### Features
- 新增 site.htmlMeta 配置项
- 新增 ESModule 格式的构建产物,分别为 `lib/[name].es.js``lib/[name].es.min.js`
### 依赖升级
对以下依赖进行了大版本升级:
- eslint v8
- jest v27
- husky v7
- ts-jest v27
- postcss v8
- clean-css v5
- commander v8
- babel-jest v27
- lint-staged v11
- autoprefixer v10
### Features
- 新增 site.htmlMeta 配置项
- 新增 build.configureWebpack 配置项
- 新增 ESModule 格式的构建产物,分别为 `lib/[name].es.js``lib/[name].es.min.js`
- 新增 CommonJS 格式的构建产物,分别为 `lib/[name].cjs.js``lib/[name].cjs.min.js`
- 现在 ESModule 和 CommonJS 格式的产物会自动对外部依赖进行 external 处理
### BugFixes
- 修复 Windows 路径兼容问题
- 修复通过 pnpm 安装使用时报错的问题
## v3.11.2
`2021-07-15`

View File

@@ -25,7 +25,7 @@ npx vant-cli dev
运行本地开发环境。
运行 dev 命令时Vant Cli 会通过 [webpack-dev-server](https://github.com/webpack/webpack-dev-server) 启动一个本地服务器,用于在开发过程中对文档和示例进行预览。
运行 dev 命令时Vant Cli 会通过启动一个本地服务器,用于在开发过程中对文档和示例进行预览。
### build

View File

@@ -1,84 +0,0 @@
## 关于桌面端组件
Vant Cli 也支持预览桌面端组件,你可以在组件的 `demo` 目录下新建一个 `.vue` 文件,并在组件的 `README` 中按如下格式声明要预览的组件:
```html
<demo-code>./demo/MyDemo.vue</demo-code>
```
`demo-code` 标签中间的文本为 `README``demo` 文件的相对路径。
```
button
├─ demo # 组件示例
│ └─ MyDemo.vue # 要预览的 demo 文件
├─ index.js # 组件入口
├─ index.less # 组件样式
└─ README.md # 组件文档
```
![image](https://user-images.githubusercontent.com/5093611/111076378-0e981a00-8527-11eb-8e3f-31f0be7e4021.png)
`demo-code` 标签支持以下属性:
| 名称 | 类型 | 描述 |
| --------- | ------- | --------------------------------------- |
| compact | boolean | 紧凑模式 |
| transform | boolean | 防止预览区内 fixed 定位的元素飞出预览区 |
| inline | boolean | 只显示组件本身,不显示预览区边框和代码 |
### `compact`
```html
<demo-code compact>./demo/MyDemo.vue</demo-code>
```
![image](https://user-images.githubusercontent.com/5093611/111076728-77cc5d00-8528-11eb-85f1-e7217344ab14.png)
### `transform`
```html
<demo-code transform>./demo/MyDemo.vue</demo-code>
```
![image](https://user-images.githubusercontent.com/5093611/111076799-d5f94000-8528-11eb-973f-c9d69f91d2a7.png)
### `inline`
```html
<demo-code inline>./demo/MyDemo.vue</demo-code>
```
![image](https://user-images.githubusercontent.com/5093611/111076845-15c02780-8529-11eb-9cfb-76c9b25dc2a2.png)
### 去除手机模拟器
对于 PC 端的组件,如果不需要右侧的手机模拟器,可以在 `vant.config.js` 文件中设置 `site.hideSimulator``true`,这样在所有页面都会隐藏手机模拟器,也可以只针对具体页面设置。
```js
module.exports = {
site: {
defaultLang: 'zh-CN',
hideSimulator: true, // 所有页面都不显示
locales: {
'zh-CN': {
title: 'Vant',
description: '轻量、可靠的移动端 Vue 组件库',
hideSimulator: true, // 中文下所有页面都不显示
nav: [
{
title: '基础组件',
items: [
{
path: 'button',
title: 'Button 按钮',
hideSimulator: true, // 只针对某个页面不显示
},
],
},
],
},
},
},
};
```

View File

@@ -1,6 +1,6 @@
{
"name": "@vant/cli",
"version": "4.0.0-rc.6",
"version": "4.0.0",
"type": "module",
"main": "lib/index.js",
"typings": "lib/index.d.ts",

View File

@@ -8,4 +8,31 @@ export function decamelize(str, sep = '-') {
.toLowerCase();
}
// from https://30secondsofcode.org
export function copyToClipboard(str) {
const el = document.createElement('textarea');
el.value = str;
el.setAttribute('readonly', '');
el.style.position = 'absolute';
el.style.left = '-9999px';
document.body.appendChild(el);
const selection = document.getSelection();
if (!selection) {
return;
}
const selected = selection.rangeCount > 0 ? selection.getRangeAt(0) : false;
el.select();
document.execCommand('copy');
document.body.removeChild(el);
if (selected) {
selection.removeAllRanges();
selection.addRange(selected);
}
}
export { isMobile };

View File

@@ -8,6 +8,8 @@
</template>
<script>
import { copyToClipboard } from '../../common';
export default {
name: 'VanDocContent',
@@ -21,6 +23,20 @@ export default {
},
},
watch: {
$route(to, from) {
if (from.path !== to.path) {
setTimeout(() => {
this.copyAction();
});
}
},
},
mounted() {
this.copyAction();
},
methods: {
onClick({ target }) {
if (['H2', 'H3', 'H4', 'H5'].includes(target.tagName)) {
@@ -36,6 +52,31 @@ export default {
});
}
},
copyAction() {
const codeBoxes = document.querySelectorAll('.van-doc-card pre code');
if (!codeBoxes || !codeBoxes.length) {
return;
}
for (let i = 0; i < codeBoxes.length; i++) {
const item = codeBoxes[i];
let timer = null;
item.addEventListener('click', () => {
if (timer) return;
const content = item.innerText;
copyToClipboard(content);
item.classList.add('code-copy-success');
timer = setTimeout(() => {
item.classList.remove('code-copy-success');
timer = null;
}, 1400);
});
}
},
},
};
</script>
@@ -47,6 +88,54 @@ export default {
background-color: var(--van-doc-background-2);
border-radius: var(--van-doc-border-radius);
> pre code {
position: relative;
padding-right: 30px;
pointer-events: none;
overflow: initial;
}
> pre:hover {
code::before {
position: absolute;
z-index: 9;
right: 14px;
top: 11px;
width: 20px;
height: 20px;
background-position: center;
background-size: contain;
background-image: url(data:image/png;base64,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);
cursor: pointer;
content: '';
display: block;
pointer-events: auto;
}
}
> pre .code-copy-success::after {
content: 'Copied!';
display: block;
position: absolute;
z-index: 9;
right: -4px;
top: 0;
animation: ease-out code-copy-animation 0.2s;
animation-fill-mode: forwards;
}
@keyframes code-copy-animation {
0% {
top: 0;
opacity: 0;
}
100% {
top: -20px;
opacity: 1;
}
}
> p a,
> ul a,
> table a,

View File

@@ -19,7 +19,7 @@
title="Toggle source code panel"
class="action-icon"
role="source"
@click="toogleSource"
@click="toggleSource"
/>
</div>
<div
@@ -33,32 +33,7 @@
</template>
<script>
// from https://30secondsofcode.org
function copyToClipboard(str) {
const el = document.createElement('textarea');
el.value = str;
el.setAttribute('readonly', '');
el.style.position = 'absolute';
el.style.left = '-9999px';
document.body.appendChild(el);
const selection = document.getSelection();
if (!selection) {
return;
}
const selected = selection.rangeCount > 0 ? selection.getRangeAt(0) : false;
el.select();
document.execCommand('copy');
document.body.removeChild(el);
if (selected) {
selection.removeAllRanges();
selection.addRange(selected);
}
}
import { copyToClipboard } from '../../common';
export default {
name: 'DemoPlayground',
@@ -77,7 +52,7 @@ export default {
},
methods: {
unescape,
toogleSource() {
toggleSource() {
this.showSource = !this.showSource;
},
copySourceCode() {