做彩票网站要多少钱,梅河口市建设局网站,学的网络工程,wordpress wp_loginout上周更新完了之前vue3的shopping项目#xff0c;接下来#xff0c;将会开启一个新的项目#xff0c;效果是类似于移动端的一个伙伴匹配项目#xff0c;今天这篇文章从需求分析到架构设计再到项目初始化#xff0c;基本框架搭建几个部分来为大家详细介绍。
从这个项目开始…上周更新完了之前vue3的shopping项目接下来将会开启一个新的项目效果是类似于移动端的一个伙伴匹配项目今天这篇文章从需求分析到架构设计再到项目初始化基本框架搭建几个部分来为大家详细介绍。
从这个项目开始将全程使用一个新的开发工具webstorm,目前也是企业中用的比较多的刚开始需要一段时间去适应在本项目中用到的vantUI组件库也是一样的之前一直用的是elementUI组件库在学习的过程中要不断探索新技术有自己的想法遇到问题自己动手解决解决问题的过程就是自己成长的过程~更新完项目全部的内容后会单独发一期报错及解决方案敬请期待~
需求分析 1、需求分析 1用户添加标签要有哪些标签怎么把标签进行分类可以根据用户的学习方向等等 2主动搜索允许用户根据标签去搜索其他用户redis缓存 3组队 1创建队伍加入队伍根据标签查询队伍邀请其他人 2允许用户去修改标签 3推荐相似度计算方法本地分布式计算
技术栈
1Vue3提高页面开发效率 2Vant UI组件库基于vue的移动端组件库支持REACT 3Vite打包工具速度快 4Nginx单机部署
项目初始化
使用企业级项目开发中常用的脚手架来初始化项目如Vite,Vuex等。 初始化完成之后可以通过执行以下三个命令来安装项目所需的依赖 启动成功之后复制地址来到浏览器可以看到初始化好的项目的运行结果 在webstorm中打开刚刚创建好的项目可以看到以下目录结构 下面简单解释一下每个文件的作用
1)Package:前端项目的包管理器需要的依赖文件
1dev:本地开发环境启动一个实时更新的项目
2build:上线之前进行打包时候用的内容
3preview:本地去运行一个预发布的环境提前浏览项目上线前的内容是什么样的更倾向于接近线上项目的体积会更小。
4Vite:构建工具独立于任何框架让通用性变的更强提供了额外的适配。
这里粘贴一个报错信息 控制台返回是这样的字面意思应该是我安装的依赖有问题去浏览器搜了一下它说可以把这个文件从本地删除然后重新安装一下依赖 我并没有采取这种方式我是先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 typeprimary主要按钮/van-button
van-button typesuccess成功按钮/van-button
van-button typedefault默认按钮/van-button
van-button typewarning警告按钮/van-button
van-button typedanger危险按钮/van-button
保存之后刷新浏览器可以看到运行结果 总结出一个问题遇到问题一方面要多阅读官方文档另一方面要多次尝试
主页-组件概览
页面开发经验
1多参考
2从整体到局部
3先想清楚页面要做成什么样子再写代码不要太机械化
1导航条展示当前内容
主页搜索框-搜索页
内容区域
tab栏
1推荐页广告/主页
banner
搜索条
推荐信息流
2队伍页
4用户页消息-邮件发送的方式
开发
组件复用维护
引入Tabbar导航条步骤如下
1、新建文件引入相关代码
2、在app.vue入口文件中引入组件
3、在main.ts中注册全局插件
三个步骤缺一不可详细内容在官方文档都有介绍不再赘述
4一起来看看运行结果 好啦今天就先到这儿吧下期见~
