上周更新完了之前vue3的shopping项目，接下来，将会开启一个新的项目，效果是类似于移动端的一个伙伴匹配项目，今天这篇文章从需求分析到架构设计再到项目初始化，基本框架搭建几个部分来为大家详细介绍。

从这个项目开始，将全程使用一个新的开发工具，webstorm,目前也是企业中用的比较多的，刚开始需要一段时间去适应，在本项目中用到的vantUI组件库也是一样的，之前一直用的是elementUI组件库，在学习的过程中，要不断探索新技术，有自己的想法，遇到问题自己动手解决，解决问题的过程就是自己成长的过程~更新完项目全部的内容后会单独发一期报错及解决方案，敬请期待~

需求分析：

1、需求分析：
（1）用户添加标签，要有哪些标签，怎么把标签进行分类，可以根据用户的学习方向等等
（2）主动搜索：允许用户根据标签去搜索其他用户，redis缓存，
（3）组队：
1）创建队伍，加入队伍，根据标签查询队伍，邀请其他人
2）允许用户去修改标签，
3）推荐：相似度计算方法，本地分布式计算

技术栈：

（1）Vue3：提高页面开发效率，
（2）Vant UI组件库，基于vue的移动端组件库，支持REACT
（3）Vite打包工具，速度快
（4）Nginx单机部署

项目初始化

使用企业级项目开发中常用的脚手架来初始化项目，如Vite,Vuex等。

初始化完成之后，可以通过执行以下三个命令来安装项目所需的依赖：

启动成功之后，复制地址，来到浏览器，可以看到初始化好的项目的运行结果：

在webstorm中打开刚刚创建好的项目，可以看到以下目录结构：

下面简单解释一下每个文件的作用：

（1)Package:前端项目的包管理器需要的依赖文件，

1）dev:本地开发环境启动一个实时更新的项目

2）build:上线之前进行打包时候用的内容，

3）preview:本地去运行一个预发布的环境，提前浏览项目上线前的内容是什么样的，更倾向于接近线上，项目的体积会更小。

4）Vite:构建工具，独立于任何框架，让通用性变的更强，提供了额外的适配。

这里粘贴一个报错信息

控制台返回是这样的，字面意思应该是我安装的依赖有问题，去浏览器搜了一下，它说可以把这个文件从本地删除，然后重新安装一下依赖

我并没有采取这种方式，我是先cd到了对应的目录下面，然后在执行启动命令，成功了~

整合组件库Vant：

官网：Vant 3 - Lightweight Mobile UI Components built on Vue

大家可以先配置自动按需引入，然后再安装vant,我的建议是先安装vant,然后再配置自动按需引入，因为如果是前者的话可能会报错，我这里已经报错了，必然事件哈哈哈哈哈，

简单贴一下控制台的返回情况：

我的代码是这样的

如果大家有更好的方法，也可以评论区提出来，一起探讨探讨。

按需引入：

安装：可以通过执行以下命令

npm i babel-plugin-import -D

配置：

引入组件：main.ts

这些内容在官网都可以找到，不再详细解释了。

以上步骤完成之后，在App.vue中使用一下组件：

以按钮为例

<van-button type="primary">主要按钮</van-button>

<van-button type="success">成功按钮</van-button>

<van-button type="default">默认按钮</van-button>

<van-button type="warning">警告按钮</van-button>

<van-button type="danger">危险按钮</van-button>

保存之后，刷新浏览器，可以看到运行结果：

总结出一个问题：遇到问题，一方面要多阅读官方文档，另一方面，要多次尝试，

主页-组件概览

页面开发经验：

（1）多参考

（2）从整体到局部

（3）先想清楚页面要做成什么样子，再写代码，不要太机械化

1）导航条：展示当前内容

主页搜索框-搜索页

内容区域

tab栏

（1）（推荐页（广告）/主页）

banner

搜索条

推荐信息流

（2）队伍页

（4）用户页（消息-邮件发送的方式）

开发

组件复用，维护

引入Tabbar导航条步骤如下：

1、新建文件，引入相关代码

2、在app.vue（入口文件）中引入组件

3、在main.ts中注册全局插件

三个步骤，缺一不可，详细内容在官方文档都有介绍，不再赘述

4一起来看看运行结果：

好啦，今天就先到这儿吧，下期见~