无法使用我编译的单文件组件

Question

好吧，我正在尝试使用 vue.js 来使用单个文件组件进行模板化，但我不得不承认我被卡住了。到目前为止，这是我所拥有的：

Hello.vue:

<template>
<p>{{ greeting }} World!!</p>
</template>

<script>
    export default {
        data: function(){
            return {
                greeting: 'Hello'
            }
        }
    }
</script>

<style scoped>
    p {
        font-size: 2em;
        text-align: center;
    }
</style>

main.js

import Hello from './hello.vue'

new Vue({
  el: '#app',
  render: function(h) {return h(Hello); }
});

index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <title>Title</title>
  <script src="js/vue.js"></script>
</head>

<body>
  <div id="app"></div>

  <script src="build/hello.js"></script>
</body>
</html>

package.json

{
  "name": "hello",
  "version": "1.0.0",
  "description": "un test",
  "main": "hello.js",
  "dependencies": {},
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-preset-es2015": "^6.24.1",
    "babelify": "^7.3.0",
    "browserify-shim": "^3.8.14",
    "vueify": "^9.4.1"
  },
  "browserify": {
    "transform": [
      "babelify",
      "vueify",
      "browserify-shim"
    ]
  },
  "browserify-shim": {
    "./js/vue.js": "vue",
    "vue": "global:Vue"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "tobbi filteau",
  "license": "ISC",
  "repository": {}
}

hello.js

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
var Vue // late bind
var version
var map = window.__VUE_HOT_MAP__ = Object.create(null)
var installed = false
var isBrowserify = false
var initHookName = 'beforeCreate'

exports.install = function (vue, browserify) {
  if (installed) return
  installed = true

  Vue = vue.__esModule ? vue.default : vue
  version = Vue.version.split('.').map(Number)
  isBrowserify = browserify

  // compat with < 2.0.0-alpha.7
  if (Vue.config._lifecycleHooks.indexOf('init') > -1) {
    initHookName = 'init'
  }

  exports.compatible = version[0] >= 2
  if (!exports.compatible) {
    console.warn(
      '[HMR] You are using a version of vue-hot-reload-api that is ' +
      'only compatible with Vue.js core ^2.0.0.'
    )
    return
  }
}

/**
 * Create a record for a hot module, which keeps track of its constructor
 * and instances
 *
 * @param {String} id
 * @param {Object} options
 */

exports.createRecord = function (id, options) {
  var Ctor = null
  if (typeof options === 'function') {
    Ctor = options
    options = Ctor.options
  }
  makeOptionsHot(id, options)
  map[id] = {
    Ctor: Vue.extend(options),
    instances: []
  }
}

/**
 * Make a Component options object hot.
 *
 * @param {String} id
 * @param {Object} options
 */

function makeOptionsHot (id, options) {
  injectHook(options, initHookName, function () {
    map[id].instances.push(this)
  })
  injectHook(options, 'beforeDestroy', function () {
    var instances = map[id].instances
    instances.splice(instances.indexOf(this), 1)
  })
}

/**
 * Inject a hook to a hot reloadable component so that
 * we can keep track of it.
 *
 * @param {Object} options
 * @param {String} name
 * @param {Function} hook
 */

function injectHook (options, name, hook) {
  var existing = options[name]
  options[name] = existing
    ? Array.isArray(existing)
      ? existing.concat(hook)
      : [existing, hook]
    : [hook]
}

function tryWrap (fn) {
  return function (id, arg) {
    try { fn(id, arg) } catch (e) {
      console.error(e)
      console.warn('Something went wrong during Vue component hot-reload. Full reload required.')
    }
  }
}

exports.rerender = tryWrap(function (id, options) {
  var record = map[id]
  if (!options) {
    record.instances.slice().forEach(function (instance) {
      instance.$forceUpdate()
    })
    return
  }
  if (typeof options === 'function') {
    options = options.options
  }
  record.Ctor.options.render = options.render
  record.Ctor.options.staticRenderFns = options.staticRenderFns
  record.instances.slice().forEach(function (instance) {
    instance.$options.render = options.render
    instance.$options.staticRenderFns = options.staticRenderFns
    instance._staticTrees = [] // reset static trees
    instance.$forceUpdate()
  })
})

exports.reload = tryWrap(function (id, options) {
  var record = map[id]
  if (options) {
    if (typeof options === 'function') {
      options = options.options
    }
    makeOptionsHot(id, options)
    if (version[1] < 2) {
      // preserve pre 2.2 behavior for global mixin handling
      record.Ctor.extendOptions = options
    }
    var newCtor = record.Ctor.super.extend(options)
    record.Ctor.options = newCtor.options
    record.Ctor.cid = newCtor.cid
    record.Ctor.prototype = newCtor.prototype
    if (newCtor.release) {
      // temporary global mixin strategy used in < 2.0.0-alpha.6
      newCtor.release()
    }
  }
  record.instances.slice().forEach(function (instance) {
    if (instance.$vnode && instance.$vnode.context) {
      instance.$vnode.context.$forceUpdate()
    } else {
      console.warn('Root or manually mounted instance modified. Full reload required.')
    }
  })
})

},{}],2:[function(require,module,exports){
(function (global){
var __vue__options__ = (typeof module.exports === "function"? module.exports.options: module.exports)
if (module.hot) {(function () {  var hotAPI = require("vue-hot-reload-api")
  hotAPI.install((typeof window !== "undefined" ? window['Vue'] : typeof global !== "undefined" ? global['Vue'] : null), true)
  if (!hotAPI.compatible) return
  module.hot.accept()
  if (!module.hot.data) {
    hotAPI.createRecord("data-v-af3c7d92", __vue__options__)
  } else {
    hotAPI.reload("data-v-af3c7d92", __vue__options__)
  }
})()}
}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
},{"vue-hot-reload-api":1}],3:[function(require,module,exports){
'use strict';

var _hello = require('./hello.vue');

var _hello2 = _interopRequireDefault(_hello);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

new Vue({
  el: '#app',
  render: function render(h) {
    return h(_hello2.default);
  }
});

},{"./hello.vue":2}]},{},[3]);

现在，我要做的基本上是使用此命令编译我的组件：

browserify -t vueify -e src/main.js -o build/hello.js

现在，该命令可以正常运行而不会出现任何错误...但是当我尝试在浏览器中预览页面时，我在控制台中收到以下消息：

Failed to mount component: template or render function not defined

谁能告诉我我做错了什么？我四处搜索了很多，但到目前为止我还没有找出可能导致我的问题的原因。

编辑：添加了编译文件并稍微更改了我的渲染语法，但错误仍然存在。困扰我的是，尽管我的浏览器告诉我它不存在，但我可以在编译文件中看到渲染函数。

Answer 1

好吧，我花了大约一天的时间拔头发，我终于弄明白是怎么回事了。问题最终是... 在我的编译命令中！！！

这是我正在做的事情：

browserify -t vueify -e src/main.js -o build/hello.js

但是，在 package.json 文件中，我指定了这个：

"browserify": {
    "transform": [
      "babelify",
      "vueify", //Hey, aren't I already in the compilation command?
      "browserify-shim"
    ]
  },

您会注意到所有必要的转换都已经定义。所以这使得编译命令中的 -t vueify 选项出错，因为代码得到 "vueified" 两次，导致各种奇怪的错误，包括一直困扰我的错误。所以最后，唯一需要做的是：

browserify -e src/main.js -o build/hello.js

我希望这对以后的人有所帮助。

无法使用我编译的单文件组件

Cannot use my compiled single file component

javascript

components

browserify

vue.js