According to the documents on the official website , In one html Use under file layui The component library is very simple , But in vue Use this in the project ui There are many pits in the library , Let's explain in detail how to vue-cli Use under the built project layui

1. First pit :vue Used in projects npm Error in installation and introduction ( At present, there is no suitable way to introduce , You can leave a message to discuss what you know )

We can see on the official website that he mentioned support npm install , But when we install it successfully , stay main.js The module's error cannot be found when it is introduced into .

therefore , Let's download the package first , And then html Used in documents link and script How to introduce labels

2. Second pit : The downloaded package must be placed in the static In file

I tried to put the downloaded folder in the html The files are placed in the same level directory and in the src Under the directory or on the assets Directory , All reported layui Undefined error

3. Correct posture :

We put the documents in static Under file , And then html Import under file , This can be used in any component layui This object , So we can use it correctly layui All kinds of things in it ui Components
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport"
content="width=device-width,initial-scale=1.0"> <title>pm</title> <link
type="text/css" rel="stylesheet" href="./static/layui/css/layui.css"/> <script
type="text/javascript" src="./static/layui/layui.js"></script> <style
type="text/css"> body,html{ margin:0; padding:1; } </style> </head> <body> <div
id="app"></div> <!-- built files will be auto injected --> </body> </html>
Components to use :
<template> <div class="layui-progress"> <div class="layui-progress-bar"
lay-percent="10%"></div> </div> </template> <script> export default{ data(){
return { } }, mounted(){ layui.use('element', function(){ var element =
layui.element }) }, methods:{ } } </script>
The above is a summary of personal experience , If you have better suggestions or I have mistakes, you can give feedback , I hope I can help you , Thank you

Technology
©2019-2020 Toolsou All rights reserved,
TP6 Application examples of verifier and correct verification data ESP8266/ESP32 System : Optimize system startup time 2021 year 2 Chinese programming language ranking 2021 year 1 Monthly programmer salary statistics , average 14915 element CSS architecture design It's not depravity that's terrible , It's about knowing you're falling Gude Haowen serial - You deserve to be an engineer ( Preface ) Software testing BUG describe C Course design of language programming of 《 Student achievement management system 》vue In the project axios Global encapsulation of