现在前端三剑客的发展可以用飞起来形容,各种各样的第三方库和插件也是层出不穷,而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
效果如下: