如何在单一spa vue应用程序中添加vuetify

Question

vue 2.6.14vuetify 2.6.9

如何将vuetify插入vue应用程序？我试图在另一个项目中导入我的项目如何微格式化应用程序，但不起作用

我是如何一步一步走的：

1. 创建单个spa根配置
2. 在项目中创建应用程序vue
3. 在vue-app目录中运行vue-add vuetify
4. 在vue应用程序中导入main.js中的vuetify
5. 利润？。。。否

package.json

{
"name": "@site/site",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"serve:standalone": "vue-cli-service serve --mode standalone"
},
"dependencies": {
"axios": "^0.24.0",
"core-js": "^3.8.3",
"js-cookie": "^3.0.1",
"single-spa-vue": "^2.1.0",
"vue": "^2.6.14",
"vue-router": "^3.5.1",
"vuetify": "^2.6.9",
"vuex": "^3.6.2",
"vuex-persistedstate": "^4.1.0",
"vue-slick-carousel": "^1.0.6",
"vue-social-sharing": "^3.0.9",
"vue-the-mask": "^0.11.1"
},
"devDependencies": {
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-plugin-router": "~5.0.0",
"@vue/cli-plugin-vuex": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-vue": "^8.0.3",
"material-design-icons-iconfont": "^6.1.1",
"prettier": "^2.4.1",
"sass": "~1.54.9",
"sass-loader": "^13.0.2",
"vue-cli-plugin-single-spa": "~3.3.0",
"vue-cli-plugin-vuetify": "~2.5.5",
"vue-template-compiler": "^2.6.14"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended",
"plugin:prettier/recommended"
],
"parserOptions": {
"parser": "@babel/eslint-parser"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}

site/main.js

import Vue from "vue";
import singleSpaVue from "single-spa-vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import vuetify from "./plugins/vuetify";
import VueSocialSharing from "vue-social-sharing";
Vue.config.productionTip = false;
Vue.config.devtools = process.env.VUE_APP_IS_DEV === "true";
Vue.use(VueSocialSharing);
const vueLifecycles = singleSpaVue({
Vue,
appOptions: {
render(h) {
return h(App);
},
vuetify,
router,
store,
},
});
export const bootstrap = vueLifecycles.bootstrap;
export const mount = vueLifecycles.mount;
export const unmount = vueLifecycles.unmount;

控制台中的错误

Answer 1

您正试图从插件中导入它，但您可能没有在插件中创建文件

import vuetify from "./plugins/vuetify";

为Vuetify创建一个插件文件，src/plugins/Vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuetify)
const opts = {}
export default new Vuetify(opts)

如果您想要，请使用opts对象自定义主题

Answer 2

这不是吗

Vue.use(Vuetify)

使用vuetify就像使用VueSocialSharing一样？

Vuetify文档