preface

While writing a project for my company, I encountered a need to integrate Layim for online customer service. After a lot of trouble, I finally integrated Layui into it. Next, I would like to share my solution with you

Get layim

Layui officially provides the installation method of NPM, and our company uses layim authorized by layUI’s legal version. Today, we found that we obtained LayUI from NPM warehouse, which contains Layim, so we can go to a white piao, but we need to pay attention to copyright issues (as shown in the picture below,layui’s official website has made a statement).

Commercial projects or suggest that you get the authorization of the original, after all, the author is not easy.

  • Install the Layui-src dependency in your project
yarn add layui-src | npm install layui-src
Copy the code

Successful installation

  • innode_modulesfindlayui-srcUnder thebuildThe folder is copied to the public directory of the project
  • For project clarity, we renamed the Build folder to Layim

Integrate and use Layim

I refuse to integrate and use Layui in vUE project, because VUE and Layui are two completely different things, the underlying design concept of the two frameworks is completely different, but the company needs layim, layim depends on Layui, after all, the company arranges the largest, I can only from the company ðŸĪŠ

The following operations are applicable to vue CLI3.0 construction projects, CLI version higher than 3.0 is no problem, less than 3.0 will have problems, please note.

  • Open the project’s index.html file (public/index.html) and add the following code to the head
  <! - introduce layim -- -- >
 <link rel="stylesheet" href="<%= BASE_URL %>/layim/css/layui.css">
 <script type="text/javascript" src="<%= BASE_URL %>/layim/layui.js"></script>
Copy the code
  • Disable esLint validation of LayUI

If your project is not configured with ESLint, skip this step. If so, follow my instructions below to configure it, otherwise the project will report an error and fail to start.

Open the.eslintrc.js file in the project root directory and add the following code to module.exports

  globals: {
    layui: true
  },
Copy the code
  • Test for success in the component
   console.log("Layui integration successful");
   console.log(layui);
   layui.use("layim", layim => {
      console.log("Layim integration successful");
      console.log(layim);
   });
Copy the code
  • Start the project and view the console print

We found that both Layui and Layim objects already had data, so we could proceed with the project development according to the official documentation provided by Layui.

Since Layui is a direct DOM manipulation, dependent on jquery, and Vue is a data-driven DOM, it is not recommended to create layui in VUE if it is not necessary, because there will be many compatibility problems in the subsequent use, and there will be a lot of holes to fill.

Write in the last

  • If there are any errors in this article, please correct them in the comments section. If this article helped you, please like it and follow 😊
  • This article was first published in nuggets. Reprint is prohibited without permission 💌