|
1 | 1 | <h1 align="center">使用指南</h1> |
2 | 2 |
|
| 3 | +<p align="center">指南非常地详细,并非说明上手多么地复杂,只是更好的使用它做的说明而已</p> |
| 4 | + |
3 | 5 | 简体中文 / [English](./Guide.md) |
4 | 6 |
|
5 | 7 | ### 开始使用 |
@@ -73,3 +75,90 @@ pnpm install |
73 | 75 | ```bash |
74 | 76 | pnpm dev |
75 | 77 | ``` |
| 78 | + |
| 79 | +### 新增页面 |
| 80 | + |
| 81 | +这里的『页面』指配置了路由,能够通过链接直接访问的模块,要新建一个页面,通常只需要在脚手架的基础上进行简单的配置。 |
| 82 | + |
| 83 | +脚手架除了手动创建以外,还集成了 `plop`,一种代码片段快速生成插件,避免重复拷贝粘贴工作。 |
| 84 | + |
| 85 | +- 命令式创建 |
| 86 | + |
| 87 | +这里已经为大家预置了两种:`view` 和 `component`,选择一个之后按回车键就可以在项目目录的左侧看到了。 |
| 88 | + |
| 89 | +```bash |
| 90 | +pnpm plop |
| 91 | +``` |
| 92 | + |
| 93 | +- 手动创建 |
| 94 | + |
| 95 | +在 src/views 下新建页面的vue文件,如果相关页面有多个,可以新建一个文件夹来放置相关文件。 |
| 96 | + |
| 97 | +值得提醒的是,样式文件默认使用 `Less`,如果想要集成其它预处理器,如 `Sass` 和 `Stylus`,请自行安装。 |
| 98 | + |
| 99 | +最后,记得将新建的文件加入路由 - router/index.ts |
| 100 | + |
| 101 | + |
| 102 | +### 新增业务组件 |
| 103 | + |
| 104 | +对于一些可能被多处引用的功能模块,建议提炼成业务组件统一管理。这些组件一般有以下特征: |
| 105 | + |
| 106 | +- 只负责一块相对独立,稳定的功能; |
| 107 | +- 没有单独的路由配置; |
| 108 | +- 可能是纯静态的,也可能包含自己的 state,但不涉及 pinia 的数据流,仅受父组件(通常是一个页面)传递的参数控制。 |
| 109 | + |
| 110 | +这里以一个简单的静态组件为例进行介绍。假设你的应用中经常需要展现图片,这些图片有固定的高度和宽度,有背景颜色,还有一段文字介绍。你可以用一个组件来实现这个功能,它有默认的样式,同时可以接收父组件传递过来的参数进行展示。 |
| 111 | + |
| 112 | +- 1、新建文件 |
| 113 | + |
| 114 | +在 src/components 下新建一个以组件名命名的文件夹,注意首字母大写,命名尽量体现组件的功能,这里就叫 image-wrapper。在此文件夹下新增 js/ts/vue 文件及样式文件(如果需要),命名为 index.ts和 index.less。 |
| 115 | + |
| 116 | +> 如果你的组件比较复杂,可以分为多个文件,最后在 index.ts 中统一 export。 |
| 117 | + |
| 118 | +你的代码大概是这个样子: |
| 119 | + |
| 120 | +``` |
| 121 | +<template> |
| 122 | + <div class="image-wrapper"> |
| 123 | + <img class="img" :src="src" :alt="desc" /> |
| 124 | + <!-- 如果使用该组件的使用者没用 slot,则默认 div.desc 来输出传递的 desc 属性 --> |
| 125 | + <slot name="desc"> |
| 126 | + <div class="desc" v-if="desc">{{ desc }}</div> |
| 127 | + </slot> |
| 128 | + </div> |
| 129 | +</template> |
| 130 | + |
| 131 | +<script setup lang="ts"> |
| 132 | +const props = defineProps({ |
| 133 | + src: String, |
| 134 | + desc: String, |
| 135 | +}) |
| 136 | +</script> |
| 137 | +``` |
| 138 | + |
| 139 | +- 2、使用 |
| 140 | + |
| 141 | +在要使用这个组件的地方,按照组件定义的 API 传入参数,直接使用就好: |
| 142 | + |
| 143 | +``` |
| 144 | +<template> |
| 145 | + <!-- 普通使用方式 --> |
| 146 | + <image-wrapper :src="state.imageSrc" :desc="state.context"></image-wrapper> |
| 147 | + |
| 148 | + <!-- 使用 slot 的 desc 方式 --> |
| 149 | + <image-wrapper :src="state.imageSrc"> |
| 150 | + <template #desc> |
| 151 | + <span>{{ state.context }}</span> |
| 152 | + </template> |
| 153 | + </image-wrapper> |
| 154 | +</template> |
| 155 | + |
| 156 | +<script setup lang="ts"> |
| 157 | +const state = reactive({ |
| 158 | + context: '示意图', |
| 159 | + imageSrc: 'xxxxxxxxx.png' |
| 160 | +}) |
| 161 | +</script> |
| 162 | +``` |
| 163 | + |
| 164 | +值得说明的是,我们不必先引入组件再使用组件,也不必先引入Vue3 API再使用API,因为这一切都由 `unplugin-vue-components` 和 `unplugin-auto-import` 帮我们做好了。 |
0 commit comments