vue3 插件

富文本插件

• wangeditor

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属性即可