基于vue+mint-ui的mobile-h5的项目说明(下)

简介: Vue作为前端三大框架之一,其已经悄然成为主流,学会用vue相关技术来开发项目会相当轻松。对于还没学习或者还没用过vue的初学者,基础知识这里不作详解,推荐先去相关官网,学习一下vue相关的基础知识。

5. 推荐开发方式


vue和react一样,可以组件化,所以推荐组件化开发的方式。


组件系统是 Vue 的一个重要概念,允许我们使用小型、独立和通常可复用的组件构建大型应用。


参考vue官网,组件化 :https://cn.vuejs.org/v2/guide/components.html


项目举例:比如一个h5的首页,可以分为标题组件,业务实时组件,关键指标组件,tab切换组件。这几个组件的几乎没有联系,可以相互独立。


微信图片_20220512171421.png


微信图片_20220512171436.png


当然你也可以再划分成小组件,相同的模块抽成公共的小组件,这样子达到代码重用的目的更好。比如首页里面大模块的 title 。


微信图片_20220512171451.png


6. 项目用vuex 的讲解


本项目vuex的用法 和官方的有点不一样,所以这里有必要做一下讲解。


1. 保存值 mutations


1. 要用store来存储值,都要先定义

比如:新增里面要存储关于 日 月 类型的切换:tabActiveType: '',

要先在store模块的add里面的initPageState 先定义,不然找不到,为取值会为undefined。


微信图片_20220512171512.png


2. 定义type,至于为什么要大写?因为当作常量来用,当然不大写也可以,不过本项目要统一成大写。


微信图片_20220512171527.png


3. mutatuons 写一个方法来保存值


微信图片_20220512171543.png


4. 调用保存值,这里的 SAVE_TAB_ACTIVE_TYPE 要与定义在第2中 type 里面的对应,而且 对象里的 key 要与initPageState里面定义的对应,如 tabActiveType。


微信图片_20220512171559.png


5. 当然怎么取值?只需要在组件的computed勾子像下面这样子写即可。


微信图片_20220512171612.png


按照这5步,一个关于vuex的取值与偘保存值就ok了!


2.那怎么异步action呢?


1. 定义type,和上面的第二步一样


2. 在相应模块的 actions 里定义一个方法,如下图:


微信图片_20220512171628.png


这样子可以获取异步请求数据,并保存在store里面了。


3. 当然调用?只需要在组件的方法或者勾子里面,像下面这样子调用即可。


微信图片_20220512171643.png


四、开发规范


1.代码规范


结合团队日常业务需求以及团队在日常开发过程中总结提炼出的经验而制定。


旨在增强团队开发协作、提高代码质量和打造开发基石的编码规范,


以下规范是团队基本约定的内容,必须严格遵循。


规范链接:

参考 腾讯和京东的前端代码规范

腾讯的 http://tgideas.qq.com/doc/index.html

京东的 https://guide.aotu.io/index.html


2. 统一编辑器--vsCode 全称 Visual Studio Code


Visual Studio Code 是微软推出的跨平台编辑器。它采用经典的VS的UI布局,功能强大,扩展性很强。


这个编辑器流畅简洁,自从用了这个编辑器,其他的都不想了,只想静静地敲代码了。

Microsoft Visual Studio Code 中文手册 https://jeasonstudio.gitbooks.io/vscode-cn-doc/content/

统一格式化代码插件-- Vetur  一个关于vue代码格式化


微信图片_20220512171717.png


vue代码统一格式化可以减少代码风格差异

而且这个插件配置一下更好用:


`

"vetur.format.defaultFormatter.js": "vscode-typescript",


`

微信图片_20220512171736.png


不然有些地方会出现换行,代码难懂了。像下面这样:


微信图片_20220512171749.png


3. 推荐皮肤插件--Boxxy Theme Kit


其中的代码颜色:Boxy Ocean 是很好看的代码风格

用上之后不满意 ?哼,那本汪就不高兴了,本汪不负责!


微信图片_20220512171804.png

相关文章
|
7月前
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
330 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
5月前
|
人工智能 安全 程序员
用 Colab 和 ngrok 免费部署你的 Web UI 项目,随时随地访问!
用 Colab 和 ngrok 免费部署你的 Web UI 项目,随时随地访问!
|
4月前
|
JavaScript 前端开发 UED
Vue 项目中如何自定义实用的进度条组件
本文介绍了如何使用Vue.js创建一个灵活多样的自定义进度条组件。该组件可接受进度段数据数组作为输入,动态渲染进度段,支持动画效果和内容展示。当进度超出总长时,超出部分将以红色填充。文章详细描述了组件的设计目标、实现步骤(包括props定义、宽度计算、模板渲染、动画处理及超出部分的显示),并提供了使用示例。通过此组件,开发者可根据项目需求灵活展示进度情况,优化用户体验。资源地址:[https://pan.quark.cn/s/35324205c62b](https://pan.quark.cn/s/35324205c62b)。
148 0
|
8月前
|
JavaScript 数据安全/隐私保护
Vue Amazing UI 组件库(Vue3+TypeScript+Vite 等最新技术栈开发)
Vue Amazing UI 是一个基于 Vue 3、TypeScript、Vite 等最新技术栈开发构建的现代化组件库,包含丰富的 UI 组件和常用工具函数,并且持续不断维护更新中。另外,组件库全量使用 TypeScript,支持自动按需引入和 Tree Shaking 等,能够显著提升开发效率,降低开发成本。
496 5
Vue Amazing UI 组件库(Vue3+TypeScript+Vite 等最新技术栈开发)
|
8月前
|
人工智能 JavaScript 关系型数据库
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
263 14
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
|
8月前
|
前端开发 JavaScript Java
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
349 13
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
|
8月前
|
SQL JavaScript 安全
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
320 11
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
|
7月前
|
资源调度 JavaScript 前端开发
Pinia 如何在 Vue 3 项目中进行安装和配置?
Pinia 如何在 Vue 3 项目中进行安装和配置?
532 4
|
8月前
|
监控 JavaScript 前端开发
ry-vue-flowable-xg:震撼来袭!这款基于 Vue 和 Flowable 的企业级工程项目管理项目,你绝不能错过
基于 Vue 和 Flowable 的企业级工程项目管理平台,免费开源且高度定制化。它覆盖投标管理、进度控制、财务核算等全流程需求,提供流程设计、部署、监控和任务管理等功能,适用于企业办公、生产制造、金融服务等多个场景,助力企业提升效率与竞争力。
475 12
|
8月前
|
前端开发 数据安全/隐私保护 开发者
FirstUI:Deepseek能帮我们做很多事情,而这款开源框架专为开发者设计的开源UI框架,让你的项目加速起飞
嗨,大家好,我是小华同学。今天为大家介绍一个轻量级、响应式的前端UI框架——FirstUI。它提供丰富的组件库,包括按钮、输入框、下拉菜单等,帮助开发者快速构建美观、功能丰富的用户界面。FirstUI的核心理念是“简单、快速、高效”,适合各种Web应用开发,如企业网站、电商平台和个人博客。其体积小、加载快,支持响应式设计,并且易于定制。FirstUI拥有活跃的社区支持,开发者可以轻松找到帮助并分享经验。欢迎关注我们,获取更多优质开源项目和高效工作学习方法。
307 0

热门文章

最新文章