在 laravel 中导入 vue 包答案

【问题标题】：Import vue package in laravel在 laravel 中导入 vue 包
【发布时间】：2018-08-02 05:07:06
【问题描述】：

在 laravel 5.6 中导入 vue 包的正确方法是什么？它带有 vue 和 bootstrap 预安装。我看到它们都是在公共目录的 app.js 中编译的，但我可以弄清楚如何导入 https://github.com/moreta/vue-search-select 并使用它。在我尝试自己导入后：

错误：

ncaught TypeError: Vue.component is not a function

在线：

Vue.component('search-user', __webpack_require__(42));

直到现在我都试过这个：

assets/js/bootstrap.js：

import { BasicSelect } from 'vue-search-select';
window.BasicSelect = BasicSelect;

资产/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：

"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"
    }

【问题讨论】：

标签： vue.js vue-component laravel-5.6 vue-select

【解决方案1】：

我认为简单就可以了

window.Vue = require('vue');
require('vue-search-select');

然后在您的组件中，您可以在顶部导入您需要的内容：

import { BasicSelect } from 'vue-search-select';

export default {
    data() {
        return {
            keywords: null,
            options: [],
            item: null
        };
    },
...

【讨论】：

[Vue 警告]：属性或方法“item”未在实例上定义，但在渲染期间被引用。通过初始化该属性，确保该属性是反应性的，无论是在数据选项中，还是对于基于类的组件。在此之后，我从引导程序中删除了它，因为我将它导入 app.js: import { BasicSelect } from 'vue-search-select'; window.BasicSelect = 基本选择；与上述相同的错误。在我添加 window.Vue= require('vue-search-select') 后，我的帖子中出现了相同的错误。
你在你的组件（*.vue）中导入BasicSelect，在你的app.js中导入主库vue-search-select，就像我上面提到的那样，你现在遇到的问题是this.item 在您的 .vue 组件中未定义，只需创建它

【解决方案2】：

一个漏掉的细节骗了我这个，你需要像这样注册组件，否则找不到：

components: {
  ModelSelect,
  BasicSelect
},

【讨论】：