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

效果如下：