鍍金池/ 問(wèn)答/HTML/ 用vue webpack-simple 怎么打包組件,才能直接使用

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

我想自己做一個(gè)vue組件，但想單獨(dú)提出來(lái)，可以放到其它項(xiàng)目里，其它項(xiàng)目是用cdn那個(gè)方式，所以我要做一個(gè)像JQ一樣的插件一樣，只要引用vue.js 和我編譯好的組件就可以使用了。
可惜我看按官網(wǎng)來(lái)用webpack-simple 打包出來(lái)找不到變量

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 說(shuō) uiCascader 沒(méi)定義

回答
編輯回答
萌面人

自己回答：

入口文件改一下


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

2017年3月24日 01:37