Home > Web Front-end > Vue.js > How to solve the error reporting problem of layui in vue

How to solve the error reporting problem of layui in vue

藏色散人
Release: 2023-01-13 00:45:06
Original
2693 people have browsed it

The solution to layui errors in vue: first place the layui file under the static file; then introduce layui in the html file using link and script tags to use layui normally in vue.

How to solve the error reporting problem of layui in vue

The operating environment of this tutorial: windows7 system, vue version 2.0, DELL G3 computer.

[Related article recommendations: vue.js]

In the vue project, when using npm to install and introduce layui, an error occurs

In On the official website, we can see that he mentioned that npm installation is supported, but when we installed it successfully, when we introduced it in main.js, we reported an error that the module could not be found.

So, we download the file package first, and then introduce it into the html file using link and script tags

The downloaded file package must be placed in a static file

I I tried placing the downloaded folder in the same directory as the html file, in the src directory, or in the assets directory, but an error that layui was not defined was reported.

Correct usage posture :

We put the file under the static file, and then introduce it under the html file, so that the layui object can be used in any component, so that we can use layui correctly. Various 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>
Copy after login

The above is the detailed content of How to solve the error reporting problem of layui in vue. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template