Vue3 第十三篇：引入Layui-vue框架

由于博主是后端出身，对layui的十分喜爱，特此引入一下：Layui - Vue 开源前端 UI 框架http://layui-vue.pearadmin.com/zh-CN/guide/introduce

1.安装

npm install @layui/layui-vue --save

2.注册main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { createPinia } from 'pinia'
import piniaPersist from 'pinia-plugin-persist'
import 'virtual:windi.css'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css';
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

import Layui from '@layui/layui-vue'
import '@layui/layui-vue/lib/index.css'

const pinia = createPinia()
pinia.use(piniaPersist)
const app = createApp(App)

// 全局注册el-icon
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}

app.use(router).use(pinia).use(ElementPlus,{locale: zhCn,}).use(Layui).mount('#app')

3.安装插件（如果已经安装过，则跳过此步骤）

安装 unplugin-vue-components 和 unplugin-auto-import 插件，插件会自动解析模板中用到的组件，并引入组件和样式。

npm install -D unplugin-vue-components unplugin-auto-import

4.配置插件：修改vite.config.js文件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import WindiCSS from 'vite-plugin-windicss'
 
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import { LayuiVueResolver } from 'unplugin-vue-components/resolvers'

import vueJsx from '@vitejs/plugin-vue-jsx'

const path = require('path');
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    WindiCSS(),
    vueJsx(),
    AutoImport({
      resolvers: [ElementPlusResolver(),LayuiVueResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver(),LayuiVueResolver()],
    }),
  ],
  resolve: {
    // 配置路径别名
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
  css: {
    preprocessorOptions: {
      less: {
        modifyVars: {
          hack: `true; @import (reference) "${path.resolve("src/assets/css/base.less")}";`,
        },
        javascriptEnabled: true,
      },
    },
  },
})

5.使用：

layer.msg("成功消息", { icon : 1, time: 100000})

注意注意：引入import '@layui/layui-vue/lib/index.css'后，会覆盖掉很多默认的全局样式。