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;
}
    点赞 评论 复制链接分享
提交

为你推荐