问题描述
我必须为大型Web项目创建一个Vue Web组件。并希望将其用作自定义HTML元素。 组件和Web项目使用Bootstrap进行样式设置。 我在组件和主Web项目中导入Bootstrap。
但是当我构建它并将.js导入到我的Main Project中时,组件没有被引导。
component.vue
<template>
<div >
<button type="button" class="btn btn-primary">weiter</button>
</div>
</template>
<script>
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
export default {
name: 'HelloWorld',props: {
msg: String
},}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
package.json
{
"name": "test","version": "0.1.0","private": true,"scripts": {
"serve": "vue-cli-service serve","build": "vue-cli-service build","web-component": "vue-cli-service build --inline-vue --target wc --name test-02","web-async": "vue-cli-service build --name test-02 --target wc-async 'src/components/*.vue'"
},"dependencies": {
"axios": "^0.19.2","bootstrap": "^4.5.2","core-js": "^3.6.5","jquery": "^3.5.1","popper.js": "^1.16.1","vue": "^2.6.11"
},"devDependencies": {
"@fortawesome/fontawesome-free": "^5.14.0","@vue/cli-plugin-babel": "~4.5.0","@vue/cli-service": "~4.5.0","less": "^3.0.4","less-loader": "^5.0.0","vue-template-compiler": "^2.6.11"
},"browserslist": [
"> 1%","last 2 versions","not dead"
]
}
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)