前言

随着vue3.2版本的更新，最新vue全家桶技术栈也发生了部分改变

前言

之前使用过 Vue 开发后台、中台项目，也做过移动端 H5，弄过一点小的前端架构。每做一个项目都会收获了不一样的经验和理解。下面我把这些点点滴滴的经验总结下来，做一个系列的文章分享和阶段性的总结。

常规操作，先点赞后观看哦！你的点赞是我创作的动力之一！

概览

最近，陆陆续续搞 了一个 UniUsingComponentsWebpackPlugin 插件(下面介绍)，这是自己第三个开源项目，希望大家一起来维护，一起 star 呀，其它两个：

文章目录

一、前提概要

一、使用第三方组件库

电商平台参考文档 （vantweapp）

Vant Weapp 是移动端 Vue 组件库 Vant 的小程序版本，两者基于相同的视觉规范，提供一致的 API 接口，助力开发者快速搭建小程序应用。

能够知道如何安装和配置 vant-weapp 组件库

能够知道如何使用 MobX 实现全局数据共享

能够知道如何对小程序的 API 进行 Promise 化

能够知道如何实现自定义 tabBar 的效果

使用npm包

大家好，我是小蜗牛，昨天刚看完小程序的界面构成，感觉界面还是挺复杂的啊。。。

今天我想能不能开始做做小程序呈现的界面，由于我也不是什么专业的前端，想来想去，还是采取最直接的方式吧。

没错，就是模仿，搜索一个个人博客的小程序进行页面仿写。

经过一轮千挑万选，终于决定要模仿的个人博客UI界面

界面分析

看小程序构成，由顶端的轮播图、中部的三个选项卡、底部的四个按钮组成，蜗牛感觉，整个小程序由4-5个页面组成。

微信小程序使用vant组件库

官方文档

https://vant-contrib.gitee.io/vant-weapp/#/quickstart#bu-zou-san-xiu-gai-project.config.json

在移动端的地位相当于 element ui，相当强劲的一款UI组件库，v3版本经过半年的迭代，已经非常稳定了。

Vant 3.0：全面拥抱 Vue 3