Ошибка: не удается найти модуль «js / components / customer» из «js / app.js» - PullRequest
Новая
       7

Ошибка: не удается найти модуль «js / components / customer» из «js / app.js»

0 голосов
/ 20 декабря 2018

мой компонент Vue не отображается в браузере, import customer from "./components/customer" выдает ошибку

Я использую: - Phoenix 1.3 - Node v8.14.0

Ниже - мой код

assets / js / apps.js 

import Vue from "vue";
import "axios";
import "./socket"; // To be used later

import customer from "./components/customer"; // this is the line that brings the error message
Vue.component("customer", customer);

new Vue({}).$mount("#takso-app");

lib / myApp / templates / pages / index.html.eex 

<div id="takso-app" style="border:solid red 2px">
  <customer></customer>
</div>

assets / js / components / customer.vue 

<template>
    <div>
        <input type="text" class="form-control" id="address" placeholder = "address" v-model="address">
    </div>
    <div>
    <textarea class="col-sm-12" style="background-color:#f4f7ff" rows="4" v-model="messages"></textarea>
    </div>
</template>

<script>
import axios from "axios";

export default {
    data: function() {
        return {
            address: "",
        }
    },
    methods: {
        submitBookingRequest: function() {
            axios.post("/api/bookings",
                {address: this.address})
                .then(response => {
                    this.messages = response.data.msg;
                }).catch(error => {
                    console.log(error);
                });
        }
    }
}

</script>

Я ожидаю, что мои 2 ввода (адрес и сообщение) должны быть видны в index.html.ех

Ответы [ 2 ]

0 голосов
/ 22 декабря 2018

Поскольку вы используете Phoenix, пожалуйста, обратитесь к этому совету - https://codeburst.io/how-to-setup-graphql-vue-js-and-phoenix-1-3-part-2-the-frontend-716e8d980407

Это объясняет, что Phoenix не использует веб-пакет, а скорее поздний завтрак.

Я отмечаю, что это другоев своем коде при импорте файла Vue они явно добавляют расширение .vue. 

import customer from "./components/customer.vue";
0 голосов
/ 20 декабря 2018

https://github.com/vuejs-templates/webpack-simple/issues/130

измените ваш /project-directory/webpack.config.js на следующий параметр (просто добавьте расширения) 

resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json']
},
...