如标题所述，我想在我的JHipster项目中使用PrimeVue。我试着从这里遵循确切的步骤，找到确切的文件并粘贴在其中，但一些错误阻止了应用程序运行:
ERROR in ./src/main/webapp/app/main.ts 61:0-56
[INFO] Module not found: Error: Can't resolve 'primevue/resources/themes/nova-light/theme.css' in '/home/pc/Desktop/JVue/src/main/webapp/app'
[INFO] resolve 'primevue/resources/themes/nova-light/theme.css' in '/home/pc/Desktop/JVue/src/main/webapp/app'
[INFO] Parsed request is a module
[INFO] using description file: /home/pc/Desktop/JVue/package.json (relative path: ./src/main/webapp/app)
[INFO] Field 'browser' doesn't contain a valid alias configuration
[INFO] resolve as module
[INFO] /home/pc/Desktop/JVue/src/main/webapp/app/node_modules doesn't exist or is not a directory
[INFO] /home/pc/Desktop/JVue/src/main/webapp/node_modules doesn't exist or is not a directory
[INFO] /home/pc/Desktop/JVue/src/main/node_modules doesn't exist or is not a directory
[INFO] /home/pc/Desktop/JVue/src/node_modules doesn't exist or is not a directory
[INFO] looking for modules in /home/pc/Desktop/JVue/node_modules
[INFO] /home/pc/Desktop/JVue/node_modules/primevue doesn't exist
[INFO] /home/pc/Desktop/node_modules doesn't exist or is not a directory
[INFO] looking for modules in /home/pc/node_modules
[INFO] existing directory /home/pc/node_modules/primevue
[INFO] using description file: /home/pc/node_modules/primevue/package.json (relative path: .)
[INFO] using description file: /home/pc/node_modules/primevue/package.json (relative path: ./resources/themes/nova-light/theme.css)
[INFO] no extension
[INFO] Field 'browser' doesn't contain a valid alias configuration
[INFO] /home/pc/node_modules/primevue/resources/themes/nova-light/theme.css doesn't exist
[INFO] .ts
[INFO] Field 'browser' doesn't contain a valid alias configuration
[INFO] /home/pc/node_modules/primevue/resources/themes/nova-light/theme.css.ts doesn't exist
[INFO] .js
[INFO] Field 'browser' doesn't contain a valid alias configuration
[INFO] /home/pc/node_modules/primevue/resources/themes/nova-light/theme.css.js doesn't exist
[INFO] .vue
[INFO] Field 'browser' doesn't contain a valid alias configuration
[INFO] /home/pc/node_modules/primevue/resources/themes/nova-light/theme.css.vue doesn't exist
[INFO] .json
[INFO] Field 'browser' doesn't contain a valid alias configuration
[INFO] /home/pc/node_modules/primevue/resources/themes/nova-light/theme.css.json doesn't exist
[INFO] as directory
[INFO] /home/pc/node_modules/primevue/resources/themes/nova-light/theme.css doesn't exist
[INFO] /home/node_modules doesn't exist or is not a directory
[INFO] /node_modules doesn't exist or is not a directory
[INFO]
[INFO] ERROR in ../../node_modules/primevue/button/button.esm.js 2:0-171
[INFO] Module not found: Error: Can't resolve 'vue' in '/home/pc/node_modules/primevue/button'
[INFO] resolve 'vue' in '/home/pc/node_modules/primevue/button'
[INFO] Parsed request is a module
[INFO] using description file: /home/pc/node_modules/primevue/button/package.json (relative path: .)
[INFO] aliased with mapping 'vue': 'vue/dist/vue.esm.js' to 'vue/dist/vue.esm.js'
[INFO] Parsed request is a module
[INFO] using description file: /home/pc/node_modules/primevue/button/package.json (relative path: .)
[INFO] resolve as module
[INFO] /home/pc/node_modules/primevue/button/node_modules doesn't exist or is not a directory
[INFO] /home/pc/node_modules/primevue/node_modules doesn't exist or is not a directory
[INFO] /home/pc/node_modules/node_modules doesn't exist or is not a directory
[INFO] looking for modules in /home/pc/node_modules
[INFO] existing directory /home/pc/node_modules/vue
[INFO] using description file: /home/pc/node_modules/vue/package.json (relative path: .)
[INFO] using exports field: ./dist/vue.esm.js
[INFO] using description file: /home/pc/node_modules/vue/package.json (relative path: ./dist/vue.esm.js)
[INFO] no extension
[INFO] Field 'browser' doesn't contain a valid alias configuration
[INFO] /home/pc/node_modules/vue/dist/vue.esm.js doesn't exist
[INFO] .ts
[INFO] Field 'browser' doesn't contain a valid alias configuration
[INFO] /home/pc/node_modules/vue/dist/vue.esm.js.ts doesn't exist
[INFO] .js
[INFO] Field 'browser' doesn't contain a valid alias configuration
[INFO] /home/pc/node_modules/vue/dist/vue.esm.js.js doesn't exist
[INFO] .vue
[INFO] Field 'browser' doesn't contain a valid alias configuration
[INFO] /home/pc/node_modules/vue/dist/vue.esm.js.vue doesn't exist
[INFO] .json
[INFO] Field 'browser' doesn't contain a valid alias configuration
[INFO] /home/pc/node_modules/vue/dist/vue.esm.js.json doesn't exist
[INFO] as directory
[INFO] /home/pc/node_modules/vue/dist/vue.esm.js doesn't exist
[INFO] /home/node_modules doesn't exist or is not a directory
[INFO] /node_modules doesn't exist or is not a directory
[INFO] @ ./node_modules/ts-loader/index.js??clonedRuleSet-1[0].rules[0].use[0]!./src/main/webapp/app/core/jhi-footer/jhi-footer.component.ts?vue&type=script&lang=ts& 1:0-37 2:24-30
[INFO] @ ./src/main/webapp/app/core/jhi-footer/jhi-footer.component.ts?vue&type=script&lang=ts& 1:0-157 1:173-176 1:178-332 1:178-332
[INFO] @ ./src/main/webapp/app/core/jhi-footer/jhi-footer.vue 2:0-71 3:0-66 3:0-66 9:2-8
[INFO] @ ./node_modules/ts-loader/index.js??clonedRuleSet-1[0].rules[0].use[0]!./src/main/webapp/app/app.component.ts?vue&type=script&lang=ts& 25:0-57 40:30-39
[INFO] @ ./src/main/webapp/app/app.component.ts?vue&type=script&lang=ts& 1:0-144 1:160-163 1:165-306 1:165-306
[INFO] @ ./src/main/webapp/app/app.vue 2:0-64 3:0-59 3:0-59 9:2-8
[INFO] @ ./src/main/webapp/app/main.ts 42:0-28 108:23-26
我也试图找到相关的文档，但似乎不是很多JHipster开发人员使用PrimeVue。请问如何与PrimeVue一起运行Jhipster ?任何帮助和建议都是非常感谢的。
编辑我道歉没有添加更多信息。我的Vue版本是2.6.14。这是我的package.json(我担心代码太长，所以我分享了重要的部分):
"dependencies": {
"@fortawesome/fontawesome-svg-core": "6.1.1",
"@fortawesome/free-solid-svg-icons": "6.1.1",
"@fortawesome/vue-fontawesome": "2.0.6",
"axios": "0.26.1",
"bootstrap": "4.6.1",
"bootstrap-vue": "2.21.2",
"bootswatch": "5.1.3",
"dayjs": "1.11.0",
"vue": "2.6.14",
"vue-class-component": "7.2.6",
"vue-cookie": "1.1.4",
"vue-i18n": "8.27.1",
"vue-infinite-loading": "2.4.5",
"vue-property-decorator": "9.1.2",
"vue-router": "3.5.3",
"vue2-filters": "0.14.0",
"vuelidate": "0.7.7",
"vuex": "3.6.2"
},
"engines": {
"node": ">=16.14.0",
"npm": ">= 6.14.4"
},
之后，我在这些相关文件中添加了这些代码。这是我的main.ts(代码也太长了，所以我只是添加我在里面添加的东西):
import 'primevue/resources/themes/nova-light/theme.css';
import 'primevue/resources/primevue.min.css';
import 'primeicons/primeicons.css';
因为我作为一个新手想尝试添加UI组件，我选择了jhi-footer.vue因为它几乎没有组件，所以我可以自由地添加:
<template>
<div id="footer" class="footer">
<p>This is your footer</p>
<Button label="Click" icon="pi pi-check" />
</div>
</template>
<script lang="ts" src="./jhi-footer.component.ts"></script>
import Button from 'primevue/button';
Vue.component('Button', Button);
所以几个小时后，我终于把PrimeVue和JHipster集成在一起了。我将把我的发现发布在这里，以供想要这样做的初学者和我将来的参考。
首先，检查JHipster生成的应用程序的Vue版本。在你的项目文件中，打开package.json，找到Vue。
事实上，尽管我使用了最新版本的JHipster(7.8.1)，它仍然令人惊讶地生成了Vue 2应用程序。你可以点击这里了解更多信息。我相信Vue 3有不同的配置。
之后，打开/src/main/webapp/app/main.ts，添加:
import "primevue/resources/themes/saga-blue/theme.css";
import "primevue/resources/primevue.min.css";
import "primeicons/primeicons.css";
import PrimeVue from 'primevue/config';
和全球配置完成。在我的例子中，我想为页脚添加UI组件
在jhi-footer.vue中，添加任何您想要的成分。我尝试添加Button组件:
<template>
<div id="footer" class="footer">
<p>This is your footer</p>
<Button label="Click" icon="pi pi-check" />
</div>
</template>
and injhi-footer.component.ts:
import Button from 'primevue/button';
export default {
components: {
Button
}
。当你启动应用程序时，它应该呈现你添加的组件。