как добавить простые vue css файлы в JHipster Project - PullRequest
Новая
       24

как добавить простые vue css файлы в JHipster Project

1 голос
/ 22 февраля 2020

Я пытаюсь добавить простой vue к моему jhister с приложением vue. js. И я следую этим шагам.

1 - запустите эти комментарии 

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

2 - добавьте их в мой поставщик.s css

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

3 - когда я запускаю npm команду запуска. Я получаю эти ошибки. 

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

как я могу интегрировать Prime vue с моим приложением jhipster. Спасибо за вашу помощь !!!

1 Ответ

0 голосов
/ 23 февраля 2020

Я не очень разбираюсь в Vue, но официальная документация примеров импортирует файлы CSS напрямую. Я проверил prime vue -quickstart и таким образом успешно интегрировал обе библиотеки.

1. Установите primevue и primeicons

Откройте терминал и выполните следующую команду, если вы используете npm: 

npm i primevue primeicons

Или следующее, если вы используете пряжу : 

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. Импортируйте компоненты, которые вы хотите использовать

Вы можете добавить следующие строки кода в ваш файл main.ts, если хотите, чтобы все компоненты Prime Vue были доступны во всем мире. , Или добавьте их в [component-name].component.ts (например, home.component.ts), если вы хотите сделать их доступными только в определенном виде c. 

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

4. Используйте компонент Prime Vue в своем представлении

Откройте файл [component-name].vue (например, home.vue) и начните использовать компонент пользовательского интерфейса, добавив разметку HTML. Я импортировал компонент Button, поэтому в моем случае он выглядит примерно так: 

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

Я почти уверен, что мы сможем использовать обе библиотеки так, как вы пытались вначале, но я не смог сделать это работать любым другим способом.

...