dongnu4254
dongnu4254
采纳率100%
2017-10-04 11:43

使用Vue模板时出错:无法安装组件:未定义模板或渲染功能

I am trying to make some Vue Templates, but i still encounter this error:

Failed to mount component: template or render function not defined.

I found a lot of suggestions that i should include the full Vue to make this work. So i did in the bootstrap.js:

window.Vue = require('vue/dist/vue.common.js');

sadly it didnt help.

Any suggestions?

EDIT:

I think the problem is that i am trying to use an inline-template inside another one:

create.vue:

<script>
    import PartnerData from './PartnerForm.vue';

    export default {

        components: {
            'partnerdata': PartnerData
        },

        data() {
            return {}
        },

        mounted() {
            console.log('hello');
        },

    }
</script>

PartnerForm.vue:

<script>
    export default {

    }
</script>

and this is my form.blade.php

<partnerdata inline-template>

    <div class="ui grid form">

        <div class="two column row">

            <!--COLUMN 1-->
            <div class="column">
...
</partnerdata>

when i just put a template tag in the PartnerForm.vue like this:

<template> HELLO </template>
<script>
    export default {

    }
</script>

Then Hello gets rendered. But if i try to use the form as an inline template i get that error.

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

1条回答

  • duanhuren5581 duanhuren5581 4年前

    see the installation instructions from here.

    Vue Installation

    see this part https://vuejs.org/v2/guide/installation.html#Explanation-of-Different-Builds

    and this https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only

    It states the following configurations

    Webpack

    if you are using laravel

    module.exports = {
      // ...
      resolve: {
        alias: {
          'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
        }
      }
    }
    

    Rollup

    const alias = require('rollup-plugin-alias')
    rollup({
      // ...
      plugins: [
        alias({
          'vue': 'vue/dist/vue.esm.js'
        })
      ]
    })
    

    Browserify

    Add to your project’s package.json:
    {
      // ...
      "browser": {
        "vue": "vue/dist/vue.common.js"
      }
    }
    

    EDIT

    after installing laravel 5.5 see packages.json

    .....
    "devDependencies": {
        "axios": "^0.16.2",
        "bootstrap-sass": "^3.3.7",
        "cross-env": "^5.0.1",
        "jquery": "^3.1.1",
        "laravel-mix": "^1.0",
        "lodash": "^4.17.4",
        "vue": "^2.1.10"
    }
    

    }

    to install the dependencies

    run npm install 
    

    now you can use laravel mix

    see packages.json again

    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    

    that means now you can run those commands with 'npm run'. example:npm run dev,

    see the command config file

    config=node_modules/laravel-mix/setup/webpack.config.js
    

    which loads this config file

    https://github.com/JeffreyWay/laravel-mix/blob/v1.0.0/src/builder/WebpackConfig.js

    in this file you will see that it has been already configured in laravel mix for you. following method of above file does that for you.

    /**
     * Build the resolve object.
     */
    buildResolving() {
        let extensions = ['*', '.js', '.jsx', '.vue'];
    
        if (Config.typeScript) {
            extensions.push('.ts', '.tsx');
        }
    
        this.webpackConfig.resolve = {
            extensions,
    
            alias: {
                'vue$': 'vue/dist/vue.common.js'
            }
        };
    
        return this;
    }
    
    点赞 评论 复制链接分享