在第五章节我们介绍了一个简单的城市选择插件，在本章中，我们来详细介绍一下插件(plugins)的使用。插件分为 UI插件和 JS 功能插件。
首先我们要了解 plugins目录：Nuxt 会自动读取 plugins目录下的文件并加载，在命名问题上，我们使用 .server 或 .client 前缀，作用在 服务端 或 客户端 加载。因为有些文件直接在服务端加载的话，会直接报错，找不到 window等，特别是涉及到 dom 操作，因为服务端不存在该对象或者属性。
注意：在我们使用插件时，一定要使用使用defineNuxtPlugin()注册一个插件
一、首先我们来看一下 UI 库的引入。我们以，elementplus 和 windicss 为例
1、如何引入 elementplus
首先：安装 elementplus
//安装elementplus
1、npm install element-plus --save
//安装 @element-plus/icons 图标库
2、npm install @element-plus/icons
其次：然后在我们的plugins创建element-plus.client.ts文件。注意：如果我们在文件命名时加上 .client,例如 element-plus.client.ts，此时代表该插件只在客户端加载
import * as ElementPlus from 'element-plus/dist/index.full'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
// @ts-ignore
import { defineNuxtPlugin } from '#app'
export default defineNuxtPlugin(nuxtApp => {
nuxtApp.vueApp.use(ElementPlus, {
locale: zhCn,
})
})
找到nuxt.config.ts，引入样式：
css:[
'element-plus/dist/index.css',
'~/assets/css/resetElStyle.scss'
],
再次：如何在页面使用：demo
<template>
<h3>你好</h3>
//button的使用
<el-row class="mb-4">
<el-button>Default</el-button>
<el-button type="primary">Primary</el-button>
<el-button type="success">Success</el-button>
<el-button type="info">Info</el-button>
<el-button type="warning">Warning</el-button>
<el-button type="danger">Danger</el-button>
</el-row>
//ico图标使用
<div>
<el-switch
class="change_ico"
v-model="isDark"
size="small"
inline-prompt
style="--el-switch-on-color: #f2f2f2; --el-switch-off-color: #141414"
:active-icon="Sunny"
:inactive-icon="Moon"
@change="themeChange"
/>
</div>
</template>
<script setup lang="ts">
//例如按钮、图标的使用
//引入我们需要的图标
import { Moon, Sunny, Search} from '@element-plus/icons-vue'
</script>
<style scoped>
</style>
2、如何引入 windicss
首先：安装 nuxt-windicss
yarn add nuxt-windicss -D
# npm i nuxt-windicss -D
二、JS 插件的注册及使用
1、视频播放插件 dplayer
首先：引入 Dplayer视频播放器
npm install dplayer --save
//or
yarn add dplayer
其次：注册组件，在 plugins目录 新建 player.client.ts，注意：该插件只能在客户端加载，否则运行会报错。
//引入 dplayer
import DPlayer from 'dplayer'
//引入 dplayer 样式
import "vue-dplayer/dist/vue-dplayer.css";
// @ts-ignore
import { defineNuxtPlugin } from '#app'
export default defineNuxtPlugin(nuxtApp => {
// @ts-ignore
// return nuxtApp.vueApp.use(DPlayer)
return {
provide: {
DPlayer
}
}
})
最后，如何在功能页面使用 Dplayer
<template>
<h3>你好</h3>
// 动态二维码生成
<div v-if="state.value">
<qrcode-vue :value="state.value" :size="state.size" level="H" />
</div>
<button @click="test1">二维码</button>
</template>
<script setup lang="ts">
const state = relative({
dp:null,
longTime:0
})
```
//初始化播放器
const init = () => {
const videoRef = ref() // 获取视频容器
if(state.courseDetail){
const { $DPlayer } = useNuxtApp() //获取注册插件
state.dp = new $DPlayer({
container:document.getElementById('dplayer'), //视频容器节点
autoplay: !1, //自动播放
theme: "#00adff", //主题颜色
loop: !0, //是否循环
lang: "zh-cn", //播放器语言
hotkey: 0, //热键
preload: "auto", //预加载
logo: "/assets/images/logo.png", //视频logo
volume: .7,
mutex: !0,
playbackSpeed:[0.5, 0.75, 1], //倍速
screenshot: !0, //截屏
video: { //视频信息
url: state.videosUrl, //视频地址
pic: state.imgUrls, //封面图
type: "auto" //类型
},
contextmenu: [], //弹幕池
highlight: [{ //上次观看记录
time: state.courseDetail.classkechengs[state.parentId].keshis[state.hasVideo].learntime,
text: "上次观看时间"
}],
})
//监听视频播放进度
state.dp.on('timeupdate', function () {
state.dp.speed(1) //三方倍速插件禁用
state.longTime = that.dp.video.duration
if(state.courseDetail.isfastplay == 'Y' ){
}else{//禁止视频快进
}
//视频长度小于750秒人脸识别校验扫码处理
if(parseInt(state.longTime) <= 750){
}
// 视频播放每五分钟暂停一次，需用户手动开启播放，防止用户作弊
var nums = parseInt( state.tChanges) - parseInt(state.stepStop) - 300 * state.allStep
if(state.tChanges > state.dp.options.highlight[0].time && nums == 300){
let tempNum = Math.floor(Math.random() * 4)
state.dp.fullScreen.cancel('web');
state.dp.fullScreen.cancel('browser');
state.dp.pause()
state.dp.notice('中途在校验！',10000)
}
///视频播放中途随机暂停弹题，需用户手动答题
if(state.tChanges > state.dp.options.highlight[0].time && parseInt(state.tChanges) == state.timeingnum){
state.dp.notice('试题作答',10000)
}
});
//禁止用户快进
state.dp.on('seeked', function (res) {
});
//视频暂停
state.dp.on('pause', function () {
state.dp.fullScreen.cancel()
state.dpshow = false
if(state.changePlay){
state.dp.play()
}
});
state.dp.on('emptied', function () {
});
//视频播放
state.dp.on('play', function () {
});
//视频自动播放结束
state.dp.on('ended', function () {
});
state.dp.on('resize', function () {
});
}
}
</script>
<style scoped>
</style>
2、二维码生成插件 qrcode
首先：引入 qrcode
npm install dplayer --save
//or
yarn add dplayer
其次：注册组件，在 plugins目录 新建 player.client.ts，注意：该插件只能在客户端加载，否则运行会报错。
import QrcodeVue from 'qrcode.vue'
// @ts-ignore
import { defineNuxtPlugin } from '#app'
export default defineNuxtPlugin(nuxtApp => {
// @ts-ignore
return nuxtApp.vueApp.use(QrcodeVue)
})
最后，如何在功能页面使用 qrcode
<template>
<h3>动态二维码生成</h3>
// 动态二维码生成
<div v-if="state.value">
<qrcode-vue :value="state.value" :size="state.size" level="H" />
</div>
<button @click="test1">二维码</button>
</template>
<script setup lang="ts">
//引入插件
import QrcodeVue from 'qrcode.vue'
const state = relative({
value:null,
size:150
})
// 生成二维码
const test1 = () => {
state.value = 'https://www.baidu.com'
}
</script>
<style scoped>
</style>
总结：对于插件的使用我们可以按照自己的需要引入不同的插件，关键就是在我们使用之前一定要先注册，同时要明确它实在服务端还是在客户端出实话，不过不知道的话可以默认现在服务端注册，如果报错获无法运行过在改为客户端
