vueify：無法裝入組件：模板或渲染函數未定義

Question

我正在使用帶有瀏覽器驗證和vueify的簡單vue.js設置。

按照先前的指導，我還添加了別名作為依賴項，以利用模板引擎。 這是我的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）

歡迎任何幫助。

完整的示例代碼可以在這里找到。

Answer 1

嘗試安裝一些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

Answer 2

由於某些未知的原因，如果我將.vue componente更改為此，它將起作用：

// app.vue
<style>
  .red {
    color: #f00;
  }
</style>

<template>
  <h1 class="red">{{msg}}</h1>
</template>

<script>
module.exports = {
  data: () => {
    return {
      msg: 'Hello world!'
    }
  }
}
</script>

它可能暫時解決我的問題，但是我仍然不明白為什么會這樣。 每個資源都使用腳本部分的現代語法來記錄.vue模板。

vueify：無法裝入組件：模板或渲染函數未定義

問題描述

2 個解決方案

解決方案1
2 已采納 2016-11-27 09:28:26

解決方案2
0 2016-11-27 04:49:49

vueify：無法裝入組件：模板或渲染函數未定義

問題描述

2 個解決方案

解決方案1 2 已采納 2016-11-27 09:28:26

解決方案2 0 2016-11-27 04:49:49

解決方案1
2 已采納 2016-11-27 09:28:26

解決方案2
0 2016-11-27 04:49:49