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

Vue做为前端三大框架之一，其已经悄然成为主流，学会用vue相关技术来开发项目会至关轻松。

对于还没学习或者还没用过vue的初学者，基础知识这里不做详解，推荐先去相关官网，学习一下vue相关的基础知识。

a. vue.js 官网 参考：https://cn.vuejs.org/

b. Vue Router  官网 参考：https://router.vuejs.org/zh/

c. Vuex  官网 参考：https://vuex.vuejs.org/zh/

d. ECMAScript 6 入门 参考：http://es6.ruanyifeng.com/ 

或者 es6 精简篇 www.jianshu.com/p/287e0bb86…

e. webpack  官网 参考：https://www.webpackjs.com/

f. less  官网 参考：https://less.bootcss.com/

g. mint-ui  官网   参考： mint-ui.github.io/#!/zh-cn

一.搭建vue的相关环境与脚手架的说明

首先，要开发vue相关的项目，要会搭建vue的相关环境，要搭建的目录以下：

1.安装node.js和npm

2. webpack

3. vue-cli脚手架构建工具

具体这里不做详解，站在前人的肩膀上学习便可 安装node.js和npm webpack和vue-cli脚手架构建工具 

二. vue-cli脚手架建立的代码详解

利用脚手架（vue-cli）构建一个vue项目，接下来学习分析下代码。

具体这里不做详解，站在前人的肩膀上学习便可 教程参考： https://www.jianshu.com/p/2b661d01eaf8

三. 本项目 vue+mint-ui 的h5项目说明及详解

1. 运行项目

由于项目配置和须要的模块都已经配好了的，因此运行只须要：

1.在svn上把 mobile-h5 项目代码下载下来。 2.直接进入mobile-h5目录中，便是和 package.json 的文件同级目录，或者直接用vsCode编辑器打开 mobile-h5 项目，在命令终端那里。 3. 安装依赖，执行命令：

npm  install 
复制代码

或者简写：

npm i
复制代码

没有报错时，安装结果如图：

安装报错时，会出现 error 的，或者直接停止了，window系统通常是由于npm 的环境没有配置好。

4. 安装好模块后，再执行以下命令来运行

npm  run dev
复制代码

没有报错时，结果会以下图：

5. 直接打开本地连接 http://localhost:8080 就可访问了，以下图：

2. 项目目录说明

都写在 README.md 里面了，具体的也可查看 README.md 的内容。

#目录结构

├── mobile-h5 # 总项目目录

├── build # webpack 配置文件目录

├── config # webpack 配置文件引用的目录

├── kpi # webpack 打包正式生成的目录

├── src # 主开发文件的目录

│ ├── assets # 图片资源

│ ├── components # 组件模块

| │ ├── app # 组件模块

| | | ├── add # 本项目指标新增的组件的模块

| | | ├── common # 组件通用的模块

| | | ├── index # 本项目首页组件通用的模块

| | | ├── index # 本项目套餐组件通用的模块

│ ├── filters # 过滤器模块

│ ├── filters # 过滤器模块

│ ├── less # less 的公共样式模块

│ ├── libs # 封装的公共 js 文件模块

│ ├── mixins # mixins 文件模块

│ ├── router # 路由模块

│ ├── store # vuex 的 store 模块

│ ├── views # 主开发的 vue 模块

│ ├──

├── static # webpack 打包依赖的目录

├── index.html # 主页面入口，也是生成打包生产环境代码要依赖的文件
复制代码

3. 修改webpack的配置，使其符合本项目的要示

• a. 由于本地开发时，请求接口会跨域的问题，因此要用代理。

具体说明 参考 https://my.oschina.net/lixiaoyan/blog/1797724

提示：要在手机上开发测试，npm run dev 运行的localhost是不行的，要配置nginx来作代理服务才行。

• b.把打包的目录修改为生产环境须要的目录 kpi。

• c. 添加别名，在其余地方引入文件时，能够省略部分路径的书写

4. 开发目录规范说明

a. 开发要根据 业务模块 来划分，进而进行 文件模块 的划分。

好比：

• 组件components 里面

components/common是全局公共的组件，

components/app 是mobile-h5的开发组件

components/app/add mobile-h5的指标新增的组件

components/app/index 是mobile-h5的首页的组件

components/app/setMeal 是mobile-h5的套餐的组件

• mixins 里面

mixins/add 是mobile-h5的指标新增的 mixins

mixins/common 是mobile-h5的公共的 mixins

• modules 里面

modules/add 是mobile-h5的指标新增的状态数据保存

modules/setMeal 是mobile-h5的套餐的状态数据保存

b. 开发连接的书写。

• domain.js 是域名的配置, 只要统一配置一项便可，方便。

• urls.js 是请求的连接

好比： 添加收藏  baidu.com:8443/emm/favorit…

由于引入了 domain.js 了

因此咱们只须要在urls.js里面写：  save(即别名):  'emm/favorite/save' 便可

c. 引入mock.js ，用来模拟请求接口数据，当后端接口还没开发出来时，就大有用场了。

用法以下：

只要打开 总开关，再打开你要用mock数据的 具体接口的开关，接口就不会请求后台的接口了，只用mock返回的数据。

d. css样式书写

用法：

好比上图的，全省的宽 280px ,高 58px , 正常开发下，程序的css上须要写

{

width: 280px;

height: 58px;

}
复制代码

可是咱们只须要：

{

width: 280 / 100 rem;

height: 58 / 100 rem;

}
复制代码

也便是：

{

width: 2.8rem;

height: 0.58rem;

}
复制代码

换算公式就是具体: 像素/100 = rem, 还能指定7.5rem 宽就是屏幕的总宽

并且不管手机大小是多少，由于设计了 config_width = 750 ，因此满宽都是 7.5rem。

字体大小等也同理。

注意： 由于 phone的分辨率高，因此 0.01rem 在 iphone真机上会不显示，在 border设置的时候犹为明显，至少要0.02rem 才行。

1. 是由于引入了下面这个文件，要了解具体的内容，请看 rem_config.js。

2. 还有一个方法就是很是简单的,在 js 里面加入这句代码便可，写css时，也可像上面同样写，效果和上面介绍的同样。

// 屏幕适配（windowWidth/设计稿宽*100） ——*100为了方便计算。即font-size值是手机deviceWidth与设计稿比值的100倍
    document.getElementsByTagName('html')[0].style.fontSize=window.screen.width/7.5+'px';
    // 如上：经过查询屏幕宽度，动态的设置html的font-size值，设计稿大多以750*1334 设置的，经过上述换算后，在设计图上一张150*150的图，在css中对应的rem值则为：1.5*1.5rem
复制代码

e. 其余

libs里的文件内容都是 内有乾坤的，开发人员都有必要了解一下，这里就很少介绍了。

5. 推荐开发方式

vue和react同样，能够组件化，因此推荐组件化开发的方式。

组件系统是 Vue 的一个重要概念，容许咱们使用小型、独立和一般可复用的组件构建大型应用。

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

项目举例：好比一个h5的首页，能够分为标题组件，业务实时组件，关键指标组件，tab切换组件。这几个组件的几乎没有联系，能够相互独立。

固然你也能够再划分红小组件，相同的模块抽成公共的小组件，这样子达到代码重用的目的更好。好比首页里面大模块的 title 。

6. 项目用vuex 的讲解

本项目vuex的用法 和官方的有点不同，因此这里有必要作一下讲解。

1. 保存值 mutations

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

好比：新增里面要存储关于 日 月 类型的切换：tabActiveType: ''， 要先在store模块的add里面的initPageState 先定义，否则找不到，为取值会为undefined。

• 2. 定义type，至于为何要大写？由于看成常量来用，固然不大写也能够，不过本项目要统一成大写。

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

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

• 5. 固然怎么取值？只须要在组件的computed勾子像下面这样子写便可。

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

2.那怎么异步action呢？

• 1. 定义type，和上面的第二步同样
• 2. 在相应模块的 actions 里定义一个方法，以下图：

这样子能够获取异步请求数据，并保存在store里面了。

• 3. 固然调用？只须要在组件的方法或者勾子里面，像下面这样子调用便可。

4、开发规范

1.代码规范

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

旨在加强团队开发协做、提升代码质量和打造开发基石的编码规范，

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

规范连接:

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

腾讯的 tgideas.qq.com/doc/index.h…

京东的 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代码格式化

• vue代码统一格式化能够减小代码风格差别

并且这个插件配置一下更好用: "vetur.format.defaultFormatter.js": "vscode-typescript",

否则有些地方会出现换行，代码难懂了。像下面这样：

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

• 其中的代码颜色：Boxy Ocean 是很好看的代码风格 用上以后不满意 ？哼，那笔者就不高兴了，笔者不负责！

5.总结

团队开发要规范！！！ 还想学到完整的牛逼技术？去看相关技术的官网！！！

若是你以为该文章对你有帮助，欢迎到个人 github，star 一下，谢谢。

参考教程： 《JavaScript 语言入门教程》

你觉得本文就这么结束了 ? 精彩在后面 ！！！

github.com/biaochenxuy…