个人中心
gpt4 book ai didi

javascript - vueify:安装组件失败:模板或渲染函数未定义

转载 作者：行者123 更新时间：2023-12-02 13:53:46 24 4
gpt4 key购买 nike

我正在使用带有 browserify 和 vueify 的简单 vue.js 设置。

按照之前的指导，我还添加了 aliasify 作为依赖项，以便使用模板引擎。这是我的 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"
    }
  }
}

使用像这样的简单 View 模型设置，我可以看到引擎正在工作:

// 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)
  }
});

然后它给我以下输出:

Parsing file /home/sombriks/git/simple-vueify-setup/app.vue: 'import' and 'export' may only appear at the top level (15:0)

欢迎任何帮助。

完整的示例代码可以在 here 找到.

最佳答案

尝试安装一些 babel 包:

npm install babel-core babel-preset-es2015 babelify --save-dev`

将您的 browserify 配置更改为:

"browserify": {
  "transform": [
    "vueify",
    "babelify",
    "aliasify"
  ]
},

然后确保项目根目录中有一个 .babelrc 文件(与 package.json 位于同一目录)。其内容为:

{
  "presets": ["es2015"]
}

我还没有使用 aliasify 进行过测试，但如果没有它，这应该可以工作。

如果您正在寻找一种更简单的选择来构建自己的环境，请查看:https://github.com/vuejs/vue-cli browserify 高级设置随 vueify 一起提供并编译 ES6

关于javascript - vueify:安装组件失败:模板或渲染函数未定义，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40825777/

24 4 0
文章推荐： javascript - 如何通过复选框选择修改数组(只需修改一些内容就可以了)
文章推荐： unity-game-engine - 在unity3D中显示html
文章推荐： eclipse - 如何使用Eclipse中的自动换行功能？
文章推荐： javascript - Bluebird .map promise 提前结束？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com