基于 Vue+Mint-ui 的 Mobile-h5 的项目说明

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

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

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

我的 github

一.搭建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 的环境没有配置好。

安装好模块后，再执行如下命令来运行

npm  run dev

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

npm run dev.png

直接打开本地链接 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 是请求的链接

比如：添加收藏 https://baidu.com:8443/emm/favorite/save

因为引入了 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 才行。

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

还有一个方法就是非常简单的,在 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里的文件内容都是内有乾坤的，开发人员都有必要了解一下，这里就不多介绍了。