简单的 Vue 组件不渲染

Question

我正在尝试学习Vue.JS，我制作的组件没有在页面上呈现。 这是我的组件：

import Vue from 'vue'

const card = new Vue({
  el: '#card',
  data: {
    title: 'Dinosaurs',
    content: '<strong>Dinosaurs</strong> are a diverse group of animals 
from the clade <em>Dinosauria</em> that first appeared at the Triassic 
period.'
  }
})

这是我的html：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Vue Practice</title>
  </head>
  <body>
    <div id="card">
      <header>{{ title }}</header>
      <div v-html="content"></div>
    </div>
    <script src="bundle.js"></script>
  </body>
</html>

这是 package.json（我意识到大多数依赖项都属于 devDependencies）：

    {
      "name": "vue-practice",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "bundle": "browserify -t babelify -t vueify -e main.js > 
                   bundle.js",
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "keywords": [],
      "author": "",
      "license": "ISC",
      "dependencies": {
        "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
        "babelify": "^7.3.0",
        "browserify": "^14.4.0",
        "vue": "^2.4.2",
        "vueify": "^9.4.1"
      },
      "devDependencies": {}
    }

当我在浏览器中加载 index.html 时，它呈现的只是 {{ title }} 并且我没有收到任何错误。 任何关于为什么会发生这种情况的解释将不胜感激！

Answer 1

vueify仅转换*.vue文件，如果您要在index.html中使用模板，那么您需要 Vue 编译器才能在浏览器中编译模板（ https://v2.vuejs.org/v2/guide/installation .html#Runtime-Compiler-vs-Runtime-only ）。

涵盖此类内容的一个好方法是使用vuejs-template ，如果您使用的是 Browserify ，则有一个： https ://github.com/vuejs-templates/browserify

但是由于几乎所有内容都已准备就绪，因此您只能添加编译器包中缺少的内容，如 Vue 指南中的“运行时 + 编译器与仅运行时”-“浏览器化”部分所述。

添加到您的package.json ：

{
    "browser": {
        "vue": "vue/dist/vue.common.js"
    },
}

这将告诉 Browserify 在浏览器上使用完整的（也称为独立的）Vue 构建。

另一种方法是不在index.html中使用模板，而是在主组件中使用，例如App.vue ，因为您可以查看我上面链接的模板，它是开箱即用的。

简单的 Vue 组件不渲染

问题描述

1 个解决方案

解决方案1
2 已采纳 2017-08-30 20:17:12

简单的 Vue 组件不渲染

问题描述

1 个解决方案

解决方案1 2 已采纳 2017-08-30 20:17:12

解决方案1
2 已采纳 2017-08-30 20:17:12