как использовать модуль uiv в nuxt. js

Question

Я установил модуль и добавил приведенный ниже код в папку плагинов

// uiv. js

import 'bootstrap/dist/css/bootstrap.min.css'
import Vue from 'vue'
import * as uiv from 'uiv'

Vue.use(uiv)

Как использовать его в компоненте в nuxt i не знаю, пожалуйста, помогите мне услышать, это работает в vue. js

Answer 1

Пожалуйста, выполните следующие действия:

1. Загрузите скомпилированные CSS и JavaScript Bootstrap файлы интересующей вас версии (например, для текущей * 1070). * v4.3.1 вы можете загрузить эти файлы отсюда )
2. Распаковать полученный файл. Откройте папку с результатами. Затем вы увидите 2 подпапки: js и css. Go в папку css и скопируйте файл с именем boostrap.min. css в папку ~ / assets вашего Nuxt. js project

3. Go вернуться к вашему ~ / plugins / uiv. js файлу и обновить его следующим образом:

   import '@/assets/bootstrap.min.css'                                                                                                                                     
   
   import Vue from 'vue'                                                                                                                                                   
   import * as uiv from 'uiv'                                                                                                                                              
   
   Vue.use(uiv)     
   

   Как вы видите, вам нужно обновить только первый оператор import, чтобы он указывал на местоположение нашего файла bootstrap .min. css.

4. Откройте файл nuxt.config. js, который находится в root папки вашего проекта. Найдите ключ с именем plugins и добавьте туда свой плагин uiv. js:

   plugins: [                                                                                                                                                            
     '@/plugins/uiv.js'                                                                                                                                                  
   ], 
   

5. Чтобы убедиться, что вы выполнили вышеуказанные шаги правильно, откройте любой из ваших . vue файлов (скажем, ~ / pages / index. vue file) и добавьте эту строку:

   <btn type="primary">Primary</btn> 
   

6. Перезапустите ваш сервер: yarn run dev

7. Вы должны получить что-то вроде этого: