摘要:把打包的目录修改成生产环境需要的目录。是域名的配置只要统一配置一项即可,方便。旨在增强团队开发协作提高代码质量和打造开发基石的编码规范,以下规范是团队基本约定的内容,必须严格遵循。
Vue作为前端三大框架之一,其已经悄然成为主流,学会用vue相关技术来开发项目会相当轻松。
对于还没学习或者还没用过vue的初学者,基础知识这里不作详解,推荐先去相关官网,学习一下vue相关的基础知识。
a. vue.js 官网 参考:https://cn.vuejs.org/
b. Vue Router 官网 参考:https://router.vuejs.org/zh/[](https://router.vuejs.org/zh/)
c. Vuex 官网 参考:https://vuex.vuejs.org/zh/[](https://vuex.vuejs.org/zh/)
d. ECMAScript 6 入门 参考:http://es6.ruanyifeng.com/
或者 es6 精简篇 https://www.jianshu.com/p/287e0bb867ae
e. webpack 官网 参考:https://www.webpackjs.com/
f. less 官网 参考:https://less.bootcss.com/[](https://less.bootcss.com/)
g. mint-ui 官网 参考: http://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项目,接下来学习分析下代码。
具体这里不作详解,站在前人的肩膀上学习即可
教程参考: https://www.jianshu.com/p/2b661d01eaf8
因为项目配置和需要的模块都已经配好了的,所以运行只需要:
1.在svn上把 mobile-h5 项目代码下载下来。
2.直接进入mobile-h5目录中,即是和 package.json 的文件同级目录,或者直接用vsCode编辑器打开 mobile-h5 项目,在命令终端那里。
安装依赖,执行命令:
npm install
或者简写:
npm i
没有报错时,安装结果如图:
安装报错时,会出现 error 的,或者直接中止了,window系统一般是因为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的配置,使其符合本项目的要示
提示:要在手机上开发测试,npm run dev 运行的localhost是不行的,要配置nginx来做代理服务才行。
比如:
components/common是全局公共的组件,
components/app 是mobile-h5的开发组件
components/app/add mobile-h5的指标新增的组件
components/app/index 是mobile-h5的首页的组件
components/app/setMeal 是mobile-h5的套餐的组件
mixins/add 是mobile-h5的指标新增的 mixins
mixins/common 是mobile-h5的公共的 mixins
modules/add 是mobile-h5的指标新增的状态数据保存
modules/setMeal 是mobile-h5的套餐的状态数据保存
domain.js 是域名的配置, 只要统一配置一项即可,方便。
比如: 添加收藏 https://baidu.com:8443/emm/favorite/save
因为引入了 domain.js 了
所以我们只需要在urls.js里面写: save(即别名): "emm/favorite/save" 即可
只要打开 总开关,再打开你要用mock数据的 具体接口的开关,接口就不会请求后台的接口了,只用mock返回的数据。
用法:
比如上图的,全省的宽 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
libs里的文件内容都是 内有乾坤的,开发人员都有必要了解一下,这里就不多介绍了。
5. 推荐开发方式vue和react一样,可以组件化,所以推荐组件化开发的方式。
组件系统是 Vue 的一个重要概念,允许我们使用小型、独立和通常可复用的组件构建大型应用。
参考vue官网,组件化 :https://cn.vuejs.org/v2/guide/components.html
项目举例:比如一个h5的首页,可以分为标题组件,业务实时组件,关键指标组件,tab切换组件。这几个组件的几乎没有联系,可以相互独立。
当然你也可以再划分成小组件,相同的模块抽成公共的小组件,这样子达到代码重用的目的更好。比如首页里面大模块的 title 。
6. 项目用vuex 的讲解本项目vuex的用法 和官方的有点不一样,所以这里有必要做一下讲解。
1. 保存值 mutations比如:新增里面要存储关于 日 月 类型的切换:tabActiveType: "",
要先在store模块的add里面的initPageState 先定义,不然找不到,为取值会为undefined。
按照这5步,一个关于vuex的取值与偘保存值就ok了!
2.那怎么异步action呢?
这样子可以获取异步请求数据,并保存在store里面了。
结合团队日常业务需求以及团队在日常开发过程中总结提炼出的经验而制定。
旨在增强团队开发协作、提高代码质量和打造开发基石的编码规范,
以下规范是团队基本约定的内容,必须严格遵循。
规范链接:
参考 腾讯和京东的前端代码规范
腾讯的 http://tgideas.qq.com/doc/index.html
京东的 https://guide.aotu.io/index.html
2. 统一编辑器--vsCode 全称 Visual Studio CodeVisual Studio Code 是微软推出的跨平台编辑器。它采用经典的VS的UI布局,功能强大,扩展性很强。
这个编辑器流畅简洁,自从用了这个编辑器,其他的都不想了,只想静静地敲代码了。
Microsoft Visual Studio Code 中文手册 https://jeasonstudio.gitbooks.io/vscode-cn-doc/content/
而且这个插件配置一下更好用:
`
"vetur.format.defaultFormatter.js": "vscode-typescript",
`
不然有些地方会出现换行,代码难懂了。像下面这样:
3. 推荐皮肤插件--Boxxy Theme Kit用上之后不满意 ?哼,那本汪就不高兴了,本汪不负责!
五.总结送上参加过的一次前端交流会上关于vue的学习和实践的pdf文件。要下载才能看哦!!!
vue项目开发实践 [vue-practice.pdf] 和 vue入坑记 [vue-starter.pdf] https://github.com/biaochenxuying/learning-resource/tree/master/vue
最后:
装逼完毕!多谢!!!本汪又该去写bugger了!!!
如果你觉得该文章对你有帮助,欢迎到我的 github,star 一下,谢谢。
github 地址
你以为本文就这么结束了 ? 精彩在后面 !!!
对 全栈修炼 有兴趣的朋友可以扫下方二维码关注我的公众号
我会不定期更新有价值的内容,长期运营。
关注公众号并回复 福利 可领取免费学习资料,福利详情请猛戳: Python、Java、Linux、Go、node、vue、react、javaScript
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/96332.html
摘要:简介最近有点小闲置,于是乎希望写点东西,正好自己喜欢听歌,便决定自己写一个音乐的简易版。核心文件则是在在这里使用统一管理页面切换动画,歌曲播放状态,歌曲进度等信息。所有对于歌曲的操作都通过来进行全局管理,然后对相应的变化做出全局改变。 Vue-QQMusic 简介: 最近有点小闲置,于是乎希望写点东西,正好自己喜欢听歌,便决定自己写一个QQ音乐的简易版。顺便进一步加深下自己对移动端的知...
好久没更新过Vue的小文章,上次做了一个基于Vue+Mint-ui的移动端AppDemo,集成了推送功能,然后通过cordova打包生成apk,移动端表现还不错,今天把这个小东西分享出来,希望有更多的小伙伴能够用Vue去做一些有意思的东西,本人才疏学浅,有说的不对的地方,还请大家多多指教。下面按照惯例放上demo地址和源码地址,希望大家能给我点下star:Demo(进去需要先注册才能登录,用的lo...
摘要:使用脚手架生成项目骨架,略。相关配置适配加入以下代码,并在中加入以下按照的官网对按需引用进行配置,文件安装相关的包相关配置安装进入文件在页面中按需引入即可 1、使用vue-cli脚手架生成项目骨架,略。2、相关配置: rem适配: index.html加入以下代码,并在head中加入以下meta; (function (doc, win) { var doc...
摘要:说明上一章从创建到完整的项目路由苍渡大神项目源码地址地址下一章布局以及框架咱们先看一下的效果图,原网址在此接下来用什么框架呢因为以前用的是,所以这次用练练手,文档在此首先下载结果如图那两个警告说的啥我也不懂,先不管大神指 说明 上一章--vue从创建到完整的项目(2)路由 苍渡大神项目源码地址--Github地址 下一章--Home布局以及vue-resource UI框架 ...
摘要:对应每一个环境可能都会有所差异,比如说服务器地址接口地址地址等等。具体的值取决于应用运行的模式。会和中的选项相符,即你的应用会部署到的基础路径。 基于vue-cli3.0构建功能完善的移动端架子,主要功能包括 webpack 打包扩展 css:sass支持、normalize.css、_mixin.scss、_variables.scss vw、rem布局 跨域设置 eslint设置...
阅读 2413·2021-09-27 13:36
阅读 2148·2019-08-29 18:47
阅读 2070·2019-08-29 15:21
阅读 1373·2019-08-29 11:14
阅读 1954·2019-08-28 18:29
阅读 1571·2019-08-28 18:04
阅读 550·2019-08-26 13:58
阅读 3148·2019-08-26 12:12