<template>
    <docs-layout title="快速上手">
        <h2>关于Vue-ydui</h2>
        <h3>Vue-ydui 是 <a href="//www.ydui.org" target="_blank">YDUI Touch</a> 的一个Vue2.x实现版本，专为移动端打造，在追求完美视觉体验的同时也保证了其性能高效。</h3>
        <h4>通过“扫描二维码”或 <a target="_blank" href="//vue.ydui.org/demo">点击这里</a> 了解 vue-ydui 能做什么？</h4>
        <img style="width: 130px;height: 130px;margin-left: 26px;border: 1px solid #eae9e9;margin-top: 10px;" src="http://static.ydcss.com/ydui/img/qrcode.jpg?t=3.1415926">
        <h2>特性</h2>
        <p class="prams-box">提供使用 <span>rem</span> 和 <span>px</span> 样式单位的两个版本；</p>
        <p class="prams-box">高质量、功能丰富；</p>
        <p class="prams-box">友好的 API ，自由灵活地使用空间；</p>
        <p class="prams-box">细致、漂亮的 UI；</p>
        <p class="prams-box">使用单文件的 Vue 组件化开发模式；</p>
        <p class="prams-box">基于 npm + webpack + babel 开发，支持 ES2015；</p>
        <p class="prams-box">真正意义上的按需加载组件，可以只加载声明过的组件及其样式文件，无需再纠结文件体积过大。</p>

        <h2>使用之前</h2>
        <h3>高效的开发，离不开基础工程的搭建。在开始使用 vue-ydui 之前，有必要先了解 Vue 的相关基础知识以及<a target="_blank" href="http://cn.vuejs.org/v2/guide/components.html">Vue 组件</a>，并了解移动端相关特性；</h3>
        <h3>以下概念贯穿 vue-ydui 前后，建议开发者花点时间来了解。</h3>
        <p class="prams-box"><span>props</span>传递数据；</p>
        <p class="prams-box"><span>slot</span>内容分发；</p>
        <p class="prams-box"><span>$emit</span>事件；</p>
        <p class="prams-box"><span>@click.native</span>绑定原生事件，在Vue2.x中，为自定义组件绑定原生事件必须使用 .native 修饰符；</p>
        <h3 style="padding-top: 5px;">另外 vue-ydui 有 <span>使用px</span> 和 <span>使用rem</span> 样式单位的两个版本，使用 <span>rem</span> 需了解其相关知识。</h3>
        <p class="prams-box"><span>rem</span>是相对根元素&lt;html&gt;的字体大小变化而变化的css单位，通过 <span>ydui.flexible.js</span> 改变根元素的字体大小实现屏幕自适应，具体请<a style="margin-left: 0; " target="_blank" href="http://www.ydui.org/flexible">参看这里</a>。</p>

        <h2>CDN引入</h2>
        <h3>通过 <a target="_blank" href="https://unpkg.com/vue-ydui/">unpkg.com/vue-ydui</a> 可以看到 vue-ydui 最新版本的资源，在页面上引入 js 和 css 文件即可开始使用（考虑网络原因，建议下载至本地）。</h3>
        <h4 style="margin-top: 5px;">【使用rem】：</h4>
        <docs-import :tip="false" style="margin-top: 5px;">
            <pre class="pre" v-hljs><code class="html" style="padding-bottom: 0;">&lt;!-- 引入Vue2.x --&gt;<br />&lt;script src="//vuejs.org/js/vue.min.js"&gt;&lt;/script&gt;<br /><br />&lt;!-- 使用rem，需另外引入ydui.flexible.js自适应类库 --&gt;<br />&lt;link rel="stylesheet" href="//unpkg.com/vue-ydui/dist/ydui.rem.css"&gt;<br />&lt;script src="//unpkg.com/vue-ydui/dist/ydui.flexible.js"&gt;&lt;/script&gt;<br /><br />&lt;!-- 引入组件库 --&gt;<br />&lt;script src="//unpkg.com/vue-ydui/dist/ydui.js"&gt;&lt;/script&gt;</code></pre>
        </docs-import>
        <h4 style="margin-top: 10px;">【使用px】：</h4>
        <docs-import :tip="false" style="margin-top: 5px;">
            <pre class="pre" v-hljs><code class="html" style="padding-bottom: 0;">&lt;!-- 引入Vue2.x --&gt;<br />&lt;script src="//vuejs.org/js/vue.min.js"&gt;&lt;/script&gt;<br /><br />&lt;!-- 使用px --&gt;<br />&lt;link rel="stylesheet" href="//unpkg.com/vue-ydui/dist/ydui.px.css"&gt;<br /><br />&lt;!-- 引入组件库 --&gt;<br />&lt;script src="//unpkg.com/vue-ydui/dist/ydui.js"&gt;&lt;/script&gt;</code></pre>
        </docs-import>
        <h2 style="padding-left: 21px;padding-top: 18px;font-size: 17px;">示例</h2>
        <h3>通过 CDN 可以快速使用 vue-ydui 写出一个示例，您可以复制下面代码或<a href="/docs/demo.html" target="_blank">在线预览</a>。</h3>
        <docs-import :tip="false" style="margin-top: 5px;">
            <pre class="pre" v-hljs><code class="html" style="padding-bottom: 0;">&lt;!DOCTYPE html&gt;<br />&lt;html&gt;<br />&lt;head&gt;<br />    &lt;meta charset="utf-8"&gt;<br />    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;<br />    &lt;title&gt;Vue-ydui Demo&lt;/title&gt;<br />    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;<br />    &lt;!-- 引入样式 --&gt;<br />    &lt;link rel="stylesheet" href="//unpkg.com/vue-ydui/dist/ydui.rem.css"&gt;<br />    &lt;!-- 引入rem自适应类库 --&gt;<br />    &lt;script src="//unpkg.com/vue-ydui/dist/ydui.flexible.js"&gt;&lt;/script&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br />&lt;div id="app"&gt;<br />    &lt;yd-button type="primary" @click.native="handleClick"&gt;Click Me!&lt;/yd-button&gt;<br />&lt;/div&gt;<br />&lt;!-- 引入 Vue --&gt;<br />&lt;script src="//vuejs.org/js/vue.min.js"&gt;&lt;/script&gt;<br />&lt;!-- 引入组件库 --&gt;<br />&lt;script src="//unpkg.com/vue-ydui/dist/ydui.js"&gt;&lt;/script&gt;<br />&lt;script&gt;<br />    new Vue({<br />        el: '#app',<br />        methods: {<br />            handleClick: function () {<br />                this.$dialog.alert({mes: 'Hello World!'});<br />            }<br />        }<br />    })<br />&lt;/script&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</code></pre>
        </docs-import>

        <h2>NPM 安装</h2>
        <h3>推荐使用 npm 来安装，享受生态圈和工具带来的便利，更好地和 webpack 配合使用，当然，也推荐使用 ES2015。</h3>
        <docs-import :tip="false" style="margin-top: 5px;margin-bottom: 5px;">
            <pre class="pre" v-hljs><code class="commond" style="padding-bottom: 0;">$ npm install vue-ydui --save</code></pre>
        </docs-import>

        <h2 style="padding-left: 21px;padding-top: 18px;font-size: 17px;"># 目录结构</h2>
        <docs-import :tip="false" style="margin-top: 5px;">
            <pre class="pre" v-hljs><code class="js">vue-ydui   /* 通过 npm install vue-ydui 下载的目录结构 */<br />|<br />|-- dist<br />|   |-- lib.px   /* 采用 px（css单位）的独立单个组件 */<br />|   |   |-- actionsheet<br />|   |   |-- badge<br />|   |   |-- ...<br />|   |<br />|   |-- lib.rem   /* 采用 rem（css单位）的独立单个组件 */<br />|   |   |-- actionsheet<br />|   |   |-- badge<br />|   |   |-- ...<br />|   |<br />|   |-- ydui.base.css   /* 重置基础样式（其未包含任何组件样式） */<br />|   |-- ydui.rem.css   /* 采用 rem（css单位）的所有组件样式 */<br />|   |-- ydui.px.css   /* 采用 px（css单位）的所有组件样式 */<br />|   |-- ydui.flexible.js   /* rem 自适应类库 */<br />|   |-- ydui.js   /* vue-ydui 核心文件 */<br />|   |<br />|-- LICENSE<br />|-- package.json<br />|-- README.md</code></pre>
        </docs-import>

        <h2 style="padding-left: 21px;padding-top: 18px;font-size: 17px;"># 全局引入</h2>
        <h3>一般在 webpack 入口文件 <span>main.js</span> 中如下配置：</h3>
        <docs-import :tip="false" style="margin-top: 5px;">
            <pre class="pre" v-hljs><code class="js" style="padding-bottom: 0;">import Vue from 'vue';<br /><br />import YDUI from 'vue-ydui';<br />import 'vue-ydui/dist/ydui.rem.css';<br />/* 使用px：import 'vue-ydui/dist/ydui.px.css'; */<br /><br />Vue.use(YDUI);<br /><br />new Vue({<br />    el: '#app',<br />    render: h =&gt; h(App)<br />});</code></pre>
        </docs-import>
        <h3 style="margin-top: 10px; ">注：若引入<span>vue-ydui/dist/ydui.rem.css</span>，则需在入口页面的 <span>head</span> 标签内引入 <span>ydui.flexible.js</span>，像这样：</h3>
        <docs-import :tip="false" style="margin-bottom: 5px;margin-top: 5px;">
            <pre class="pre" v-hljs><code class="html" style="padding-bottom: 0;">&lt;script src="//unpkg.com/vue-ydui/dist/ydui.flexible.js"&gt;&lt;/script&gt;</code></pre>
        </docs-import>

        <h2 style="padding-left: 21px;padding-top: 18px;font-size: 17px;"># 按需引入</h2>
        <h3>如果您想在 webpack 中按需使用组件，减少文件体积，可以这样写（引入“lib.rem”组件需在入口页面引入<span>ydui.flexible.js</span>，同上）：</h3>
        <docs-import :tip="false" style="margin-bottom: 5px;">
            <pre class="pre" v-hljs><code class="js" style="padding-bottom: 0;">import {ActionSheet} from 'vue-ydui/dist/lib.rem/actionsheet';<br />/* 使用px：import {ActionSheet} from 'vue-ydui/dist/lib.px/actionsheet'; */<br /><br />Vue.component(ActionSheet.name, ActionSheet);</code></pre>
        </docs-import>
        <h3 style="color:#F00;margin-top: 10px; ">注意：按需引入单个组件，另需导入重置基础样式（其未包含任何组件样式），即在入口文件 main.js 中如下配置：</h3>
        <docs-import :tip="false">
            <pre class="pre" v-hljs><code class="js" style="padding-bottom: 0;">import 'vue-ydui/dist/ydui.base.css';</code></pre>
        </docs-import>
        <h4 style="margin-top: 5px;">或在入口页面的 <span>head</span> 标签内直接引入：</h4>
        <docs-import :tip="false" style="margin-top: 5px;">
            <pre class="pre" v-hljs><code class="html" style="padding-bottom: 0;">&lt;link rel="stylesheet" href="//unpkg.com/vue-ydui/dist/ydui.base.css"&gt;</code></pre>
        </docs-import>

        <h2>版本</h2>
        <h3>最新版本：<a target="_blank" href="//github.com/ydcss/vue-ydui">v {{version}}</a></h3>

        <h2>参与</h2>
        <h3>使用本项目，意味着你也有义务帮助其变得更好。有任何建议或意见您可以进行<a target="_blank" href="//github.com/ydcss/vue-ydui/pulls">Pull Request</a>，或者给我<a target="_blank" href="https://github.com/ydcss/vue-ydui/issues">提问</a>。</h3>
        <p class="prams-box">提问时，请尽可能的详细描述问题，我会尽可能快的回复。</p>
        <p class="prams-box">不要通过联系QQ的方式给我提问题，因为有时工作或生活忙导致将其遗忘。</p>
    </docs-layout>
</template>

<script>
    export default {
        data() {
            return {version: ''}
        },
        mounted() {
            this.version = require('../../package.json').devDependencies['vue-ydui'].replace('^', '');
        }
    }
</script>

