全民营销（vue+webpack4.0+Mint-ui）

项目需求：微信公众号

技术选型：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%填充的。

结语：本次就总结到这，后续有补充的再更新。