vueify：コンポーネントのマウントに失敗しました：テンプレートまたはレンダリング関数が定義されていません

私はbrowserifyとvueifyで単純なvue.js設定を使用しています。vueify：コンポーネントのマウントに失敗しました：テンプレートまたはレンダリング関数が定義されていません

私はテンプレートエンジンを利用するために依存関係としてaliasifyを追加しました。ここに私のpackage.jsonファイルです：

は

// index.js 
var Vue = require("vue"); 

new Vue({ 
    el: '#mountpoint', 
    data: { 
    message: 'Hello Vue!' 
    } 
});

たHTML文書は、次のとおりです：

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Sample vueify</title> 
    </head> 
    <bod> 
    <div id="mountpoint"> 
     {{message}} 
    </div> 
    <script type="text/javascript" src="build.js"></script> 
    </bod> 
</html>

場合は、次のように単純なビュー・モデルのセットアップを使用して

{ 
    "name": "simple-vueify-setup", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "scripts": { 
    "dev": "budo index.js:build.js --open --live" 
    }, 
    "keywords": [], 
    "author": "", 
    "license": "ISC", 
    "dependencies": { 
    "vue": "^2.1.3" 
    }, 
    "devDependencies": { 
    "aliasify": "^2.1.0", 
    "browserify": "^13.1.1", 
    "budo": "^9.2.2", 
    "vueify": "^9.3.0" 
    }, 
    "browserify": { 
    "transform": [ 
     "vueify", 
     "aliasify" 
    ] 
    }, 
    "aliasify": { 
    "aliases": { 
     "vue": "vue/dist/vue.common.js" 
    } 
    } 
}

私は、エンジンの作業を見ることができますしかし、私は.vueファイルとレンダリング機能を使用しようとすると動作しません：

// app.vue 
<style> 
    .red { 
    color: #f00; 
    } 
</style> 

<template> 
    <h1 class="red">{{msg}}</h1> 
</template> 

<script> 
export default { 
    data() { 
    return { 
     msg: 'Hello world!' 
    } 
    } 
} 
</script>

そしてファイルindex.jsが変更されます。

var Vue = require("vue"); 
var App = require("./app.vue"); 

new Vue({ 
    el: '#mountpoint', 
    render: function (createElement) { 
    return createElement(App) 
    } 
});

それは私に次のような出力が得られます。

ファイルは/ home/sombriks/gitの/簡易vueifyセットアップ/アプリの解析

.vue： 'import' 'エクスポート'はトップレベル（15：0）にのみ表示されます。

サンプルコード全体はhereです。私はこれに.vue componenteを変更した場合、それが動作するいくつかの未知の理由

出典

2016-11-27 Sombriks

てみインストール数バベルパッケージ：package.jsonとしてあなたのプロジェクトのルートに.babelrcファイルを持っていることを確認（同じディレクトリを作りその後

"browserify": { 
    "transform": [ 
    "vueify", 
    "babelify", 
    "aliasify" 
    ] 
},

：

npm install babel-core babel-preset-es2015 babelify --save-dev`

はにあなたのbrowserify設定を変更します）。内容は次のとおりです：

私はaliasifyでテストしていませんが、これはうまくいきます。

あなたがチェックアウト独自の環境を足場にするより簡単にオプションの後にしている場合：https://github.com/vuejs/vue-cli browserifyはセットアップ進んvueify付属しており、ES6

出典

2016-11-27 09:28:26 GuyC

をコンパイルGuyCありがとう、私はVUE-cliのを見て、私はそれを考え出しました確かにバベルの欠如が問題でした。たとえaliasifyであってもゼロの喪失で削除することができます。 – Sombriks

：

// app.vue 
<style> 
    .red { 
    color: #f00; 
    } 
</style> 

<template> 
    <h1 class="red">{{msg}}</h1> 
</template> 

<script> 
module.exports = { 
    data:() => { 
    return { 
     msg: 'Hello world!' 
    } 
    } 
} 
</script>

これがなぜ起こるかしかし、私はまだ理解していない、一瞬のために私の問題を解決することがあります。すべてのリソースは、スクリプト部分の最新の構文を使用して.vueテンプレートを記録します。

出典

2016-11-27 04:49:49 Sombriks

vueify：コンポーネントのマウントに失敗しました：テンプレートまたはレンダリング関数が定義されていません

答えて

関連する問題