在日常开发中，随着需求的个性化，逻辑的复杂化，自定义组件也变得越来越常见，而且组件具有扩展性强，易复用，封装复杂的代码逻辑等优点，可以用小组件来构建大型应用系统。本文以一个简单的小例子，简述Vue进行组件开发的常见步骤，如有不足之处，还请指正。
涉及知识点
本文案例，不仅用到了之前的基础知识，如：v-if, 样式绑定，属性传值等，还用到了组件的特有知识，如下所示：
- 组件：可复用的Vue实例，具有封装，复用等特点。
- Vue项目构建：一个vue后缀的文件，就表示一个组件。但是浏览器并不认识vue文件，所有需要进行编译才能运行，Vue提供了一个脚手架（CLI）来编译运行项目。
- 组件构成：由props(属性)，computed(计算属性),method(方法)等构成，来支持组件的不同需求。
- 开发工具：Visual Studio Code
- 运行工具：Vue CLI 运行命令：vue serve
设计思路
- 进度条分类：线性进度条（采用DIV嵌套实现），环形进度条（采用SVG实现）。
- 提取共性特征：颜色，高度，显示内容，图标样式等属性值的提取，根据属性来区分展示的，采用计算属性实现。
- 图标样式：本例中的图标样式采用Wingdings字体实现，可通过windows-->附件-->字符映射表 去查询。
示例效果图
线性进度条：分为进度显示在右侧，还是内侧且跟随进度条移动。如下所示：
环形进度条：大小可以设置，显示内容和线性进度条一致。如下所示：
核心代码
本例所有代码进行封装【Progress.vue】主要包含三部分：模板（template）脚本（script）样式（style）。
一个template下只能包含一个div，但是div下可以包含多个子节点。如下所示：
1 <template> 2 <div class="progress " :class="'progress--'+ptype"> 3 <!-- 条形进度条 --> 4 <div class="progress-bar" v-if="ptype==='line'"> 5 <div class="progress-bar__outer" :style="{height:strokeHeight+'px'}"> 6 <div class="progress-bar__inner" :style="barStyle"> 7 <!-- 进度条内显示百分比 --> 8 <div v-if="textInside" class="progress__text" style="color:white;"> {{percentage}}% </div> 9 </div> 10 </div> 11 12 </div> 13 <!-- 环形进度条 采用SVG实现 --> 14 <div class="progress_circle" :style="{width:cwidth+'px',height:cwidth+'px'}" v-else> 15 <svg viewBox="0 0 100 100" :style="{width:cwidth+'px',height:cwidth+'px'}"> 16 <!-- 背景圆形 --> 17 <path :d="trackPath" fill="none" :stroke-width="relativeStrokeHeight" stroke="#e5e9f2" /> 18 <!-- 进度圆形 --> 19 <path :d="trackPath" fill="none" :stroke-width="relativeStrokeHeight" :stroke="stroke" :style="circlePathStyle" stroke-linecap="round" /> 20 </svg> 21 </div> 22 <div v-if="!textInside" class="progress__text" :style="{fontSize:progressTextSize+'px'}"> 23 <template v-if="!status"> {{percentage}}% </template> 24 <i v-else class="icon" :class="iconCls"></i> 25 </div> 26 </div> 27 </template>