vueify:未能装入组件:模板或呈现函数未定义
vueify:未能装入组件:模板或呈现函数未定义
提问于 2016-11-27 04:34:23
我使用了一个简单的vue.js设置，带有浏览器化和vueify。
按照以前的指导，我还添加了别名作为依赖项，以便使用模板引擎。这是我的package.json文件：
{
"name": "simple-vueify-setup",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "budo index.js:build.js --open --live"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"vue": "^2.1.3"
},
"devDependencies": {
"aliasify": "^2.1.0",
"browserify": "^13.1.1",
"budo": "^9.2.2",
"vueify": "^9.3.0"
},
"browserify": {
"transform": [
"vueify",
"aliasify"
]
},
"aliasify": {
"aliases": {
"vue": "vue/dist/vue.common.js"
}
}
}使用这样一个简单的视图模型设置，我可以看到引擎在工作：
// index.js
var Vue = require("vue");
new Vue({
el: '#mountpoint',
data: {
message: 'Hello Vue!'
}
});html文件如下：
<!DOCTYPE html>
<html>
<head>
<title>Sample vueify</title>
</head>
<bod>
<div id="mountpoint">
{{message}}
</div>
<script type="text/javascript" src="build.js"></script>
</bod>
</html>但是，如果我尝试使用.vue文件和呈现函数，它将无法工作：
// app.vue
<style>
.red {
color: #f00;
}
</style>
<template>
<h1 class="red">{{msg}}</h1>
</template>
<script>
export default {
data () {
return {
msg: 'Hello world!'
}
}
}
</script>还有修改后的index.js文件：
var Vue = require("vue");
var App = require("./app.vue");
new Vue({
el: '#mountpoint',
render: function (createElement) {
return createElement(App)
}
});然后，它给出了以下输出：
解析文件/home/sombriks/git/simple-vueify-setup/app.vue：‘导入’和‘导出’只能出现在顶层(15:0)
欢迎任何帮助。
整个示例代码都可以找到这里。
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-11-27 09:28:26
尝试安装一些babel软件包：
npm install babel-core babel-preset-es2015 babelify --save-dev`将browserify配置更改为：
"browserify": {
"transform": [
"vueify",
"babelify",
"aliasify"
]
},然后确保您的项目根目录中有一个.babelrc文件(与package.json相同的目录)。它的内容如下：
{
"presets": ["es2015"]
}我还没有用别名进行测试，但如果没有它，这应该是可行的。
如果您想要一个更简单的脚手架选项，那么您自己的环境检查：https://github.com/vuejs/vue-cli，浏览器化高级设置，附带vueify并编译ES6
Stack Overflow用户
发布于 2016-11-27 04:49:49
由于一些未知的原因，如果我将.vue组件更改为：
// app.vue
<style>
.red {
color: #f00;
}
</style>
<template>
<h1 class="red">{{msg}}</h1>
</template>
<script>
module.exports = {
data: () => {
return {
msg: 'Hello world!'
}
}
}
</script>这可能暂时解决我的问题，但我仍然不明白为什么会发生这种情况。每个资源都使用脚本部件的现代语法记录.vue模板。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40825777
复制相关文章
相似问题
腾讯云开发者
