Question

我要做什么

我正在为vue.js编写插件，专门用于vue-cli。此插件导入3个.vue单个文件组件，并使用Vue.component（）在安装功能中注册它们。我希望能够使用npm install将此插件安装到任何基于npm的项目中，并要求该模块公开安装功能。

我到目前为止所做的事情

我有两个项目：一个是实际的模块，另一个是使用此模块的测试项目。

模块：https://github.com/fearedserpent/vue-drama-lite

测试项目：https://github.com/fearedserpent/vue-drama-lite-test

模块中的main.js文件导入1个.vue文件，并使用它在安装功能中注册组件。此功能默认导出。

import dlCurtain from './components/dlCurtain.vue';

export default {
  install(Vue) {
    //Register component
    Vue.component('dl-curtain', dlCurtain);
    console.log('vue-drama-lite installed!');
  }
}

由于没有Webpack和vue-loader无法加载.vue文件，因此我构建了这个main.js文件并输出bundle.js文件。这是我的webpack配置：

const webpack = require('webpack');
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
  mode: 'development',
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    library: 'vueDramaLite',
    libraryTarget: 'umd'
  },
  module: {
    rules: [
      // {
      //     test: /\.js/,
      //     loaders: ['babel-loader'],
      //     exclude: /node_modules/,
      // },
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ],
        exclude: /node_modules/,
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: [
      '.js',
      '.vue'
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
}

然后，在package.json文件中，npm读取该文件，我为这个新建的bundle.js文件指定“ main”。这是package.json：

{
  "name": "@impaction/vue-drama-lite",
  "version": "1.0.0",
  "description": "",
  "main": "dist/bundle.js",
  "dependencies": {},
  "devDependencies": {
    "css-loader": "^2.1.0",
    "vue-loader": "^15.6.2",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.6.6",
    "webpack": "^4.29.3",
    "webpack-cli": "^3.2.3"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack "
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/fearedserpent/vue-drama-lite.git"
  },
  "author": "Shashank Rajesh",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/fearedserpent/vue-drama-lite/issues"
  },
  "homepage": "https://github.com/fearedserpent/vue-drama-lite#readme"
}

问题是什么

最后，在我的测试项目中，我在安装该模块后将其导入并尝试使用它。但是，控制台出现错误：

vue.runtime.esm.js?2b0e:5046 Uncaught TypeError: Cannot read property 'install' of undefined
    at Function.Vue.use (vue.runtime.esm.js?2b0e:5046)
    at eval (main.js?56d7:7)
    at Module../src/main.js (app.js:3126)
    at __webpack_require__ (app.js:767)
    at fn (app.js:130)
    at Object.0 (app.js:3187)
    at __webpack_require__ (app.js:767)
    at app.js:902
    at app.js:905

由于某些原因，模块未定义！没什么了，因为如果我在node.js中运行相同的模块，那么一切都将完美加载。花了几个小时试图弄清楚这一点之后，我放弃了。有人可以告诉我我做错了什么吗？

仅当导入vue-cli项目

0 个答案: