Question

我的Vue组件未在浏览器中显示，import customer from "./components/customer"给我一个错误

我正在使用： -凤凰1.3 -节点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>

资产/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.eex中可见

Answer 1

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']
},

Answer 2

由于您使用的是Phoenix，请参考以下建议-https://codeburst.io/how-to-setup-graphql-vue-js-and-phoenix-1-3-part-2-the-frontend-716e8d980407

它说明Phoenix不使用Webpack，而是使用早午餐。

我要注意的一点是，导入Vue文件时，他们的代码有所不同，他们显式添加了.vue扩展名。

import customer from "./components/customer.vue";

错误：无法从“ js / app.js”中找到模块“ js / components / customer”

2 个答案: