项目实战-开发工具入门/基本框架搭建/项目初始化/引入组件库

上周更新完了之前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一起来看看运行结果:

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

相关推荐
gnip5 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫6 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel7 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼7 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手11 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法11 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku11 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode11 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu11 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu11 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript