В Vue 2.0 нет слота для рендеринга

#vue.js

Вопрос:

Я использую 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'
});

Привет.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. Это работает нормально.

1. Вы получаете какие-либо ошибки в консоли? Я только что сделал скрипку, и, похоже, она работает нормально: jsfiddle.net/s0xkewgb

2. В консоли нет ошибки. С шаблонами в виде строки это работает, но не с files .vue

3. здесь репозиторий с проблемой github.com/eugenio4/vue-slot

4. Попробуйте добавить aliasify к вашему browserify преобразованию в package.json

5. О, на самом деле я вижу, что у вас уже есть это на вашем github.

Ответ №1:

Скорее всего, вы используете сборку «только для времени выполнения». Если вы используете это, то все ваши шаблоны должны быть в файлах Vue. Поскольку шаблон вашего приложения находится в index.html , он не будет работать. Так что либо поместите шаблон вашего приложения в файл Vue и отобразите его, либо используйте сборку «Среда выполнения компилятор». Подробнее об этом можно прочитать здесь: http://vuejs.org/guide/installation.html#Standalone-vs-Runtime-only-Build