错误时Vue的模板：无法安装组件：模板或呈现功能没有定义

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> 

然后喂得到呈现。但是，如果我尝试使用表单作为内联模板，我得到该错误。

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 看包。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混合

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

，现在意味着你可以ru n那些带'npm run'的命令。例如：npm run dev，

看到命令配置文件

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

它加载这个配置文件

​​

在这个文件中，你会看到，它已经在laravel搭配了已经配置您。以下文件的方法为你做。

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