如何设置带有额外导入的Vue 3 main.js文件?

时间:2020-04-19 17:22:50

标签: javascript vue.js aws-amplify vuejs3 aws-amplify-vue

嗨,我正在尝试制作可在vue 2中使用的main.js文件的vue 3版本

vue 2

import Vue from "vue";
import App from "./App.vue";
import store from "./store";
import Amplify, * as AmplifyModules from "aws-amplify";
import { AmplifyPlugin } from "aws-amplify-vue";
import awsmobile from "./aws-exports";

Amplify.configure(awsmobile);
Vue.use(AmplifyPlugin, AmplifyModules);

Vue.config.productionTip = false;
new Vue({
  store,
  render: h => h(App)
}).$mount("#app");

vue 3最佳猜测

import { createApp } from 'vue';
import App from './App.vue'

import Amplify, * as AmplifyModules from 'aws-amplify'
import { AmplifyPlugin } from 'aws-amplify-vue'
import awsconfig from './aws-exports'

const app = createApp(App)

Amplify.configure(awsconfig)

app.use(AmplifyPlugin, AmplifyModules)

app.mount('#app')

无需额外导入的作品,当我添加它们时仅显示白屏

1 个答案:

答案 0 :(得分:0)

我相信原因是插件结构在vue3中已更改

我怀疑您是否注释掉以下这一行:static String isValid(String s) { String yesOrNo; //Step 1: count the frequency of each char and out in a map <char, number> Map<Character, Integer> map = new HashMap<>(); for (int i = 0; i < s.length(); i++) { int count = 0; for (int c = 0; c < s.length(); c++) { if (s.charAt(c) == s.charAt(i)) count++; } map.put(s.charAt(i), count); } //Step2: add all the numbers of occurrences of each char into a list List<Integer> values = new ArrayList<>(); for (Map.Entry<Character, Integer> kv : map.entrySet() ) { values.add(kv.getValue()); } //Step 3: find the benchmark number Map<Integer, Integer> occurPairs = new TreeMap<>(); for (int i = 0; i < values.size(); i++) { occurPairs.put(values.get(i), Collections.frequency(values, values.get(i))); } Map.Entry<Integer, Integer> popVal = Collections.max(occurPairs.entrySet(), Map.Entry.comparingByValue()); Map.Entry<Integer, Integer> smallest = Collections.min(occurPairs.entrySet(), Map.Entry.comparingByValue()); //Step 4: compare each value with the benchmark int numOfWrong = 0; for (Integer value : values) { if (!value.equals(popVal.getKey())) numOfWrong += Math.abs(popVal.getKey() - value); } if (occurPairs.size() == 2 && smallest.getValue() == 1 && smallest.getKey() == 1) yesOrNo = "YES"; else if (numOfWrong > 1) yesOrNo = "NO"; else yesOrNo = "YES"; System.out.println(yesOrNo); return yesOrNo; } 可以工作(无需插件)

该插件看起来好像没有共享存储库,因此很难开始使用它。

这里有一篇文章讨论了一些差异(寻找提供/注入)

https://medium.com/better-programming/designing-vue3-plugins-using-provide-and-inject-47b586d9ce4

您可能必须为vue3推出自己的插件,或者继续使用vue2。