Can vuejs use mui?

vuejs can use mui, method: 1. Go to github to download the MUI file; 2. Copy the three files in the dist directory of the downloaded file to the mui project directory; 3. In the main.js file, Introduce mui's css style file; 4. Add the style source code to the specified page according to requirements.

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 Search for MUI and enter its official website, click on the github address in the upper right corner, and download the MUI file

2. Step 2: Copy the file

Copy Copy the three files in the dist directory of the downloaded file to the mui directory created in your project.

If the imported mui.css reports an error, it may be that the url in mui will point to some pictures. Change the single quotes of the image address to double quotes will do.

3. Step 3: Introduce the style of MUI

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

import 'The relative path of the mui.css file';

such as import '../mui/css/mui.css';

#4. Step 4: Add the style source code to the page according to the requirements

1) Select the required style effect

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

Right click> View web page source code> Copy the corresponding code (this corresponding code is the code of the style you need)

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

2) Copy the requirement style source code

After clicking on the card view, enter the view page

Right-click the mouse> Click to view the web page 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:

<div class="mui-card">

<div class="mui-card-header mui-card-media" style="height:40vw;background-image:url(../images/cbd.jpg)"></div>

<div class="mui-card-content">

<div class="mui-card-content-inner">

<p>Posted on January 18, 2016</p>

<p style="color: #333;">这里显示文章摘要，让读者对文章内容有个粗略的概念...</p>

</div>

</div>

<div class="mui-card-footer">

<a class="mui-card-link">Like</a>

<a class="mui-card-link">Read more</a>

</div>

</div>

Related recommendations: "vue.js Tutorial"

The above is the detailed content of Can vuejs use mui?. For more information, please follow other related articles on the PHP Chinese website!