mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
docs: remove vant-demo pages (#5084)
This commit is contained in:
parent
1702fb4966
commit
1e836bf461
@ -29,6 +29,17 @@ npm i vant -S
|
|||||||
yarn add vant
|
yarn add vant
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### 示例工程
|
||||||
|
|
||||||
|
我们提供了一个基于 Vue Cli 的[示例工程](https://github.com/youzan/vant-demo),示例工程会帮助你了解如下内容:
|
||||||
|
|
||||||
|
- 基于 Vant 搭建单页面应用,配置按需引入组件
|
||||||
|
- 配置基于 Rem 的适配方案
|
||||||
|
- 配置基于 Viewport 的适配方案
|
||||||
|
- 配置基于 TypeScript 的工程
|
||||||
|
- 配置自定义主题色方案
|
||||||
|
|
||||||
|
|
||||||
## 引入组件
|
## 引入组件
|
||||||
|
|
||||||
### 方式一. 自动按需引入组件 (推荐)
|
### 方式一. 自动按需引入组件 (推荐)
|
||||||
|
@ -1,136 +0,0 @@
|
|||||||
<template>
|
|
||||||
<section class="van-doc-demo-pages">
|
|
||||||
<h1>示例工程</h1>
|
|
||||||
|
|
||||||
<div class="card">
|
|
||||||
<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">源代码</a>
|
|
||||||
<img :src="demo.preview" @click="onChangeDemo(demo, index)">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'van-doc-demo-pages',
|
|
||||||
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
currentDemo: 0
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
computed: {
|
|
||||||
demos() {
|
|
||||||
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'
|
|
||||||
}
|
|
||||||
];
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
beforeMount() {
|
|
||||||
this.$emit('changeDemoURL', this.demos[0].url);
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
onChangeDemo(demo, index) {
|
|
||||||
this.currentDemo = index;
|
|
||||||
this.$emit('changeDemoURL', demo.url);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less">
|
|
||||||
.van-doc-demo-pages {
|
|
||||||
&__gallery {
|
|
||||||
margin-top: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__item {
|
|
||||||
display: inline-block;
|
|
||||||
width: 28%;
|
|
||||||
margin-bottom: 40px;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
&:nth-child(3n + 1),
|
|
||||||
&:nth-child(3n + 2) {
|
|
||||||
margin-right: 4%;
|
|
||||||
}
|
|
||||||
|
|
||||||
h4 {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: 100%;
|
|
||||||
background-color: #f8f8f8;
|
|
||||||
border-radius: 3px;
|
|
||||||
box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
display: inline-block;
|
|
||||||
margin: 4px 0 7px;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--active {
|
|
||||||
img {
|
|
||||||
box-shadow: 0 1px 4px rgba(51, 136, 255, 0.4), 0 0 0 1px rgba(51, 136, 255, 0.4);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
@ -75,10 +75,6 @@ export default {
|
|||||||
path: '/style-guide',
|
path: '/style-guide',
|
||||||
title: '风格指南'
|
title: '风格指南'
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: '/demo',
|
|
||||||
title: '示例工程'
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
path: '/locale',
|
path: '/locale',
|
||||||
title: '国际化'
|
title: '国际化'
|
||||||
|
@ -1,7 +1,6 @@
|
|||||||
import Vue from 'vue';
|
import Vue from 'vue';
|
||||||
import docConfig from './doc.config';
|
import docConfig from './doc.config';
|
||||||
import DemoList from './components/DemoList';
|
import DemoList from './components/DemoList';
|
||||||
import DemoPages from './components/DemoPages';
|
|
||||||
import { demoWrapper } from './mobile/demo-common';
|
import { demoWrapper } from './mobile/demo-common';
|
||||||
import { initIframeRouter } from './utils/iframe-router';
|
import { initIframeRouter } from './utils/iframe-router';
|
||||||
|
|
||||||
@ -35,9 +34,7 @@ const registerRoute = ({ mobile, componentMap }) => {
|
|||||||
path = path.replace('/', '');
|
path = path.replace('/', '');
|
||||||
|
|
||||||
let component;
|
let component;
|
||||||
if (path === 'demo') {
|
if (mobile) {
|
||||||
component = DemoPages;
|
|
||||||
} else if (mobile) {
|
|
||||||
const module = componentMap[`./${path}/demo/index.vue`];
|
const module = componentMap[`./${path}/demo/index.vue`];
|
||||||
|
|
||||||
if (module) {
|
if (module) {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user