项目需求:微信公众号
技术选型:vue+webpack4.0+Mint-ui
Mint-ui是基于vue的一个移动端ui框架,开发过程中引用的一些组件还是很方便,但是也对一些默认样式做了修改,这个在外部单独建一个css的文件进行修改,然后在main.js中引用。
一、框架搭建
这一步不是自己做的,先省略,后面补充。
注意:使用了webpack4.0,有些配置需注意与之前的语法不太一样
1、config里面的访问地址配置config==>index.js
二、图片上传
省略开发过程中毫无障碍的基础技术点,整个项目页面断断续续大概写了5天(中间插入了别的项目的任务),接口联调花了4天,其他的就是漫长的填坑之路。
图片上传是我的一大痛点,所以单独拿出来了
1、图片上传插件选择,选的是 vue-image-upload-preview
三、漫长的填坑之路
1、项目开发完打包,样式不显示
更改config文件夹下的index.js中的这行配置,修改一下路径
2、项目开发完打包,背景图不显示
用了webpack4.0,相应的配置语法有些变动,直接贴一段关于背景图显示的代码(主要是加上红框里的代码),
3、配置每个路由页面的标题
在router下面的index.js文件中每个路由下配置meta:{title:''}的属性
然后在main.js中进行替换
4、calc属性的使用
+和-之间一定要留空格才会生效,这个属性在计算需要填满屏幕的页面很有用。
5、路由传参
push后面写路由的name及要携带的参数params,
const self = this;
self.$router.push({name:'fillinfo',params:{isRegister:'1'}});
然后在跳转过去的路由页面通过下面的方法获取
const self = this;
self.isRegister= self.$route.params.isRegister;
6、姓名、手机号、银行卡、身份证等的校验
相信这些校验大家都很熟悉,正则公式到处都有,我就不多说
下面主要说一下输入框除了需要做校验外,在输入的时候只允许输入数字或汉字的,其他输入无效的限制
先在公共文件中封装几个过滤方法,然后再需要进行校验的输入框所在的vue组件中引用该文件,并在watch中进行监听。
7、补充几个样式修改的例子,有些也许有用
单选框radio的样式修改,将radio默认的样式改成下面的样式
其实就是用ui提供的切图进行替换,但是radio默认的样式是通过伪类元素写出来,跟这个还是有些差别的
这里就只拿出了关键的两段样式,其实没有多复杂,也是用到了前面说过的background-image的属性,因为vue项目中的背景图直接用background是不能100%填充的。
结语:本次就总结到这,后续有补充的再更新。