layui 引入方式

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。

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

layui 引入方式相关推荐

layui引入第三方依赖
layui引入第三方js插件准备编写第一个Hello World 配置第三方js路径用layui包裹一个js插件在页面调用在layui中引入moment第三方插件配置moment momen ...
前端之css引入方式/长度及颜色单位/常用样式
1.css三种引入方式 <!DOCTYPE html><html><head> <meta charset="UTF-8"> < ...
web前端（13）—— 了解JavaScript，JavaScript的引入方式
从本篇博文开始,将进入web前端方便最关键最重要的部分--javascript,学到后面你就知道它真的太重要了什么是JavaScript JavaScript一种直译式的脚本语言,是一种动态类型.弱 ...
05CSS的引入方式
1.CSS的三种样式表按照CSS样式书写的位置(或者引入的方式),CSS样式表可以分成三大类: 内部样式表(嵌入式) 行内样式表(行内式) 外部样式表(链接式) 2.内部样式表内部样式表(内嵌样式 ...
11月8日学习内容整理：js的引入方式，变量数据类型，运算符，流程控制，函数...
js是一门成熟的编程语言,专门用浏览器客户端执行的语言一.js的引入方式 1.直接在body标签中使用script标签写js语言 2.通过script标签导入js文件,<script sr ...
python全栈开发 * 表格标签表单标签 css 引入方式 * 180807
html部分一.表格标签<table> 1.一个表格<table>由每行<tr>组成的,每行是由<td>组成的. 注意: 一个表格是由行组成的(行是由 ...
CSS 从入门到放弃系列：CSS的引入方式
css的四种引入方式内联方式(行间样式) <div style="width:100px;height: 100px; background-color: red"> ...
006 CSS三种引入方式
CSS三种引入方式一.三种方式的书写规范 1.行间式 <div style="width: 100px; height: 100px; background-color: red&q ...
LayUi引入JSON文件进行表格重载时出现接口请求异常
标题 LayUi引入JSON文件进行表格重载时出现接口请求异常表格重载代码 HTML代码<table class="layui-hide" id="commodi ...

layui 引入方式

1、UNPKG 引入

2、CDN引入

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

layui 引入方式相关推荐

最新文章

热门文章