簡單Vue組件不呈現

我想學習Vue.JS，並且我所做的組件不是在頁面上呈現。這是我的組件：簡單Vue組件不呈現

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}}，我沒有收到任何錯誤。任何解釋爲什麼發生這種情況將不勝感激！

來源

2017-08-30 Nic Bonetto

你使用Vue + Compiler包嗎？發佈你的'package.json'。 – yuriy636

我認爲vueify會完成這項工作，但我會發布整個package.json。 –

vueify只轉換*.vue文件，如果你要在你的index.html使用的模板，那麼你需要的Vue編譯器爲了編譯瀏覽器（https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only）的模板。

一個好辦法有這樣的事情覆蓋是使用vuejs-template，如果您正在使用Browserify有一個：https://github.com/vuejs-templates/browserify

但是當你有幾乎一切，你只能添加缺少了什麼編譯器如Vue指南中的「Runtime + Compiler vs. Runtime-only」 - 「Browserify」部分所述。

添加到您的package.json：

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

會告訴Browserify使用完整的（也稱爲獨立）Vue公司建立在瀏覽器中。

另一種方式是在index.html而是在主要成分不使用模板，像App.vue，對於你看看我上面鏈接的模板，它是開箱即用。

來源

2017-08-30 20:17:12 yuriy636

謝謝你，很好的解釋。 –

簡單Vue組件不呈現

回答

相關問題