錯誤時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; 
}