vue中使用layui

*如何在vue中使用layui

第一次在vue中使用layui，完全不知道怎么引入样式与功能，百度了很多办法才弄好，特意来记录一下使用的过程，本次使用vue 2.x ，使用vue/cli构建项目，用vue create 【项目名称】，来创建项目。

下载layui

将使用脚手架创建的项目给清空一下，保留最原始的页面，后续将在清空的页面进行页面的编辑。
下载layui文件，在layui的官网下载即可。
layui官网

直接点击下载。
把解压后的文件夹放到项目的public文件夹里面
##引入layui问价
然后在public文件夹下的index.html引入
在这里插入图片描述

这样就可以使用了
##测试
在官网复制一段代码

千万不要忘了最下面的js内容

然后运行项目 npm run serve
效果图如下

此方法最为简单，有效。
##建议在vue中不要使用layui，建议使用elementui。（最重要）

##本次使用遇到的问题（未解决，有大佬解决的希望告知一下）

1.使用npm命令，在vue项目中下载layui。
命令：npm i layui-src
下载完成后，我们会在根目录下的package.json文件中看到我们下载的layui版本号，如下图

引入css样式

在创建的项目的main.js文件中引入css文件
import ‘layui-src/dist/css/layui.css’

引入js文件

1：
在创建的项目的main.js文件中引入layui的js文件
import “layui-src/dist/layui.all.js”
此时我们会看到以下报错信息

此时我们执行 npm install --save jquery
然后重新运行项目就可以了，就会没有报错信息。
至此，全部的文件都已经引入完成了，后面就是在layui的官网，找到自己需要用到的模块，复制到自己页面。
在此，随便去layui官网复制一段代码，看看是否成功。虽然基本样式出现了，但是没有js样式，找了很多办法没有解决。最终放弃了。有解决的大佬希望能告知。
谢谢大家。本次到此结束，希望对你有所帮助，最后大声的说一声：
vue中不要使用layui；vue中不要使用layui；vue中不要使用layui；（重要的事情说三遍）。