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