layui/example/docs/zh-CN/guide/getStarted.md
2022-02-06 03:19:24 +08:00

1.0 KiB

::: title 快速上手 :::

npm install @layui/layui-vue --save
yarn add @layui/layui-vue --save
pnpm install @layui/layui-vue --save

::: title 全局注册 :::

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')

::: title 按需引入 :::

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')

::: title 基础示例 :::

<lay-layout>
  <lay-header>
    <lay-logo>Layui Admin</lay-logo>
  </lay-header>
  <lay-side></lay-side>
  <lay-body>
    <router-view></router-view>
  </lay-body>
  <lay-footer>pearadmin.com</lay-footer>
</lay-layout>