我想学习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}},我没有收到任何错误。任何解释为什么发生这种情况将不胜感激!
你使用Vue + Compiler包吗?发布你的'package.json'。 – yuriy636
我认为vueify会完成这项工作,但我会发布整个package.json。 –