mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
docs: update demo project intro (#4238)
This commit is contained in:
neverland
GitHub
parent
f9a1de022e
commit
f172842c02
@ -19,16 +19,6 @@ vue ui
|
||||
|
||||
在图形化界面中，点击`依赖` -> `安装依赖`，然后将 `vant` 添加到依赖中即可。
|
||||
|
||||
### 示例工程
|
||||
|
||||
我们提供了一个基于 Vue Cli 3 的示例工程，仓库地址为 [Vant Demo](https://github.com/youzan/vant-demo)，示例工程会帮助你了解如下内容：
|
||||
|
||||
- 基于 vant 搭建单页面应用，配置按需引入
|
||||
- 配置 rem 适配方案
|
||||
- 配置 viewport 适配方案
|
||||
- 配置 TypeScript 工程
|
||||
- 配置自定义主题色方案
|
||||
|
||||
### 安装
|
||||
|
||||
```bash
|
||||
|
||||
@ -1,24 +1,36 @@
|
||||
<template>
|
||||
<section class="van-doc-demo-pages">
|
||||
<h1>{{ $t('title') }}</h1>
|
||||
<h1>示例工程</h1>
|
||||
|
||||
<div class="card">
|
||||
<p>{{ $t('description') }}</p>
|
||||
<h3>介绍</h3>
|
||||
<p>
|
||||
我们提供了一个基于 Vue Cli 3 的示例工程，仓库地址为
|
||||
<a
|
||||
href="https://github.com/youzan/vant-demo"
|
||||
target="_blank"
|
||||
>Vant Demo</a>，示例工程会帮助你了解如下内容：
|
||||
</p>
|
||||
<ul>
|
||||
<li>基于 Vant 搭建单页面应用，配置按需引入组件</li>
|
||||
<li>配置基于 rem 的适配方案</li>
|
||||
<li>配置基于 viewport 的适配方案</li>
|
||||
<li>配置基于 TypeScript 的工程</li>
|
||||
<li>配置自定义主题色方案</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h3>示例页面</h3>
|
||||
<p>下面是一些使用 Vant 搭建的示例页面，点击图片切换至对应示例。</p>
|
||||
<div class="van-doc-demo-pages__gallery">
|
||||
<div
|
||||
:class="['van-doc-demo-pages__item', { 'van-doc-demo-pages__item--active': index === currentDemo }]"
|
||||
v-for="(demo, index) in demos"
|
||||
>
|
||||
<h4>{{ demo.title }}</h4>
|
||||
<a
|
||||
:href="demo.source"
|
||||
target="_blank"
|
||||
>
|
||||
{{ $t('source') }}
|
||||
</a>
|
||||
<img
|
||||
:src="demo.preview"
|
||||
@click="onChangeDemo(demo, index)"
|
||||
>
|
||||
<a :href="demo.source" target="_blank">源代码</a>
|
||||
<img :src="demo.preview" @click="onChangeDemo(demo, index)">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -26,31 +38,6 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Locale } from '../../../src';
|
||||
|
||||
Locale.add({
|
||||
'zh-CN': {
|
||||
vanDocDemoPages: {
|
||||
title: '示例',
|
||||
source: '源代码',
|
||||
description: '下面是一些使用 Vant 搭建的示例页面，点击图片切换至对应示例。',
|
||||
goodsDetail: '商品详情',
|
||||
userCenter: '会员中心',
|
||||
shoppingCart: '购物车'
|
||||
}
|
||||
},
|
||||
'en-US': {
|
||||
vanDocDemoPages: {
|
||||
title: 'Demo Pages',
|
||||
source: 'Source code',
|
||||
description: 'Here are some of the demo pages built using Vant, click on the picture to switch to the corresponding demo.',
|
||||
goodsDetail: 'Goods Detail',
|
||||
userCenter: 'User Center',
|
||||
shoppingCart: 'Shopping Cart'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
export default {
|
||||
name: 'van-doc-demo-pages',
|
||||
|
||||
@ -62,22 +49,32 @@ export default {
|
||||
|
||||
computed: {
|
||||
demos() {
|
||||
return [{
|
||||
title: this.$t('goodsDetail'),
|
||||
preview: 'https://img.yzcdn.cn/public_files/2017/10/24/7070a8d1d6504b864c605114d32f2aae.png',
|
||||
url: '/vant-demo/#/goods',
|
||||
source: 'https://github.com/youzan/vant-demo/blob/master/base/src/view/goods/index.vue'
|
||||
}, {
|
||||
title: this.$t('userCenter'),
|
||||
preview: 'https://img.yzcdn.cn/public_files/2017/10/23/e1d70757e3ab88d39a360b704be8f43f.png',
|
||||
url: '/vant-demo/#/user',
|
||||
source: 'https://github.com/youzan/vant-demo/blob/master/base/src/view/user/index.vue'
|
||||
}, {
|
||||
title: this.$t('shoppingCart'),
|
||||
preview: 'https://img.yzcdn.cn/public_files/2017/10/24/06b8b5ed3692314d434db7f6854dcdbe.png',
|
||||
url: '/vant-demo/#/cart',
|
||||
source: 'https://github.com/youzan/vant-demo/blob/master/base/src/view/cart/index.vue'
|
||||
}];
|
||||
return [
|
||||
{
|
||||
title: '商品详情',
|
||||
preview:
|
||||
'https://img.yzcdn.cn/public_files/2017/10/24/7070a8d1d6504b864c605114d32f2aae.png',
|
||||
url: '/vant-demo/#/goods',
|
||||
source:
|
||||
'https://github.com/youzan/vant-demo/blob/master/base/src/view/goods/index.vue'
|
||||
},
|
||||
{
|
||||
title: '用户中心',
|
||||
preview:
|
||||
'https://img.yzcdn.cn/public_files/2017/10/23/e1d70757e3ab88d39a360b704be8f43f.png',
|
||||
url: '/vant-demo/#/user',
|
||||
source:
|
||||
'https://github.com/youzan/vant-demo/blob/master/base/src/view/user/index.vue'
|
||||
},
|
||||
{
|
||||
title: '购物车',
|
||||
preview:
|
||||
'https://img.yzcdn.cn/public_files/2017/10/24/06b8b5ed3692314d434db7f6854dcdbe.png',
|
||||
url: '/vant-demo/#/cart',
|
||||
source:
|
||||
'https://github.com/youzan/vant-demo/blob/master/base/src/view/cart/index.vue'
|
||||
}
|
||||
];
|
||||
}
|
||||
},
|
||||
|
||||
@ -106,8 +103,8 @@ export default {
|
||||
margin-bottom: 40px;
|
||||
text-align: center;
|
||||
|
||||
&:nth-child(3n+1),
|
||||
&:nth-child(3n+2) {
|
||||
&:nth-child(3n + 1),
|
||||
&:nth-child(3n + 2) {
|
||||
margin-right: 4%;
|
||||
}
|
||||
|
||||
@ -133,7 +130,7 @@ export default {
|
||||
|
||||
&--active {
|
||||
img {
|
||||
box-shadow: 0 1px 4px rgba(51, 136, 255, .4), 0 0 0 1px rgba(51, 136, 255, .4);
|
||||
box-shadow: 0 1px 4px rgba(51, 136, 255, 0.4), 0 0 0 1px rgba(51, 136, 255, 0.4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -77,7 +77,7 @@ export default {
|
||||
},
|
||||
{
|
||||
path: '/demo',
|
||||
title: '示例页面'
|
||||
title: '示例工程'
|
||||
},
|
||||
{
|
||||
path: '/locale',
|
||||
@ -423,10 +423,6 @@ export default {
|
||||
path: '/theme',
|
||||
title: 'Custom Theme'
|
||||
},
|
||||
{
|
||||
path: '/demo',
|
||||
title: 'Demo pages'
|
||||
},
|
||||
{
|
||||
path: '/locale',
|
||||
title: 'Internationalization'
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user