Vue.jsとのWebPACK - コンポーネントのマウントに失敗しました：テンプレートや機能をレンダリング

Question

を定義していないが、私は私が持っているいくつかのグローバルコンポーネントについて、次のエラーを取得しておいてください。

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

---> <Paginator> 
     <Root> 

これは私がpackage.jsonに持っているものです

resolve: { 
    alias: { 
     'vue$': 'vue/dist/vue.esm.js' 
    }, 
    extensions: ['*', '.js', '.vue', '.json'] 
}, 

そして、これは次のとおりです：私は定義された以下のいるwebpack.configで

{ 
    "version": "1.0.0", 
    "scripts": { 
     "dev": "cross-env NODE_ENV=development webpack", 
     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 
    }, 
    "dependencies": { 
     "vue": "^2.4.4" 
     }, 
     "browserslist": [ 
      "> 1%", 
      "last 2 versions", 
      "not ie <= 8" 
     ], 
     "devDependencies": { 
      "babel-core": "^6.26.0", 
      "babel-loader": "^7.1.2", 
      "babel-polyfill": "^6.23.0", 
      "babel-preset-es2015": "^6.24.1", 
      "babel-preset-stage-2": "^6.0.0", 
      "babel-preset-vue-app": "^1.2.0", 
      "babel-plugin-transform-runtime": "^6.0.0", 
      "cross-env": "^5.0.5", 
      "css-loader": "^0.28.7", 
      "file-loader": "^1.1.4", 
      "fs": "^0.0.1-security", 
      "node-sass": "^4.5.3", 
      "sass-loader": "^6.0.6", 
      "vue-loader": "^13.0.5", 
       "vue-template-compiler": "^2.4.4", 
       "webpack": "^3.6.0", 
       "webpack-dev-server": "^2.9.1" 
      } 
     } 

私のメインのJSファイル：

import Vue from 'vue'; 

Vue.component('paginator', require('./components/Paginator.vue')); 

var vm = new Vue({ 
    el: '#root', 
    data: {} 
}); 

HTML：

<div id="root> 
     <paginator v-bind:total-items="totalItems" v-bind:page-size="query.pageSize" v-bind:page="query.page" v-on:pagechanged="onPageChange"></paginator> 

</div> 

任意のアイデアを、なぜこのエラーを取得イム？

次のように私は、コードを変更すると、ISは、しかし、私はグローバルなコンポーネントとしてページネータを登録するに動作するようです：

import Vue from 'vue'; 
import Paginator from './components/Paginator.vue'; 

var vm = new Vue({ 
    el: '#root', 
    components: { 
     'paginator': Paginator 
    }, 
    data: {} 
}); 

これはページネータコンポーネントです：

<template> 
    <div> 
     <div > 
      <nav> 
       <ul class="pagination"> 
        ... 
       </ul> 
      </nav> 
     </div> 
    </div> 



</template> 


<script> 


export default { 

     props: ['totalItems', 'pageSize', 'page'], 

     data: function() { 

      return { 
       currentPage: 1, 
      } 

     }, 
     computed: { 
      pages: function() { 
        this.currentPage = this.page; 
        var pageArray = []; 
        var pagesCount = Math.ceil(this.totalItems/this.pageSize); 

        for (var i = 1; i <= pagesCount; i++) 
         pageArray.push(i); 

        return pageArray; 
       } 
     }, 

     methods: { 

       changePage: function (page){ 

        this.currentPage = page; 
        this.$emit('pagechanged', page); 
       }, 

       previous: function(){ 
        if (this.currentPage == 1) 
         return; 

        this.currentPage--; 

        this.$emit('pagechanged', this.currentPage); 
       }, 

       next: function() { 
        if (this.currentPage == this.pages.length) 
         return; 

        this.currentPage++; 

        this.$emit('pagechanged', this.currentPage); 
       } 
      }, 
    } 

Answer 1

これはWebPACKのはrequireを組み合わせた方法の結果であります（CommonJS）とimport（ES6）モジュールのインポートスタイル。

私はいつもES6スタイルのimport構文を使用することをお勧めします。

あなたがrequireを使用する必要がある場合、その後、あなたは次のようにデフォルトのインポートを選択する必要があります：

：

Vue.component('paginator', require('./components/Paginator.vue').default); 
                   ^^^^^^^^ 

は、私は（それが標準化され、非WebPACKの固有の構文です）の代わりにES6 import構文を使用することをお勧めします

import Paginator from './components/Paginator.vue'; 
Vue.component('paginator', Paginator); 

import()の構文が働く理由は、this issueです。モジュールを別のファイルに分割し、Webpackによって非同期にダウンロードする場合は、import()のみを使用してください。

Answer 2

私はこの行が問題であると信じています - コンポーネント宣言内のrequireは、私がそれを使用するとうまく終了しませんでした。 編集：これに関する情報は@DecadeMoonの回答を参照してください。

Vue.component('paginator', require('./components/Paginator.vue')); 

推奨方法：

import Paginator from './components/Paginator.vue' 
Vue.component('paginator', Paginator); 

あなたはまた、WebPACKのは、非同期で、別のファイルのダウンロードにモジュールを分割するようになります次のいずれかを行うことができます（これは大型部品のために役立つことができます）

オプション1：

Vue.component('paginator',() => import('./components/Paginator.vue')); 

オプション2：

私はそれは私が文字列を渡すと、それを複数回入力することなく、ディレクトリをラップすることができますが、これは私が使用している機能の簡易版であるとして、これをラップロード機能を持っています：

function load (component) { 
    return() => import(component) 
} 

ので、それはなる：

Vue.component('paginator', load('./components/Paginator.vue'));