layui 引入方式

最新推荐文章于 2024-05-10 20:21:50 发布

谁是张三

最新推荐文章于 2024-05-10 20:21:50 发布

阅读量7.9k

点赞数 1

分类专栏： UI框架文章标签： layui

本文链接：https://blog.csdn.net/qq_44708990/article/details/116799278

版权

UI框架专栏收录该内容

2 篇文章

订阅专栏

layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。

官网：https://www.layui.com/

1、UNPKG 引入

在这里插入图片描述

引入（解压目录名为：layui）

<!-- 引入layui.css -->
<link 
rel="stylesheet" 
href="./layui/css/layui.css"
>
<!-- 引入layui.js -->
<script scr="./layui/layui.js"></script>

2、CDN引入

资源地址：

CSS地址：https://www.layuicdn.com/layui-v2.5.6/css/layui.css 
JS地址：https://www.layuicdn.com/layui-v2.5.6/layui.js 
非模块化JS地址：https://www.layuicdn.com/layui-v2.5.6/layui.all.js

引入：

<!-- 引入layui.css -->
<link 
rel="stylesheet" 
href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css"
>
<!-- 引入layui.js -->
<script scr="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>

3、vue项目引用（有问题——亲测样式引入并不完全）

安装：（二选一）

npm i layui --save-dev

npm i layui-src --save-dev
依赖包的基本结构（layui-src结构与此相同）

在这里插入图片描述

引入：

方式一：

在模板样式文件中引入layui （不推荐：打包时路径会发生错误）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta 
    name="viewport" 
    content="width=device-width, initial-scale=1.0"
    >
    <title>this is start file</title>
    <link rel="stylesheet" href="./node_modules/layui/dist/css/layui.css">
    <script src="./node_modules/layui/dist/layui.js"></script>
</head>
<body>
    <div id="app"></div>
</body>
</html>

方式二：

使用 import 方式导入

resolve: {
	alias: {
		"layui$": 'layui/dist/layui.js'
	}
}

import layui from 'layui'
import "layui/dist/css/layui.css"
Vue.use(layui);

PS. layui 框架是基于jquery的，所以需要提前安装配置jquery。

有问题望指出。一起学习。