vue3 插件

富文本插件

wangeditor

https://www.wangeditor.com/v5/for-frame.html 官网地址
安装
yarn add @wangeditor/editor
# 或者 npm install @wangeditor/editor --saveyarn add @wangeditor/editor-for-vue@next
# 或者 npm install @wangeditor/editor-for-vue@next --save使用import '@wangeditor/editor/dist/css/style.css' // 引入 cssimport { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'<Toolbar ... /><Editor@onCreated="handleCreated"@onChange="handleChange"@onDestroyed="handleDestroyed"@onFocus="handleFocus"@onBlur="handleBlur"@customAlert="customAlert"@customPaste="customPaste"/>

vite中插件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'//按需自动加载
import Components from 'unplugin-vue-components/vite' //按需自动加载
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' //引入element ui插件
import { resolve } from 'path';
import VueSetupExtend from 'vite-plugin-vue-setup-extend' // 解决vue3中子组件没有Name属性 // https://vitejs.dev/config/
export default defineConfig({base: './', //打包后的文件目录plugins: [vue(),AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),VueSetupExtend()],resolve: {alias: {'@': resolve(__dirname, 'src'),'*': resolve(''),'ass':resolve('assets')},
},css:{preprocessorOptions:{scss:{additionalData:'@import"./src/assets/style/main.scss";'}}},server: {// 服务器主机名host: 'localhost',// 端口号port: 9537,// 设为 true 时若端口已被占用则会直接退出，而不是尝试下一个可用端口strictPort: false,// 服务器启动时自动在浏览器中打开应用程序,当此值为字符串时，会被用作 URL 的路径名open: false,// 自定义代理规则proxy: {// 选项写法'/api': {target: 'http://jsonplaceholder.typicode.com',changeOrigin: true,rewrite: path => path.replace(/^\/api/, '')}}}
})

其他插件

axios ajax请求
echarts 图表插件
element-plus ui框架
pinia 数据存储，也就是vuex
nprogress 加载loding
qs 参数转JSON
sass 预编译css
pinia-plugin-persist 数据永久存储
vue-router 路由
unplugin-auto-import/vite //按需自动加载
unplugin-vue-components/vite //按需自动加载
unplugin-vue-components/resolvers //引入element ui插件
path
vite-plugin-vue-setup-extend // 解决vue3中子组件没有Name属性，如：组件自己调用自己使用，只需要在script setup lang=“ts” 加上name属性即可