Vue 2.0沒有渲染錐槽

我正在使用Vue 2.0獨立，我有一個與插槽組件的問題。始終在插槽內呈現默認值。決不呈現的自定義組件裏面的內容Vue 2.0沒有渲染錐槽

的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>

編輯：如果我使用npm run build而不是nrpm run dev。這工作很好。

來源

2016-10-18 rv4

你是否在控制檯中發現錯誤？我只是做了一個小提琴，它似乎工作正常：https://jsfiddle.net/s0xkewgb/ –

在控制檯沒有錯誤。使用模板作爲字符串這個工作，但沒有與文件.vue – rv4

這裏存儲庫的問題 https://github.com/eugenio4/vue-slot – rv4

這很可能是您使用「僅限運行時」版本。如果你使用的是，那麼你的所有模板必須在Vue文件中。由於您的應用模板位於index.html，因此無法使用。因此，將您的應用程序模板放入Vue文件並渲染該文件或使用「Runtime + Compiler」版本。你可以在這裏閱讀更多關於：http://vuejs.org/guide/installation.html#Standalone-vs-Runtime-only-Build

來源

2016-10-18 13:43:15

我使用vue-cli與browserify模式獨立，我需要它。 – rv4

Vue 2.0沒有渲染錐槽

回答

相關問題