vue 作为前端三大框架之一, 其已经悄然成为主流, 学会用 vue 相关技术来开发项目会相当轻松.
对于还没学习或者还没用过 vue 的初学者, 基础知识这里不作详解, 推荐先去相关官网, 学习一下 vue 相关的基础知识.
a. vue.js 官网 参考: https://cn.vuejs.org/ https://cn.vuejs.org/
我的 https://github.com/biaochenxuying/blog
一. 搭建 vue 的相关环境与脚手架的说明
首先, 要开发 vue 相关的项目, 要会搭建 vue 的相关环境, 要搭建的目录如下:
1. 安装 node.JS 和 NPM
2. webpack
3. vue-cli 脚手架构建工具
具体这里不作详解, 站在前人的肩膀上学习即可
安装 node.JS 和 NPM
webpack 和 vue-cli 脚手架构建工具 https://www.jianshu.com/p/1626b8643676
二. vue-cli 脚手架创建的代码详解
利用脚手架 (vue-cli) 构建一个 vue 项目, 接下来学习分析下代码.
具体这里不作详解, 站在前人的肩膀上学习即可
教程参考: https://www.jianshu.com/p/2b661d01eaf8 https://www.jianshu.com/p/2b661d01eaf8
三. 本项目 vue+mint-ui 的 h5 项目说明及详解
1. 运行项目
因为项目配置和需要的模块都已经配好了的, 所以运行只需要:
1. 在 SVN 上把 mobile-h5 项目代码下载下来.
2. 直接进入 mobile-h5 目录中, 即是和 package.JSON 的文件同级目录, 或者直接用 vsCode 编辑器打开 mobile-h5 项目, 在命令终端那里.
安装依赖, 执行命令:
NPM install
或者简写:
NPM i
没有报错时, 安装结果如图:
安装报错时, 会出现 error 的, 或者直接中止了, Windows 系统一般是因为 NPM 的环境没有配置好.
安装好模块后, 再执行如下命令来运行
NPM run dev
没有报错时, 结果会如下图:
直接打开本地链接 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 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=Windows.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 https://cn.vuejs.org/v2/guide/components.html
项目举例: 比如一个 h5 的首页, 可以分为标题组件, 业务实时组件, 关键指标组件, tab 切换组件. 这几个组件的几乎没有联系, 可以相互独立.
当然你也可以再划分成小组件, 相同的模块抽成公共的小组件, 这样子达到代码重用的目的更好. 比如首页里面大模块的 title .
6. 项目用 vuex 的讲解
本项目 vuex 的用法 和官方的有点不一样, 所以这里有必要做一下讲解.
1. 保存值 mutations
-1. 要用 store 来存储值, 都要先定义
比如: 新增里面要存储关于 日 月 类型的切换: tabActiveType: '',
要先在 store 模块的 add 里面的 initPageState 先定义, 不然找不到, 为取值会为 undefined.
定义 type, 至于为什么要大写? 因为当作常量来用, 当然不大写也可以, 不过本项目要统一成大写.
mutatuons 写一个方法来保存值
调用保存值, 这里的 SAVE_TAB_ACTIVE_TYPE 要与定义在第 2 中 type 里面的对应, 而且 对象里的 key 要与 initPageState 里面定义的对应, 如 tabActiveType.
当然怎么取值? 只需要在组件的 computed 勾子像下面这样子写即可.
按照这 5 步, 一个关于 vuex 的取值与偘保存值就 ok 了!
2. 那怎么异步 action 呢?
定义 type, 和上面的第二步一样
在相应模块的 actions 里定义一个方法, 如下图:
这样子可以获取异步请求数据, 并保存在 store 里面了.
当然调用? 只需要在组件的方法或者勾子里面, 像下面这样子调用即可.
四, 开发规范
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 代码格式化
vue 代码统一格式化可以减少代码风格差异
而且这个插件配置一下更好用:
"vetur.format.defaultFormatter.js": "vscode-typescript",
不然有些地方会出现换行, 代码难懂了. 像下面这样:
3. 推荐皮肤插件 --Boxxy Theme Kit
其中的代码颜色: Boxy Ocean 是很好看的代码风格
用上之后不满意 ? 哼, 那笔者就不高兴了, 笔者不负责!
5. 总结
团队开发要规范!!!
还想学到完整的牛逼技术? 去看相关技术的官网!!!
如果你觉得该文章对你有帮助, 欢迎到我的 https://github.com/biaochenxuying/blog ,star 一下, 谢谢.
参考教程: 《JavaScript 语言入门教程》 https://wangdoc.com/javascript/
来源: https://www.cnblogs.com/biaochenxuying/p/11427239.html