Merge remote-tracking branch 'main/dev' into dev

docs/examples-docs/quickstart.md

@@ -10,39 +10,42 @@ npm i vant -S
 
 ### 引入组件
 
-#### 使用 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) (推荐)
+#### 方式一. 使用 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) (推荐)
+```bash
+# 安装 babel-plugin-import 插件
+npm i babel-plugin-import -D
+```
 
-   ```js
+```js
-   // .babelrc or babel-loader option
+// 在 .babelrc 或 babel-loader 中添加插件配置
-   {
+{
-     "plugins": [
+  "plugins": [
-       ["import", { "libraryName": "vant", "style": true }]
+    ["import", { "libraryName": "vant", "style": true }]
-     ]
+  ]
-   }
+}
-   ```
+```
-   
-   接着你可以直接引入 vant 组件，等价于下方的按需引入组件
 
-   ```js
+接着你可以在代码中直接引入 Vant 组件，插件会自动将代码转化为方式二中的按需引入形式。
-   // 模块化地引入 js 和 css, 通过 babel-plugin-import 插件解析
-   import { Button } from 'vant';
-   ```
 
-#### 按需引入组件
+```js
+import { Button } from 'vant';
+```
 
-   ```jsx
+#### 方式二. 按需引入组件
-   import { Button } from 'vant/lib/button';
+
-   import 'vant/lib/vant-css/button.css';
+```js
-   ```
+import { Button } from 'vant/lib/button';
+import 'vant/lib/vant-css/button.css';
+```
  
-#### 导入所有组件
+#### 方式三. 导入所有组件
- 
+
-```javascript
+```js
 import Vue from 'vue';
-import vant from 'vant';
+import Vant from 'vant';
 import 'vant/lib/vant-css/index.css';
 
-Vue.use(vant);
+Vue.use(Vant);
 ```
 
 ### 自定义主题
@@ -66,9 +69,8 @@ cd packages/vant-css
 
 修改你下载主题对应的样式即可，然后引入你修改后的主题。
 
-### vue-cli模板
+### vue-cli 模板
-
+可以使用`vue-cli`来初始化`Vant`的通用模板：
-可以使用`vue-cli`来初始化`vant`的通用模板：
 
 ```shell
 vue init youzan/vue-cli-template-vant projectName

docs/src/ExamplesApp.vue

@@ -2,7 +2,7 @@
   <router-view></router-view>
 </template>
 
-<style>
+<style lang="postcss">
 body {
   -webkit-font-smoothing: antialiased;    
 }

docs/src/ExamplesDocsApp.vue

@@ -34,3 +34,11 @@ export default {
   }
 };
 </script>
+
+<style lang="postcss">
+.zan-doc-content--quickstart {
+  h3:not(:first-of-type) {
+    margin-top: 35px;
+  }
+}
+</style>

docs/src/examples.js

@@ -21,7 +21,7 @@ routesConfig.push({
   component: DemoList
 });
 const router = new VueRouter({
-  mode: 'history',
+  mode: 'hash',
   base: '/zanui/vue/examples',
   routes: routesConfig
 });

docs/src/index.js

@@ -15,7 +15,7 @@ routesConfig.push({
 });
 
 const router = new VueRouter({
-  mode: 'history',
+  mode: 'hash',
   base: '/zanui/vue/',
   routes: routesConfig
 });

packages/vant-css/src/nav-bar.css

@@ -10,6 +10,7 @@
 
   .van-icon {
     color: $blue;
+    vertical-align: middle;
   }
 
   &__arrow {
@@ -52,6 +53,7 @@
     margin: 0 -15px;
     padding: 0 15px;
     display: inline-block;
+    vertical-align: middle;
 
     &:active {
       background-color: $active-color;