Vue3 第十三篇:引入Layui-vue框架
由于博主是后端出身,对layui的十分喜爱,特此引入一下:Layui - Vue 开源前端 UI 框架http://layui-vue.pearadmin.com/zh-CN/guide/introduce1.安装2.注册3.安装插件(如果已经安装过,则跳过此步骤)安装 unplugin-vue-components 和 unplugin-auto-import 插件,插件会自动解析模板中用到的组
·
由于博主是后端出身,对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'后,会覆盖掉很多默认的全局样式。
更多推荐
已为社区贡献28条内容
所有评论(0)