layui 引入方式

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

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

1、UNPKG 引入

• 官方包目录结构

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

  
  <link 
  rel="stylesheet" 
  href="./layui/css/layui.css"
  >
  
  <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 
  

• 引入：

  
  <link 
  rel="stylesheet" 
  href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css"
  >
  
  <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 （不推荐：打包时路径会发生错误）

  方式二：

  • 使用 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。

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