vue+element 项目

Vue* 技术盏： vue+Element+axios+i18n+vuePicturePreview+js-cookie+vue-croppa+wangeditor`Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架 http://element.eleme.io/#/zh-CNAxios 是一个基于 promise 的 HTTP 库，可以...

彻夜不归

2972人浏览 · 2018-09-21 11:35:58

彻夜不归 · 2018-09-21 11:35:58 发布

Vue

* 技术盏： vue+Element+axios+i18n+vuePicturePreview+js-cookie+vue-croppa+wangeditor

	`
	Element-UI  是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架 http://element.eleme.io/#/zh-CN
	Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中 用于发送网络请求 https://www.npmjs.com/package/axios
	i18n 是一款可以实现页面国际化的插件  https://www.npmjs.com/package/i18n
	vuePicturePreview 图片预览插件  https://www.npmjs.com/package/vue-picture-preview
	js-cookie 存储用户数据  https://www.npmjs.com/package/js-cookie
	vue-croppa 图片裁剪插件  https://www.npmjs.com/package/vue-croppa
	wangeditor 富文本编辑器 每个后台系统基本都会用到  https://www.npmjs.com/package/wangeditor
	`

介绍开始

1.登录页（login）
在这里插入图片描述

2.注册页面（register）
在这里插入图片描述

3.登录成功首页（map）
在这里插入图片描述

4.图片裁剪（cutting）
在这里插入图片描述

5.图片展示分页（预览、删除）（picture）
在这里插入图片描述

6.富文本编辑预览（ueditor）
在这里插入图片描述

7.表格展示（table）
在这里插入图片描述

8.表格新增数据（编辑表格校验）（tableEdit）
在这里插入图片描述

9.修改个人信息（更改头像）(personal) 在这里插入图片描述

10.支持中英切换

查看了码云的中英切换也是使用了cookie
在这里我也结合element实现了中英切换（可以配置实现其他语言）

11.接下来介绍我的项目结构 不喜勿喷
在这里插入图片描述

node项目代码结构我是把代码和vue项目分离的

项目地址：https://github.com/aisagacious/vue_element
?Star

文件中都有备注，不懂可在评论区留言谢谢

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^