0
私はVue 2.0スタンドアロンを使用していますが、Slotのコンポーネントに問題があります。常にスロット内のデフォルト値をレンダリングします。カスタムコンポーネントVue 2.0レンダリングのconentスロットがありません
package.json
{
"name": "web-components",
"description": "A Vue.js project",
"author": "",
"private": true,
"scripts": {
"watchify": "watchify -vd -p browserify-hmr -e src/main.js -o dist/build.js",
"serve": "http-server -o -c 1 -a localhost",
"dev": "npm-run-all --parallel watchify serve",
"lint": "eslint --ext .js,.vue src test/unit",
"test": "karma start karma.conf.js",
"build": "cross-env NODE_ENV=production browserify -g envify -p [ vueify/plugins/extract-css -o dist/build.css ] -e src/main.js | uglifyjs -c warnings=false -m > dist/build.js"
},
"browserify": {
"transform": [
"vueify",
"babelify"
]
},
"aliasify": {
"aliases": {
"vue": "vue/dist/vue"
}
},
"dependencies": {
"vue": "^2.0.1"
},
"devDependencies": {
"aliasify": "^2.0.0",
"babel-core": "^6.0.0",
"babel-plugin-transform-runtime": "^6.0.0",
"babel-preset-es2015": "^6.0.0",
"babel-preset-stage-2": "^6.0.0",
"babel-runtime": "^6.0.0",
"babelify": "^7.2.0",
"browserify": "^13.1.0",
"browserify-hmr": "^0.3.1",
"cross-env": "^2.0.0",
"envify": "^3.4.1",
"eslint": "^3.3.0",
"eslint-config-standard": "^5.3.5",
"eslint-plugin-html": "^1.5.2",
"eslint-plugin-promise": "^2.0.1",
"eslint-plugin-standard": "^2.0.0",
"http-server": "^0.9.0",
"jasmine-core": "^2.4.1",
"karma": "^1.2.0",
"karma-browserify": "^5.1.0",
"karma-jasmine": "^1.0.2",
"karma-phantomjs-launcher": "^1.0.0",
"karma-spec-reporter": "0.0.26",
"npm-run-all": "^2.3.0",
"phantomjs-prebuilt": "^2.1.3",
"proxyquireify": "^3.0.1",
"uglify-js": "^2.5.0",
"vueify": "^9.0.0",
"watchify": "^3.4.0"
}
}
main.js
//this show Failed to mount component: template or render function not defined.
//import Vue from 'vue/dist/vue'
import Vue from 'vue'
import Hello from './components/Hello.vue'
Vue.component('Hello',Hello)
new Vue({ // eslint-disable-line no-new
el: '#app'
});
Hello.vue
<template>
<div id="hello">
<h1>{{ msg }}</h1>
<slot>defect</slot>
</div>
</template>
<script>
export default {
name: 'hello',
data() {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
index.htmlを
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>web-components</title>
<link rel="stylesheet" href="dist/build.css">
</head>
<body>
<div id="app">
<hello><label>change value</label></hello>
</div>
<script src="dist/build.js"></script>
</body>
</html>
EDIT： npmを使用する場合は、nrpmの代わりにrun buildを実行します。これはうまく動作します。
コンソールに何かエラーがありますか？私はちょうどフィドルを作ったし、うまくいくようです：https://jsfiddle.net/s0xkewgb/ –
コンソールにエラーはありません。テンプレートを文字列として使用するとこの作業はできますが、ファイルは.vue – rv4
ここにリポジトリの問題があります https://github.com/eugenio4/vue-slot – rv4