Question

我正在使用独立的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。这工作很好。

Answer 1

您可能正在使用“仅运行时”构建。如果您正在使用它，则所有模板必须位于Vue文件中。由于您的应用模板位于"Data Source=.\SQLEXPRESS;Integrated Security=True;"，因此无效。因此，要么将您的应用程序模板放入Vue文件并进行渲染，要么使用“运行时+编译器”构建。您可以在此处详细了解：http://vuejs.org/guide/installation.html#Standalone-vs-Runtime-only-Build

Vue 2.0没有渲染conent插槽

1 个答案: