vue.js - 你如何在 web 组件中包含 vuetify
问题描述
我正在使用以下命令构建 Web 组件:
vue-cli-service build --target wc --name my-element 'src/components/mycomponent.vue'
我想在这个组件中使用 Vuetify。如何将其添加到mycomponent.vue
组件的影子根范围内?
该组件将被动态加载到使用其他框架/样式构建的应用程序中。我希望 Web 组件能够在其中使用,例如,、v-btn
等v-layout
。
谢谢你,唐尼
解决方案
对于 vuetify 2.x,它需要对 Vue 实例进行如下初始化。
// plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
Vue.use(Vuetify);
const opts = {};
export default new Vuetify(opts);
// main.js
import Vue from 'vue';
import App from './app.vue';
import vuetify from './plugins/vuetify';
new Vue({
vuetify,
render: h => h(App),
}).$mount('#app');
您需要将此类初始化移动到您的 Web 组件中。
<template>
...
</template>
<script>
import { VBtn, VLayout } from 'vuetify/lib'
import vuetify from '../plugins/vuetify';
export default {
name: 'MyWebComponent',
vuetify,
components: {
VBtn,
VLayout
},
...
}
</script>
<style>
...
</style>
推荐阅读
- ruby-on-rails - Rails application.js:需要给定目录中的所有 js 文件
- python - 如何绘制图表以查看准确性
- javascript - 在 React-Redux 中计算总价格
- variables - 如何使用 Newman cli Companion 将 Azure DevOps 变量传递给 Postman 值?
- r - 错误“维数不正确” - 预测 tslm
- python - 为什么这个代码在函数执行后需要这么长时间?
- r - 修复 tex2image 图形中的字体大小
- python - Python Pandas:如何在多个周期中获得每个峰值的最大值
- angular - 如何更改对象数组的 Observable 的值
- powershell - Powershell 获取同步预配错误 AzureAD