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

时间：2017-06-21 13:09:57

标签： javascript vue.js components browserify

好的，所以我正在尝试使用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

现在，该命令工作时没有给我任何错误...但是当我尝试在浏览器中预览页面时，我在控制台中收到以下消息：

  

无法安装组件：模板或渲染函数未定义

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

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

1 个答案:

答案 0 :(得分：0)

好的，花了大约一天拉我的头发，我终于弄明白发生了什么。问题最终是......编译命令中的 !!!

这是我正在做的事情：

  

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选项错误输出，因为代码得到了＆＃34; vueified＆＃34;两次，导致各种奇怪的错误，包括一直困扰我的错误。所以最后，唯一需要做的就是：

  

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

我希望将来可以帮助某人。

相关问题
最新问题