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

相关推荐

  1. vue3

    2024-07-09 17:38:03       9 阅读
  2. vue3 编写

    2024-07-09 17:38:03       20 阅读
  3. vue3+ts自定义

    2024-07-09 17:38:03       41 阅读
  4. 使用vue3编写一个

    2024-07-09 17:38:03       25 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-09 17:38:03       4 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-09 17:38:03       5 阅读
  3. 在Django里面运行非项目文件

    2024-07-09 17:38:03       4 阅读
  4. Python语言-面向对象

    2024-07-09 17:38:03       4 阅读

热门阅读

  1. 【PyQt5】

    2024-07-09 17:38:03       9 阅读
  2. 为啥AI要卷应用?

    2024-07-09 17:38:03       9 阅读
  3. TensorFlow在数据分析与挖掘中的应用:技术与实践

    2024-07-09 17:38:03       13 阅读
  4. 【问题记录】Jenkins Pipeline读取变量的各种方法

    2024-07-09 17:38:03       11 阅读
  5. Qt提升控件失败的解决办法

    2024-07-09 17:38:03       12 阅读
  6. uniapp页面进来直接横屏

    2024-07-09 17:38:03       9 阅读