基于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

相关文章
|
5天前
|
JavaScript
如何创建一个Vue项目(手把手教你)
这篇文章是一篇手把手教读者如何创建Vue项目的教程,包括使用管理员身份打开命令行窗口、找到存放项目的位置、通过vue-cli初始化项目、填写项目信息、进入项目目录、启动项目等步骤,并提供了一些常见第三方库的引入方法。
如何创建一个Vue项目(手把手教你)
|
6天前
|
JavaScript 前端开发
在Vue2或Vue3中项目中使用 Isotope(同位素) 过滤和排序神奇的布局神器,全网独家实现!
本文介绍了在Vue2或Vue3项目中如何使用Isotope(同位素)布局库来创建动态的网格布局,并提供了详细的代码实现和效果展示,包括过滤和排序功能。
17 0
在Vue2或Vue3中项目中使用 Isotope(同位素) 过滤和排序神奇的布局神器,全网独家实现!
|
1天前
|
JavaScript
Vue项目如何生成树形目录结构
这篇文章介绍了如何在Vue项目中生成树形目录结构,通过安装并使用`mddir`命令行工具来创建一个`directoryList.md`文件,从而快速获取项目的树形目录列表。
Vue项目如何生成树形目录结构
|
6天前
|
数据可视化 JavaScript
Vue3项目使用G6可视化组件实现一个树形机构图
在Vue 3项目中使用G6可视化组件库实现树形机构图的构建和展示。
71 1
Vue3项目使用G6可视化组件实现一个树形机构图
|
6天前
|
JavaScript UED
如何在Vue3项目中使用防抖节流技巧
在Vue 3项目中使用防抖和节流技巧以优化组件性能,包括使用`lodash`库和自定义实现这两种方法。
12 0
如何在Vue3项目中使用防抖节流技巧
|
6天前
在 Vue3 + ElementPlus 项目中使用 el-autocomplete 控件
本文介绍了在Vue3 + ElementPlus项目中如何使用`el-autocomplete`控件实现自动补全输入功能,并探讨了不同版本ElementPlus中`clearable`属性的兼容性问题。
37 0
在 Vue3 + ElementPlus 项目中使用 el-autocomplete 控件
|
6天前
|
JavaScript
创建 Vue3 项目
创建 Vue3 项目
13 0
|
6天前
|
JavaScript
在Vue3+ElementPlus项目中使用具有懒加载的el-tree树形控件
在Vue 3和Element Plus项目中实现具有懒加载功能的el-tree树形控件,以优化大数据量时的页面性能。
27 0
|
6天前
|
JavaScript 前端开发
在Vue3+ElementPlus项目中实现一个简单的新增/移除行记录的小组件
在Vue 3和Element Plus项目中创建一个支持新增和移除行记录的简单表格组件。
38 0
|
6天前
在Vue3项目中使用 vue3-seamless-scroll 无缝滚动插件
本文介绍了如何在Vue3项目中使用`vue3-seamless-scroll`插件实现无缝滚动效果,并提供了详细的示例代码和运行效果。
128 0