没有捆绑器的情况下如何在Nw.js项目中使用Vue.js?

I'm building an application using NW.js and Vue.js.

我不想使用任何编译器/捆绑器等。

I've installed Vue.js library via npm, and trying to use it via require, but it's not being rendered (although, I see console logs that are happening on created and mounted callbacks, but webpage is blank, and <div id="app"></div> is empty.

我的代码:

  • index.html (entry point of the nw.js app):
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
</head>
  <body>
    <div id="app">ww</div>
    <script src="/src/app.js"></script>
  </body>
</html>
  • app.js file:
// const Vue = require('vue/dist/vue.common.dev.js');
// const Vue = require('vue/dist/vue.common.prod.js');
// const Vue = require('vue/dist/vue.common.js');
// const Vue = require('vue');
const Vue = require('vue/dist/vue.js');

const hello = Vue.component('hello', {
  data () {
    return {
      hi: 'Well, hello there!'
    }
  },
  template: '<div>uu {{ hi }}</div>',
  created () {
    console.log('Created!');
  },
  mounted () {
    console.log('Mounted!');
  }
});

new Vue({
  el: '#app',
  components: { hello },
  render : h => h(hello),
});

如您所见,我已经尝试了Vue.js的各种源,但是它们都没有做任何更改-我看到了两个控制台日志,但是没有呈现任何内容。

I've made it work only, when I've added Vue.js source via CDN in index.html file (you see it commented in the code above) - but how can I use the same file but via local require() from node_modules ?

作为一种技巧,我可以从CDN下载Vue.js文件的内容并在本地加载,但是我宁愿使用基于npm的源。

评论
  • 我幻成殇
    我幻成殇 回复

    vue cdn经过优化,可在不使用捆绑软件的情况下使用,但是当您使用npm版本时,它需要捆绑软件来进行内部工作,请尝试在nw.js中使用节点集成设置

    但是我仍然希望您使用捆绑软件,因为它们可以优化构建大小,还可以使用vue-cli提供的nw插件