在Laravel中导入Vue包 [英] Import vue package in laravel
问题描述
在laravel 5.6中导入vue软件包的最核心方法是什么?它附带了vue和bootstrap预安装.我看到它们都是从公共目录在app.js中编译的,但是我可以弄清楚如何导入 https ://github.com/moreta/vue-search-select 并使用它.在尝试自行导入后:
What is the corect way to import vue packages in laravel 5.6? It comes with vue and bootstrap preinstall. I see they are all compile in app.js from public directory but I can figure out how to import https://github.com/moreta/vue-search-select and use it. After I tried to import it on my own:
错误:
ncaught TypeError: Vue.component is not a function
在线:
Vue.component('search-user', __webpack_require__(42));
直到现在我都尝试过:
assets/js/bootstrap.js:
assets/js/bootstrap.js:
import { BasicSelect } from 'vue-search-select';
window.BasicSelect = BasicSelect;
assets/js/app.js:
assets/js/app.js:
require('./bootstrap');
window.Vue = require('vue');
window.Vue = require('vue-search-select');
Vue.component('search-user', require('./components/SearchUser.vue'));
var app = new Vue({
el: '#app'
})
组件
<template>
<basic-select :options="options"
:selected-option="item"
placeholder="select item"
@select="onSelect">
</basic-select>
</template>
<script>
export default {
data() {
return {
keywords: null,
options: []
};
},
watch: {
keywords(after, before) {
if (this.keywords.length > 0)
this.fetch();
}
},
methods: {
fetch() {
axios.get('/api/search', {params: {keywords: this.keywords}})
.then(response => this.options = response.data)
.catch(error => {
});
},
onSelect (item) {
this.item = item
},
reset () {
this.item = {}
},
selectOption () {
// select option from parent component
this.item = this.options[0]
},
components: {
BasicSelect
}
}
}
</script>
我跑了:npm install和npm run watch:
I ran: npm install and npm run watch:
"devDependencies": {
"ajv": "^6.0.0",
"bootstrap": "^4.0.0",
"cross-env": "^5.1",
"laravel-mix": "^2.0",
"lodash": "^4.17.4",
"popper.js": "^1.12",
"uikit": "^3.0.0-beta.35",
"vue": "^2.5.7",
"vue-search-select": "^2.5.0"
},
"dependencies": {
"axios": "^0.17.1",
"jquery": "^3.3.1"
}
推荐答案
我认为简单就能做到
window.Vue = require('vue');
require('vue-search-select');
然后在组件中,您可以导入所需的内容:
Then in your components you can import what you need on top:
import { BasicSelect } from 'vue-search-select';
export default {
data() {
return {
keywords: null,
options: [],
item: null
};
},
...
这篇关于在Laravel中导入Vue包的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!