Get the App
SLTechnology News&Howtos  ›  Development  › 

Can vuejs use mui?

Shulou Source: shulou.com Published: 2022-06-03 10:50:27 11月15日 Update

This article is to share with you about whether vuejs can use mui. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Vuejs can use mui, method: 1, to github to download the MUI file; 2, copy the download file dist directory three files copied to the mui project directory; 3, in the main.js file, the introduction of mui css style file; 4, according to the needs of the style source code added to the specified page.

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

How to use MUI in VUE

1. Step 1: download MUI

Baidu searches MUI to enter its official website and click on the github address in the upper right corner to download the MUI file.

Step 2: copy the file

Copy the three files in the dist directory where you downloaded the files into the mui directory you created in your project.

If the introduced mui.css reports an error, it may be that the url in the mui will point to some pictures, so change the single quotation marks of the image address to double quotation marks.

Step 3: introduce the style of MUI

In the main.js file, introduce the css style file of mui

Import 'relative path to mui.css file'

Such as import'.. / mui/css/mui.css'

Step 4: add the style source code to the page according to the requirements

1) Select the effect of demand style

Run the mui-master\ examples\ hello-mui\ index.html file

Right-click > View page source code > copy the corresponding code (this corresponding code is the style code you need)

Next, take the third card (the one with pictures and text) in the card view of MUI as an example.

2) copy the source code of requirement style

After clicking the card view, go to the view page

Right mouse > Click to view the web source code > copy the code you want to apply > paste the copied code into the page you want to use

The third card view source code:

Posted on January 18, 2016

A summary of the article is shown here to give the reader a rough idea of the content of the article.

LikeRead more

Thank you for reading! This is the end of the article on "whether vuejs can use mui". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it out for more people to see!

Tags: File style code three card source code directory view requirements page content copy article no picture address quotation mark more source code article Apple Docker Huawei Linux macOS MariaDB Microsoft MySQL NVidia OPPO Reno NVidia Xiaomi Shulou Information macOS Microsoft