Question

我正在尝试制作一些Vue模板，但我仍然遇到这个错误：

无法安装组件：未定义模板或渲染功能。

我发现了很多建议，我应该包含完整的Vue来完成这项工作。所以我在bootstrap.js中做了：

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

遗憾的是它没有用。

有什么建议吗？

编辑：

我认为问题在于我正在尝试在另一个内部使用内联模板：

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>

这是我的form.blade.php

<partnerdata inline-template>

    <div class="ui grid form">

        <div class="two column row">

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

当我在这样的PartnerForm.vue中放置模板标签时：

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

    }
</script>

然后Hello呈现。但是，如果我尝试将该表单用作内联模板，我会收到该错误。

Answer 1

从这里查看安装说明。

Vue Installation

请参阅此部分https://vuejs.org/v2/guide/installation.html#Explanation-of-Different-Builds

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

它说明了以下配置

<强>的WebPack

如果你正在使用laravel

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

<强>汇总

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

修改

安装laravel 5.5后请参阅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" }

}

安装依赖项

run npm install

现在你可以使用laravel mix

再次查看packages.json

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

这意味着现在您可以使用'npm run'运行这些命令。例如：npm run dev，

查看命令配置文件

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

加载此配置文件

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

在此文件中，您将看到已经为laravel mix配置了它。以上文件的方法为您做了这一点。

/** * 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; }

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

1 个答案: