init

2022-12-09 16:41:41 +08:00
parent c1cce5a7c2
commit ff7aa8774f
2003 changed files with 156639 additions and 140 deletions
--- a/.svn/pristine/f2/f2fdb78d083a26e4b0fdf9392bbf1c2dc9d7e61a.svn-base
+++ b/.svn/pristine/f2/f2fdb78d083a26e4b0fdf9392bbf1c2dc9d7e61a.svn-base
@@ -0,0 +1,147 @@
+::: title 快速上手
+:::
+
+::: describe 最简单的使用方式参照以下 CodeSandbox 演示，也推荐 Fork 本例来进行 Bug Report。
+:::
+
+<a href="https://codesandbox.io/s/11mvy" style="margin-left: 30px; margin-bottom: 30px; margin-top: 10px; display:block;"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" /></a>
+
+::: title 安装组件
+:::
+
+::: describe 使用 npm 工具安装 layui vue，若安装缓慢，可尝试用 pnpm 或其他镜像源。
+:::
+
+```
+npm install @layui/layui-vue --save
+```
+
+::: title 全局注册
+:::
+
+```js
+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')
+```
+::: describe 以上代码便完成了 layui-vue 的注册。需要注意的是，样式文件需要单独引入。
+:::
+
+::: title 自动按需
+:::
+
+::: describe 首先你需要安装 <a href="https://github.com/antfu/unplugin-vue-components" target="_blank" style="color:#5FB878"><code>unplugin-vue-components</code></a> 和 <a href="https://github.com/antfu/unplugin-auto-import" target="_blank" style="color:#5FB878"><code>unplugin-auto-import</code></a> 两款插件。
+:::
+
+```
+npm install -D unplugin-vue-components unplugin-auto-import
+```
+
+::: describe 然后修改 vite.config.js 或 vue.config.js 的配置。 
+:::
+
+```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()],
+    }),
+  ],
+}
+```
+::: describe Resolver 解析器选项配置。 
+:::
+
+```ts
+export interface LayuiVueResolverOptions {
+  /**
+   * 将样式与组件一起导入
+   *
+   * @default 'css'
+   */
+  importStyle?: boolean | 'css'
+
+  /**
+   * 是否解析图标
+   *
+   * @default false
+   */
+  resolveIcons?: boolean
+
+  /**
+   * 排除不需要自动导入的组件
+   * 
+   * eg: exclude: ['LayDocTable', /^LayDoc[A-Z]/,]
+   */
+  exclude?: Array<string | RegExp>;
+}
+```
+
+::: title 手动引入
+:::
+
+::: describe 原生支持 es-module 的 tree shaking 用法。
+:::
+
+::: describe 如果你完全使用 layui-vue 构建项目, 我们更推荐全局注册与自动按需的方式。
+:::
+
+```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')
+```
+
+::: title 在线安装
+:::
+
+::: describe 根据不同的 CDN 提供商有不同的引入方式，我们在这里以 unpkg 举例。
+:::
+
+```html
+<!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>
+```