web建站教程
  1. 首页
  2. vuejs
  3. js
  4. 好玩
  5. AIGC工具
  6. 前端知识
  7. 百度echarts
  8. 更多
    php入门
    nodejs
    mockjs
    reactjs
    mysql
    wordpress
    织梦cms
    帝国cms
    git教程
    IT知识
    模板大全
    休息站
    手机应用

Layui - Vue如何快速上手

886 ℃

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组件库

上面是“Layui - Vue如何快速上手”的全面内容,想了解更多关于 vuejs 内容,请继续关注web建站教程。

当前网址:https://ipkd.cn/webs_13021.html

声明:本站提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请发送到邮箱:admin@ipkd.cn,我们会在看到邮件的第一时间内为您处理!

当前位置: 网站首页 > vuejs
本文共计1923个字,预计阅读时长13分钟
生活小工具,收录了80多款小工具
上一篇: 推荐一个免费、无版权的古典音乐下载的网站——Musopen
下一篇: 推荐一款免费在线图片处理工具——佐糖图片平台
x 打工人ai神器