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-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)
vue+element 项目_第1张图片

2.注册页面(register)
vue+element 项目_第2张图片

3.登录成功首页(map)

4.图片裁剪 (cutting)
vue+element 项目_第3张图片

5.图片展示 分页(预览、删除)(picture)
vue+element 项目_第4张图片

6.富文本编辑 预览(ueditor)

7.表格展示 (table)
vue+element 项目_第5张图片

8.表格新增数据(编辑 表格校验)(tableEdit)
vue+element 项目_第6张图片

9.修改个人信息(更改头像)(personal)vue+element 项目_第7张图片

10.支持中英切换

  • 在这里插入图片描述
  • 查看了码云的中英切换 也是使用了cookie
  • 在这里我也结合element实现了中英切换(可以配置 实现其他语言)vue+element 项目_第8张图片

11.接下来 介绍我的项目结构 不喜勿喷
vue+element 项目_第9张图片

  1. node项目代码结构 我是把代码和vue项目分离的
    vue+element 项目_第10张图片

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

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

你可能感兴趣的:(vue,node)