📝(component): 更新 GetStarted.md 安装说明
This commit is contained in:
就眠儀式
parent
c00657554f
commit
fae6c88cb7
@ -1,4 +1,4 @@
|
||||
.lay-affix-content{
|
||||
.layui-affix{
|
||||
display: block;
|
||||
z-index: 999;
|
||||
transition: all 0.3s ease-in-out;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="lay-affix-content" :style="getStyle" ref="dom">
|
||||
<div class="layui-affix" :style="getStyle" ref="dom">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
@ -11,7 +11,7 @@ export default {
|
||||
</script>
|
||||
<script setup lang="ts">
|
||||
import "./index.less";
|
||||
import { ref, onMounted, onUnmounted, nextTick, computed, reactive } from "vue";
|
||||
import { ref, onMounted, onUnmounted, nextTick, computed, reactive, StyleValue } from "vue";
|
||||
export interface LayAiffxProps {
|
||||
offset?: number;
|
||||
target?: HTMLElement;
|
||||
@ -50,7 +50,7 @@ const getStyle = computed(() => {
|
||||
} else {
|
||||
style.bottom = fixedOffset - marginBottom + "px";
|
||||
}
|
||||
return style;
|
||||
return style as StyleValue;
|
||||
}
|
||||
});
|
||||
//检查是否在窗口内
|
||||
|
||||
@ -375,12 +375,12 @@ const cutTransaction = () => {};
|
||||
>
|
||||
<input
|
||||
type="file"
|
||||
ref="orgFileInput"
|
||||
class="layui-upload-file"
|
||||
:multiple="multiple"
|
||||
:accept="acceptMime"
|
||||
ref="orgFileInput"
|
||||
:name="field"
|
||||
:field="field"
|
||||
:multiple="multiple"
|
||||
:accept="acceptMime"
|
||||
:disabled="disabled"
|
||||
@click="clickOrgInput"
|
||||
@change="getUploadChange"
|
||||
|
||||
@ -17,16 +17,17 @@
|
||||
</p>
|
||||
<br>
|
||||
|
||||
::: title 使用包管理
|
||||
::: title 安装组件
|
||||
:::
|
||||
|
||||
::: describe 使用 npm 工具安装 layui vue, 然后你可以使用打包工具, 如 vite rollup.
|
||||
::: describe 使用 npm 工具安装 layui vue，若安装缓慢，可尝试用 pnpm 或其他镜像源。
|
||||
:::
|
||||
|
||||
```
|
||||
npm install @layui/layui-vue --save
|
||||
```
|
||||
::: title 完整引入
|
||||
|
||||
::: title 全局注册
|
||||
:::
|
||||
|
||||
```js
|
||||
@ -37,50 +38,42 @@ import '@layui/layui-vue/lib/index.css'
|
||||
|
||||
createApp(App).use(Layui).mount('#app')
|
||||
```
|
||||
::: describe 以上代码便完成了 layui-vue 的引入。需要注意的是，样式文件需要单独引入。
|
||||
::: 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> 插件，插件会自动解析模板中用到的组件，并引入组件和样式。
|
||||
::: 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 文件
|
||||
::: describe 然后修改你的 vite.config.js 或 vue.config.js 的配置。
|
||||
:::
|
||||
|
||||
```js
|
||||
// vite.config.ts
|
||||
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()],
|
||||
}),
|
||||
// 自动解析 layui-vue 组件
|
||||
Components({
|
||||
resolvers: [LayuiVueResolver()],
|
||||
}),
|
||||
],
|
||||
}
|
||||
```
|
||||
|
||||
::: describe LayuiVueResolver 类型声明
|
||||
::: describe Resolver 选项配置。
|
||||
:::
|
||||
|
||||
```ts
|
||||
export declare function LayuiVueResolver(
|
||||
options?: LayuiVueResolverOptions = {}
|
||||
): ComponentResolver
|
||||
|
||||
export interface LayuiVueResolverOptions {
|
||||
/**
|
||||
* 将样式与组件一起导入
|
||||
@ -105,10 +98,13 @@ export interface LayuiVueResolverOptions {
|
||||
}
|
||||
```
|
||||
|
||||
::: title 手动按需
|
||||
::: title 手动引入
|
||||
:::
|
||||
|
||||
::: describe 需要手动引入组件样式
|
||||
::: describe 原生支持 es-module 的 tree shaking 用法。
|
||||
:::
|
||||
|
||||
::: describe 如果你完全使用 layui-vue 构建项目, 我们更推荐全局注册与自动按需的方式。
|
||||
:::
|
||||
|
||||
```js
|
||||
@ -126,22 +122,7 @@ app.component("LayTable", LayTable);
|
||||
app.mount('#app')
|
||||
```
|
||||
|
||||
::: title 基础示例
|
||||
:::
|
||||
|
||||
```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>
|
||||
</lay-layout>
|
||||
```
|
||||
::: title 浏览器导入
|
||||
::: title 在线安装
|
||||
:::
|
||||
|
||||
::: describe 根据不同的 CDN 提供商有不同的引入方式，我们在这里以 unpkg 举例。
|
||||
@ -150,44 +131,39 @@ app.mount('#app')
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Document</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<!-- 引入 layui-vue 样式 -->
|
||||
<link rel="stylesheet" type="text/css" href="https://unpkg.com/@layui/layui-vue/lib/index.css">
|
||||
<!-- 引入 Vue 3, 使用全局变量 Vue -->
|
||||
<script src="https://unpkg.com/vue@3"></script>
|
||||
<!-- 引入 layui-vue 组件库, 使用全局变量 LayuiVue -->
|
||||
<script src="https://unpkg.com/@layui/layui-vue"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<lay-button @click="openLayer">Hello</lay-button>
|
||||
</div>
|
||||
</body>
|
||||
<script>
|
||||
const { createApp, ref } = Vue;
|
||||
const { layer } = LayuiVue;
|
||||
|
||||
<head>
|
||||
<title>Document</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<!-- 引入 layui-vue 样式 -->
|
||||
<link rel="stylesheet" type="text/css" href="https://unpkg.com/@layui/layui-vue/lib/index.css">
|
||||
<!-- 引入 Vue 3, 使用全局变量 Vue -->
|
||||
<script src="https://unpkg.com/vue@3"></script>
|
||||
<!-- 引入 layui-vue 组件库, 使用全局变量 LayuiVue -->
|
||||
<script src="https://unpkg.com/@layui/layui-vue"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app">
|
||||
<lay-button @click="openLayer">Hello</lay-button>
|
||||
</div>
|
||||
</body>
|
||||
<script>
|
||||
const { createApp, ref } = Vue;
|
||||
const { layer } = LayuiVue;
|
||||
|
||||
const App = {
|
||||
setup() {
|
||||
const openLayer = function () {
|
||||
layer.msg("hello");
|
||||
const App = {
|
||||
setup() {
|
||||
const openLayer = function () {
|
||||
layer.msg("hello");
|
||||
}
|
||||
return {
|
||||
openLayer
|
||||
}
|
||||
}
|
||||
return {
|
||||
openLayer
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const app = createApp(App);
|
||||
app.use(LayuiVue);
|
||||
app.mount('#app');
|
||||
</script>
|
||||
};
|
||||
|
||||
createApp(App).use(LayuiVue).mount('#app');
|
||||
</script>
|
||||
</html>
|
||||
```
|
||||
@ -120,6 +120,7 @@
|
||||
<lay-color-picker
|
||||
v-model="appStore.themeVariable['--global-neutral-color-8']"
|
||||
></lay-color-picker>
|
||||
<lay-button :fluid="true" border="green" border-style="dashed">重置配置</lay-button>
|
||||
</div>
|
||||
</template>
|
||||
</lay-dropdown>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user