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

【问题标题】：how to use uiv module in nuxt.js如何在 nuxt.js 中使用 uiv 模块
【发布时间】：2020-07-26 06:31:37
【问题描述】：

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

// uiv.js

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

Vue.use(uiv)

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

【问题讨论】：

标签： twitter-bootstrap vue.js plugins vuejs2 nuxt.js

【解决方案1】：

请按以下步骤操作：

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

返回您的 ~/plugins/uiv.js 文件并以这种方式更新它：

import '@/assets/bootstrap.min.css'                                                                                                                                     

import Vue from 'vue'                                                                                                                                                   
import * as uiv from 'uiv'                                                                                                                                              

Vue.use(uiv)

如您所见，您只需更新第一个 import 语句以指向我们的 bootstrap.min.css 文件的位置。

打开项目文件夹根目录下的 nuxt.config.js 文件。搜索名为 plugins 的密钥并在此处添加您的 uiv.js 插件：

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

为确保您正确执行了上述步骤，请打开您的任何 .vue 文件（比如说 ~/pages/index.vue 文件）并添加这一行：
```
<btn type="primary">Primary</btn> 
```
重新启动您的服务器：yarn run dev
你应该得到这样的东西：

【讨论】：