asp.net 安装element ui_Laravel结合Vue组件（以element的图片上传为例）

74 阅读 0 评论 49 点赞

我是靠谱客的博主仁爱帅哥，最近开发中收集的这篇文章主要介绍asp.net 安装element ui_Laravel结合Vue组件（以element的图片上传为例），觉得挺不错的，现在分享给大家，希望可以做个参考。

现在前端三剑客的发展可以用飞起来形容，各种各样的第三方库和插件也是层出不穷，而Laravel对Vue的支持也是非常的好，我们完全可以借助Vue的库来封装自己的组件，假设我们需要一个图片上传的功能，我们可以使用elementUI中的上传组件，实现各种上传的效果。

首先我们需要安装elementUI (前提是你已经安装了npm)，这块按照官网推荐的npm方式安装就可以了：

npm i element-ui -S

然后在resources/js/app.js中加入以下内容(已经存在的请不要重复添加)，

import Vue from 'vue';import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);new Vue({  el: '#app',});

找到手册中的上传部分，根据需要选择组件，复制代码。假设我们使用的是用户头像上传这个组件。

在resources/js/components中新建vue文件，假设名称为Upload.vue，填入复制的内容，将标签用标签包裹起来。

在app.js中引入这个组件：

Vue.component('upload', require('./components/Upload.vue').default);

在需要使用组件的地方使用这个组件

注意这个组件不管在模板中的包含关系如果，它一定要被id="app"的div中才能生效。执行：

npm run dev

效果如下：

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。