vue+element 项目

2 篇文章 0 订阅

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.接下来 介绍我的项目结构 不喜勿喷
在这里插入图片描述

  1. node项目代码结构 我是把代码和vue项目分离的
    在这里插入图片描述

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

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

  • 1
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue + Element是一种在Vue项目中使用Element UI框架的组合。Element是一个基于Vue 2.0的桌面端组件库,为开发者、设计师和产品经理提供了丰富的组件和样式。\[1\] 要在Vue项目中使用Element UI,首先需要引入Element UI。可以通过两种方法引入:一种是通过安装Node包,另一种是通过CDN引入。如果选择安装Node包的方式,可以使用命令`cnpm i element-ui --save`进行安装。如果选择CDN引入的方式,需要在HTML文件中引入Element UI的样式和组件库的链接。\[3\] 在main.js文件中,需要注册Element UI。可以通过`import ElementUI from 'element-ui'`和`Vue.use(ElementUI)`来注册Element UI。这样就可以在Vue项目中使用Element UI的组件了。\[2\]\[3\] 使用Element UI的具体步骤可以参考Element官网提供的例子和代码,根据官网的指引来实现想要的效果。\[3\] 总结起来,Vue + Element是指在Vue项目中使用Element UI框架的组合。通过引入Element UI并在main.js中注册,可以在Vue项目中使用Element UI的丰富组件和样式。具体的使用步骤可以参考Element官网提供的例子和代码。 #### 引用[.reference_title] - *1* *2* [VueElement的使用](https://blog.csdn.net/s_9527_s/article/details/123094193)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [vue中使用element(菜鸟教程)](https://blog.csdn.net/weixin_44727080/article/details/113607189)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值