百川平台项目总结
技术栈：vue + vuex + vue-router + vee-validate + Element-ui;
项目背景
为配合有钱花业务发展，提升效率，更加精细化运营。
百川平台包括页面管理、渠道管理、策略管理和数据管理四大模块。
一期为页面管理，即“有钱花”落地页的后台发布系统，包括表单页，列表页，实现新建、编辑、复制和发布功能。
可以根据不同的投放渠道，在后台配置内容，生成相应的推广页。
要点：
-
vee-validate校验插件的中的坑
因为开发中会用到很多表单，所以就把表单封装成了组件，具体的校验在父组件中引用组件时通过props传入对应的校验规则，这是没有任何问题的，但是在最后提交表单时会对所有添加了校验规则的表单做一次校验，使用vee-validate提供的API如下：它的原理是把当前组件中没有校验通过的表单信息添加在computed计算属性的errors数组中，最后提交表单时判断数组的长度，如果为0，则result为true，反之。
this.$validator.validateAll()
.then(result => {
if (result) {
// 提交
}
});
所以校验不通过的表单信息只是添加在了当前组件即子组件的computed属性的errors中，那么在最后提交时，父组件中的computed中的errors的长度为0，result始终为true。并没有最优的解决方式，只能重复的使用一堆堆的代码。最后不得不弃用该插件，期待插件的改进。最后改用Element-ui；
-
element-ui表单校验的坑
<el-form :model="ruleForm" :rules="rules" ref="ruleForm"> <el-form-item label="活动名称" prop="name"> <el-input v-model="ruleForm.name"></el-input> </el-form-item> </el-form>export default { data() { return { ruleForm: { name: '' }, rules: { name: [{required: true, message: '请输入活动名称', trigger: 'blur'}] } } } }ruleForm为整个form对象，里边所有的表单均为ruleForm的直接属性，但是我需要返给落地页的数据是多层嵌套的，扁平化的，那这样的话element-ui的表单校验就失效了。
比如我返给落地页的数据结构是这样的：
let ruleForm = { page: { name: '', title: '' } }校验规则就需要直接作用在组件上， 比如
<el-form :model="ruleForm" ref="ruleForm"> <el-form-item label="活动名称" :prop="'page.name'" :rules="{required: true, message: '请输入活动名称', trigger: 'blur'}"> <el-input v-model="ruleForm.page.name"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button> </el-form-item> </el-form>注意点：
- 如果多个校验规则，则包到一个数组中。
- prop中的值一定要加一层单引号。
最后在提交表单时通过如下方式也可以实现对form中设置了校验规则的表单进行一次总体校验
submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { alert('submit!'); } else { console.log('error submit!!'); return false; } }); } -
折叠面板
每一个面板有一个name属性，作为唯一标示。默认情况下，所有面板是折叠状态，当给
el-collapse设置了value属性值为某一个name的值，那么对应的面板为打开状态。如果想让所有面板的初始状态为均为打开状态，则value的值为数组，数组的每一项为name的值即可。如：:value="['1','2']"。 -
树形组件不支持页面跳转，也就是说url没法设置在组件上。
@node-click="handleNodeClick"给组件设置方法，点击节点时回调参数为当前层级和下面所有层的数据对象。获取到数据对象后，通过location.href实现跳转。（二期优化：使用导航菜单） 深度克隆对象
使用插件clone deep，此插件还依赖于buffer。-
基于vue的一键复制插件
<div id="coderedeem" data-clipboard-text="这是要复制的内容" @click='copy'>复制</div>import Clipboard from 'clipboard'; copy() { let copy = new Clipboard('#coderedeem'); } 使用v-img插件实现图片预览
总结
1、此项目为从0开始的项目，开发中的所有模式都将作为标准，比如数据管理、语法（es6/7）、代码风格、命名规则、文件目录等；
2、整个应用的所有数据都在model层vuex中管理；所有请求都在actions中实现，使用async/await；所有数据的更改都通过mutations，vm中没有不做任何数据更改的动作，只是dispatch 和 commit；