从 JS 文件中获取 Vue

Question

我对现代前端开发工具还很陌生。我安装了 Nodejs 和 NPM。下载了一些软件包（es："jquery"）并且一切正常。然后我安装了 Webpack（第 2 版），我创建了这个演示配置文件

module.exports = {
   entry: "./entry.js",
   output: {
       path: __dirname,
       filename: "bundle.js"
   }
};

在我的JS入口点（entry.js）我可以成功使用jQuery模块，如下

var $ = require("jquery");
$('#test').html('Changed!');

一切正常。当我选择 Vue 时，问题就出现了。我安装它

npm install vue --save

然后使用它

var Vue = require("vue");
var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    }
});

我不知道如何导入然后使用构造函数。我写的分明不可能是对的！事实上我得到了这个错误

TypeError: Vue is not a constructor

我错过了什么？（注意：我没有使用任何其他工具，只有 Nodejs + NPM + Webpack2，如果可能的话，我想继续只使用这三个工具）。

谢谢，马可

Answer 1

Vue 提供了一个 ES 模块供 webpack 使用。您期望的构造函数是默认导出，但 require 的工作方式略有不同，因此您需要在导入时访问 default 属性。

var Vue = require('vue').default;

或者你可以使用 webpack 支持的导入语法。等效导入是：

import Vue from 'vue';

Answer 2

//fullscreenchange//
document.addEventListener('fullscreenchange', () => {
  isFullscreen.value = !!document.fullscreenElement;
})

//onDrop in MyDropZone//
const file = event.dataTransfer.files[0];
  const reader = new FileReader();
  reader.readAsText(file, 'UTF-8')
  reader.onload = function (evt) {
    parseTextToItems(evt.target.result)
  }

//onDrop in MyTable//
let toSwap = {}
  props.items.filter(x => {
    if (x.cellID === cellID)
      toSwap = x
  })

  let items = props.items.map(x => {
    if (x.id === itemID)
    {
      toSwap.cellID = x.cellID
      x.cellID = cellID
    }
    return x
  })

  items = items.map(x => {
    if (x.id === toSwap.id)
      x.cellID = toSwap.cellID
    return x
  })


function buildExportText() {
  let text = "# VIP List \n \n"

  tableData.value.forEach(row => {
    row.forEach(cell => {
      let item = items.value.filter(x => {
        if (x.cellID === cell.id)
          return x
      })[0] || {};
      text += `- ${item.name || ''}\n`
    })
  })

  return text
}

function download(data, name = "VIP_data.txt") {
  const blob = new Blob([data], {type: "octet-stream"});
  const href = URL.createObjectURL(blob);

  const a = Object.assign(
      document.createElement('a'), {
        href,
        style: "display:none",
        download: name
      });

  a.click();
  a.remove();
  URL.revokeObjectURL(href);
}

//To copy//
navigator.clipboard.writeText(this.buildExportText());

从 JS 文件中获取 Vue

Require Vue from JS file

javascript

npm

webpack

vue.js

web-frontend