富文本插件
https://www.wangeditor.com/v5/for-frame.html 官网地址
安装
yarn add @wangeditor/editor
# 或者 npm install @wangeditor/editor --save
yarn add @wangeditor/editor-for-vue@next
# 或者 npm install @wangeditor/editor-for-vue@next --save
使用
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { 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属性即可