Layui - Vue如何快速上手

Layui Vue安装组件

使用 npm 工具安装 layui vue，若安装缓慢，可尝试用 pnpm 或其他镜像源。

npm install @layui/layui-vue --save

全局注册

import App from './App.vue'
import { createApp } from 'vue'
import Layui from '@layui/layui-vue'
import '@layui/layui-vue/lib/index.css'

createApp(App).use(Layui).mount('#app')

以上代码便完成了 layui-vue 的注册。需要注意的是，样式文件需要单独引入。

自动按需

首先你需要安装 unplugin-vue-components 和 unplugin-auto-import 两款插件。

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

然后修改 vite.config.js 或 vue.config.js 的配置。

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { LayuiVueResolver } from 'unplugin-vue-components/resolvers'

export default {
  plugins: [
    AutoImport({
      resolvers: [LayuiVueResolver()],
    }),
    Components({
      resolvers: [LayuiVueResolver()],
    }),
  ],
}

Resolver 解析器选项配置。

export interface LayuiVueResolverOptions {
  /**
   * 将样式与组件一起导入
   *
   * @default 'css'
   */
  importStyle?: boolean | 'css'

  /**
   * 是否解析图标
   *
   * @default false
   */
  resolveIcons?: boolean

  /**
   * 排除不需要自动导入的组件
   * 
   * eg: exclude: ['LayDocTable', /^LayDoc[A-Z]/,]
   */
  exclude?: Array;
}

手动引入

如果你完全使用 layui-vue 构建项目, 我们更推荐全局注册与自动按需的方式。

import App from './App.vue'
import { createApp } from 'vue'
import { LayButton, LayTable } from '@layui/layui-vue'
import '@layui/layui-vue/es/button/index.css';
import '@layui/layui-vue/es/table/index.css';

var app = createApp(App).

app.component("LayButton", LayButton);
app.component("LayTable", LayTable);

app.mount('#app')

Volar 配置

在 tsconfig.json 中, 通过 compilerOptions.type 选项指定全局组件类型 ( v1.9.6 )

{
  "compilerOptions": {
    "types": ["@layui/layui-vue/types/components"]
  }
}

在线安装

根据不同的 CDN 提供商有不同的引入方式，我们在这里以 unpkg 举例。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="//unpkg.com/@layui/layui-vue/lib/index.css" />
    <script src="//unpkg.com/vue@3"></script>
    <script src="//unpkg.com/@layui/layui-vue"></script>
</head>
<body>
    <div id="app">
        <lay-button type="primary">{{ message }}</lay-button>
    </div>
    <script>
        const App = {
            data() {
                return {
                    message: "Hello World"
                };
            },
        };
        const app = Vue.createApp(App);
        app.use(LayuiVue);
        app.mount("#app");
    </script>
</body>
</html>

进入Layui Vue中文文档

推荐9款支持 Vue3 免费开源的前端 UI 组件库

基于Vite/TypeScript/Vue3/ElementPlus+TinkPHP6前后端一体框架——Niucloud Admin

免费开源企业级前端 UI 组件库——TinyVue

免费开源的 Vue 3 桌面端 UI 组件库——Layui Vue

Layui - Vue如何设置默认语言

标签： Layui Vue Vue3免费开源组件 Vue3组件库桌面端UI组件库