layui/example/docs/zh-CN/guide/getStarted.md

67 lines
1.0 KiB
Markdown
Raw Normal View History

2021-10-26 01:13:23 +08:00
::: title 快速上手
:::
2022-01-29 10:50:44 +08:00
```
npm install @layui/layui-vue --save
```
2022-02-06 03:19:24 +08:00
2022-01-29 10:50:44 +08:00
```
yarn add @layui/layui-vue --save
```
2022-02-06 03:19:24 +08:00
2021-09-29 17:22:33 +08:00
```
2022-01-29 10:50:44 +08:00
pnpm install @layui/layui-vue --save
2021-09-29 17:22:33 +08:00
```
2021-10-19 22:28:44 +08:00
<br>
2022-01-29 10:50:44 +08:00
::: title 全局注册
2021-10-27 02:04:47 +08:00
:::
```js
import App from './App.vue'
import { createApp } from 'vue'
import Layui from '@layui/layui-vue'
2021-11-28 18:53:42 +08:00
import '@layui/layui-vue/lib/index.css'
createApp(App).use(Layui).mount('#app')
2021-10-01 03:03:24 +08:00
```
2021-10-19 22:28:44 +08:00
<br>
2022-01-29 10:50:44 +08:00
::: title 按需引入
:::
```js
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')
```
<br>
2022-01-29 10:55:40 +08:00
::: title 基础示例
2021-10-27 02:04:47 +08:00
:::
2021-10-01 03:03:24 +08:00
```html
<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>
2021-10-01 03:03:24 +08:00
</lay-layout>
2021-10-08 00:17:34 +08:00
```