用vue webpack-simple 怎么打包组件,才能直接使用

我想自己做一个vue组件,但想单独提出来,可以放到其它项目里,其它项目是用cdn那个方式,所以我要做一个像JQ一样的插件一样,只要引用vue.js 和我编译好的组件就可以使用了。
可惜我看按官网来用webpack-simple 打包出来找不到变量

clipboard.png

webpack.confing.js

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/uiCaseader/index.js',
  output: {
    path: path.resolve(__dirname, 'F:/mySpace/myGit/xxx/Public/Wj/app/js'),
    publicPath: '/dist/',
    filename: 'uiCaseader.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ],
      },      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },

    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json']
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

uiCaseader/index.js 入口文件

import uiCaseader from "./index.vue"
const a = {
    install: function (Vue) {
        Vue.comments("uiCaseader", uiCaseader)
    }

}

export default a

index.html 引用文件

<div id="app">
    <ui-cascader ></ui-cascader>
</div>

<script src="vue.js"></script>
<script src="uiCaseader.js"></script>
<script>
    Vue.use(uiCascader)
    $vm = new Vue({
    el: '#app'

    })

html 说 uiCascader 没定义

阅读 3.4k
1 个回答
✓ 已被采纳新手上路,请多包涵

自己回答:

入口文件改一下


import uiCaseader from "./uiCaseader.vue"
import uiSelect from "./uiSelect.vue"
import uiOption from "./uiOption.vue"
import uiItemtext from "./uiItemtext.vue"

const components = [
    uiCaseader,
    uiSelect,
    uiOption, 
    uiItemtext, 

  ];

const install = function(Vue) {
    if (install.installed) return;
    components.map(component => Vue.component(component.name, component));
  };


if (typeof window !== 'undefined' && window.Vue) {
    install(window.Vue);
}

export default {
    install 
}

组件中必须要有 name

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题