如何在nuxt.js中使用uiv模块

Question

我已经安装了模块并将以下代码添加到插件文件夹中

// uiv.js

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

Vue.use(uiv)

如何在nuxt的组件中使用它，我不知道，请帮助我，它在vue.js中有效

Answer 1

请执行以下步骤：

1. 下载您感兴趣的版本的已编译CSS和JavaScript Bootstrap文件（例如，对于当前的Bootstrap v4.3.1，您可以下载这些文件from here）
2. 解压缩得到的文件。打开结果文件夹。您将看到2个子文件夹：js和css。进入css文件夹并将名为boostrap.min.css的文件复制到Nuxt.js项目的〜/ assets文件夹

3. 返回到您的〜/ 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文件，该文件位于项目文件夹的根目录中。搜索名为plugins的密钥，然后在其中添加uiv.js插件：

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

5. 为了确保正确执行上述步骤，请打开任何。vue文件（假设〜/ pages / index.vue文件）并添加以下行：

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

6. 重新午餐服务器：yarn run dev

7. 您应该得到这样的东西：