我想自己做一个vue组件,但想单独提出来,可以放到其它项目里,其它项目是用cdn那个方式,所以我要做一个像JQ一样的插件一样,只要引用vue.js 和我编译好的组件就可以使用了。
可惜我看按官网来用webpack-simple 打包出来找不到变量
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 没定义
自己回答:
入口文件改一下
组件中必须要有 name