我想创建一个vue插件
我通过webpack构建了test.vue，打开index.html，出现此错误：无法装入组件：模板或渲染函数未定义。
使用vue-cli构建的项目，请在main.js中使用
import VTest from './components/V-Test.vue'
Vue.use(VTest)
它将正常工作
但是使用链接方法不能直接在index.html中工作。
<!DOCTYPE html>
<html lang="zh" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<title>V-TEST</title>
<script src="../node_modules/vue/dist/vue.js" charset="utf-8"></script>
<script src="../dist/main.js" charset="utf-8"></script>
</head>
<body>
<div id="app">
<v-test @click="handleLog"></v-test>
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#app',
methods: {
handleLog() {
console.log('test.....')
}
}
})
</script>
</html>
<template lang="html">
<h1>this test word</h1>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
</style>
import VTest from './components/V-Test.vue'
const vTestPlugin = {
install(Vue){
Vue.component('v-test', VTest)
}
}
if (typeof window !== 'undefined' && window.Vue) {
window.Vue.use(vTestPlugin)
}
export default vTestPlugin
const path = require('path')
const {VueLoaderPlugin} = require('vue-loader')
const CleanWebpackPlugin = require("clean-webpack-plugin")
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js'
},
mode: 'development',
devtool:'source-map',
module: {
rules: [{
test: /\.vue$/,
use: ['vue-loader', 'vue-style-loader', 'css-loader', 'sass-loader'],
exclude: /node_modules/
},
{
test: /\.js$/,
use: 'babel-loader',
include: path.resolve(__dirname, 'src'),
exclude: /node_modules/
}
]
},
plugins: [
new VueLoaderPlugin(),
new CleanWebpackPlugin(['dist'])
],
}
{
"name": "v-test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "molvqingtai",
"license": "ISC",
"dependencies": {},
"devDependencies": {
"@babel/core": "^7.2.2",
"babel-loader": "^8.0.5",
"babel-preset-env": "^1.7.0",
"clean-webpack-plugin": "^1.0.0",
"css-loader": "^2.1.0",
"eslint": "^5.12.0",
"node-sass": "^4.11.0",
"sass-loader": "^7.1.0",
"vue": "^2.5.21",
"vue-loader": "^15.5.1",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.5.21",
"webpack": "^4.28.1",
"webpack-cli": "^3.2.1"
}
}