使用vue开发的Excel数据分发工具项目总结

使用vue开发的Excel数据分发工具项目总结

项目使用技术介绍

项目采用的技术是vue+vuex+vue-router+elementUI，项目使用了vue-cli结合webpack进行创建和启动。

项目功能介绍

根据用户上传的Excel表格，选择需要拆分的字段，后台会将excel按照选择的字段拆分成多个excel，并提供下载地址，通知可根据上传的配置文件将拆分好的表格以邮件附件的形式发送给指定的人员。

项目开发总结

1.vuex中state多层数据的简写（使用函数的方式获取state）

背景介绍

当项目中使用vuex存储的对象包含的级别较深时（如下图），在获取state时需要一层层的向下获取，很麻烦且费时费力。

解决方法

1. 直接获取：this.$store.state.count
2. 通过mapState辅助函数获取

	computed: {
	    ...mapState(['uploadFiles']),
	}
	template中使用
	{{uploadFiles.fileList}}

3. 使用函数的方式获取state（推荐）

	computed: {
	    ...mapState({
	        fileList: state => state.uploadFiles.fileList,
	        res: state => state.uploadFiles.res
	    })
	},
	template中使用
	{{fileList}}
	{{res}}

2.elementUI中文件上传组件的数据回填

根据elementUI官网给出的api，可知我们可以在el-upload组件中设置file-list属性，这样就可以在组件初始时就能有已经上传好的文件存在。

3.elementUI中下拉组件的数据回填

elementUI中下拉组件的数据回调还是需要依靠model数据绑定，由于本项目中组件的数据均存放在vuex中，回填时需要的数据也不例外，所以下拉组件的初始值也是从vuex中获取的，当值被改变时只能通过mutation的方式改变state。

4.elementUI的表单输入校验、正则检验、表单提交校验

1. 输入校验和正则检验：需要在form组件上配置rules属性，同时在各表单元素上设置props属性（属性值与rules对应），在data中return对象的rules配置，当需要自定义正则校验时，需要在data中定义自定义的检验方法，并在rules中使用。
   
2. 表单提交校验：需要设置form组件的ref和model属性
   
   

5.elementui的主题颜色修改

当不喜欢elementui的默认UI样式时可根据官方给出的方式（传送门）进行修改主题色。
注意：通过官方提供的只修改主题颜色的方式修改后，需要引入好多文件（会使项目变大），而且也仅仅是修改了默认的无背景时的样子（如默认按钮的背景颜色）。

6.vue的组件拆分和动态组件

根据功能点对已有的组件（整个项目就一个组件）进行拆分，并根据当前的进度，使用动态组件进行渲染。

7.vue动画

使用vue提供的transition组件，并配置自己喜欢的CSS 过渡类名（name）前缀，同时设置动画离开/进入时过渡的时间序列（mode），再通过css调整即可。

8.vue-router的配置

1. 在vue-router中我们可以通过配置meta属性来为当前页面提供title，并通过路由的守卫导航对页面titile进行设置。
2. 当随机更改地址后，未匹配到的页面应该配置404页面、或强制重定向到首页。

	// 未匹配到的页面均会被重定向到首页
	{
	    path: '*', 
	    redirect: '/'
	}

9.项目使用webpack打包时的配置修改

1. 设置打包时不生成map文件（productionSourceMap设置为false）。
2. 设置项目vue-style-loader依赖的引入基础（vue-style-loader.js文件中的vue-style-loader配置出添加publicPath配置，详细如下图所示）。
   

10.项目中使用的eslint配置修改

项目中通过eslint来统一编码风格。

1. 关闭语句强制分号结尾（如果不配置此项，eslint会一直提示让删除语句结尾的封号）。
2. 强制每行缩进4空格。

	// 修改项目根目录中的.eslintrc.js文件
	module.exports = {
	    ...
	    rules: {
	        ...
	        "semi": [0], // 关闭语句强制分号结尾
	        'indent': ['off', 4], // 缩进4空格
	    }
	}
	// 修改项目根目录中的.editorconfig文件
	root = true
	[*]
	charset = utf-8 // 设置项目编码方式
	indent_style = space // 设置缩进为空格缩进
	indent_size = 4 // 设置缩进为4空格缩进
	end_of_line = lf // 
	insert_final_newline = true // 
	trim_trailing_whitespace = true //