如何将PrimeVue CSS文件添加到JHipster项目中

Question

我正在尝试将PrimeVue添加到我的Vue.js应用程序中，并遵循以下步骤：

1- 运行以下命令

npm install primevue --save
npm install primeicons --save

2- 将它们添加到我的 vendor.scss 文件中

@import '~primevue/resources/primevue.min.css';
@import '~primevue/resources/themes/nova-light/theme.css';
@import '~primeicons/primeicons.css';

3- 当我运行npm start命令时，我出现了以下错误。

ERROR in ./src/main/webapp/content/scss/vendor.scss (./node_modules/css-loader/dist/cjs.js??ref--9-1!./node_modules/postcss-loader/src??ref--9-2!./
node_modules/sass-loader/lib/loader.js??ref--9-3!./src/main/webapp/content/scss/vendor.scss)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: Failed to find 'node_modules/primevue/resources/primevue.min.css'
  in [
    C:\work\workspace\aymer workspace\fiyatkolay\fiyatkolayweb\src\main\webapp\content\scss
  ]
    at resolveModule.catch.catch (C:\work\workspace\aymer workspace\fiyatkolay\fiyatkolayweb\node_modules\postcss-import\lib\resolve-id.js:35:13)
 @ ./src/main/webapp/content/scss/vendor.scss 4:14-231 14:3-18:5 15:22-239
 @ ./src/main/webapp/app/main.ts
 @ multi (webpack)-dev-server/client?http://localhost:9060 ./src/main/webapp/app/main.ts

如何将PrimeVue集成到我的JHipster应用程序中。

谢谢您的帮助！！！

- EmreAltun

Answer 1

我不太熟悉Vue，但官方文档的示例直接导入CSS文件。我检查了primevue-quickstart并成功地以这种方式集成了两个库。

1. 安装primevue和primeicons

如果您使用npm，请打开终端并执行以下命令：

npm i primevue primeicons

如果您使用的是yarn，请使用以下命令：

yarn add primevue primeicons

2. 添加所需的CSS文件

打开你的main.ts文件，在顶部附近添加以下行：

import 'primevue/resources/themes/nova-light/theme.css';
import 'primevue/resources/primevue.min.css';
import 'primeicons/primeicons.css';

3. 导入您想要使用的组件

如果您希望所有PrimeVue组件在全局范围内都可用，则可以将以下代码添加到您的main.ts文件中。或者，如果您只想在特定视图中使它们可用，则将它们添加到[component-name].component.ts（例如home.component.ts）中。

import Button from 'primevue/button';
Vue.component('Button', Button);

4. 在视图中使用PrimeVue组件

打开你的[component-name].vue文件（例如home.vue），通过添加HTML标记开始使用UI组件。我导入了Button组件，所以在我的情况下，代码如下：

<Button label="Click" icon="pi pi-check" />

我相信我们应该能够像你先前尝试的那样同时使用这两个库，但我无法找到其他方法使其正常工作。

- vicpermir