vue一些常用的前端库element-plus 以及一些知识点（持续更新）

1.npm安装element-plus

npm install element-plus --save

2.在main.js引入element

import ElementPlus from 'element-plus'

import 'element-plus/dist/index.css'

app.use(ElementPlus)

3.官网地址

一个 Vue 3 UI 框架 | Element Plus (element-plus.org)

4.在element-plus里面引入图标库

先下载，在main.js里面配置一下：

npm install @element-plus/icons-vue

// main.ts

// 如果您正在使用CDN引入，请删除下面一行。
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

---

知识点1

vue引入全屏功能：

1.下载需要的包：

npm i @vueuse/core  

2.模板中代码： 

<button @click="toggleFullscreen()" style="margin-top: 1.3rem;margin-left:6rem;height: 3rem; width: 3rem"
                type="button"
                class="btn btn-outline-primary">
          <svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" fill="currentColor"
               class="bi bi-arrows-fullscreen" viewBox="0 0 16 16">
            <path fill-rule="evenodd"
                  d="M5.828 10.172a.5.5 0 0 0-.707 0l-4.096 4.096V11.5a.5.5 0 0 0-1 0v3.975a.5.5 0 0 0 .5.5H4.5a.5.5 0 0 0 0-1H1.732l4.096-4.096a.5.5 0 0 0 0-.707zm4.344 0a.5.5 0 0 1 .707 0l4.096 4.096V11.5a.5.5 0 1 1 1 0v3.975a.5.5 0 0 1-.5.5H11.5a.5.5 0 0 1 0-1h2.768l-4.096-4.096a.5.5 0 0 1 0-.707zm0-4.344a.5.5 0 0 0 .707 0l4.096-4.096V4.5a.5.5 0 1 0 1 0V.525a.5.5 0 0 0-.5-.5H11.5a.5.5 0 0 0 0 1h2.768l-4.096 4.096a.5.5 0 0 0 0 .707zm-4.344 0a.5.5 0 0 1-.707 0L1.025 1.732V4.5a.5.5 0 0 1-1 0V.525a.5.5 0 0 1 .5-.5H4.5a.5.5 0 0 1 0 1H1.732l4.096 4.096a.5.5 0 0 1 0 .707z"/>
          </svg>
        </button>

在模板中，指定一个具有全屏功能的按钮，给按钮绑定toggleFullscreen()事件；

3.将下载的包引入组件，解构，赋值：

import {useFullscreen} from '@vueuse/core'
const {isFullscreen, enter, exit, toggle} = useFullscreen()

const toggleFullscreen = () => {
  toggle(); // 调用toggle方法
};

自此，已经通过点击全屏按钮，点击事件将调用toggle（）方法实现全屏功能；