[英]Simple Vue component not rendering
I am trying to learn Vue.JS, and the component I have made is not rendering on the page.我正在尝试学习Vue.JS,我制作的组件没有在页面上呈现。 This is my component:
这是我的组件:
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.'
}
})
This is my html:这是我的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>
And this is package.json (I realize most of the dependencies belong in devDependencies):这是 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": {}
}
When I load index.html in the browser, all it renders is {{ title }} and I am receiving no errors.当我在浏览器中加载 index.html 时,它呈现的只是 {{ title }} 并且我没有收到任何错误。 Any explanation as to why this is happening would be appreciated!
任何关于为什么会发生这种情况的解释将不胜感激!
vueify
only transforms *.vue
files, if you are going to use templating in your index.html
then you need Vue compiler in order to compile the template in the browser ( https://v2.vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only ). vueify
仅转换*.vue
文件,如果您要在index.html
中使用模板,那么您需要 Vue 编译器才能在浏览器中编译模板( https://v2.vuejs.org/v2/guide/installation .html#Runtime-Compiler-vs-Runtime-only )。
A good way to have things like that covered is to use a vuejs-template
, if you are using Browserify there is one: https://github.com/vuejs-templates/browserify涵盖此类内容的一个好方法是使用
vuejs-template
,如果您使用的是 Browserify ,则有一个: https ://github.com/vuejs-templates/browserify
But as you have almost everything up, you can only add what's missing for the compiler package, as stated in "Runtime + Compiler vs. Runtime-only" - "Browserify" section in Vue guide.但是由于几乎所有内容都已准备就绪,因此您只能添加编译器包中缺少的内容,如 Vue 指南中的“运行时 + 编译器与仅运行时”-“浏览器化”部分所述。
Add to your package.json
:添加到您的
package.json
:
{
"browser": {
"vue": "vue/dist/vue.common.js"
},
}
That will tell Browserify to use the full (also called standalone) Vue build on browser.这将告诉 Browserify 在浏览器上使用完整的(也称为独立的)Vue 构建。
Another way is to not use templates in index.html
but instead in a main component, like App.vue
, for that you check out the template I linked above, it does it out of the box.另一种方法是不在
index.html
中使用模板,而是在主组件中使用,例如App.vue
,因为您可以查看我上面链接的模板,它是开箱即用的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.