Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to use mandMobile in the front-end html5, the article is very detailed, has a certain reference value, interested friends must read it!

1. Install first

Npm I mand-mobile-S

two。 Introduce

Global introduction

If import {Button} from 'mand-mobile'; is used, all modules under mand-mobile will be introduced.

In order to improve packaging and browser download speed, it is recommended to use on-demand introduction

You can introduce on demand in the following ways

Import Button from 'mand-mobile/lib/button'import' mand-mobile/lib/mand-mobile.css' / / style is introduced separately

This allows components to be brought in on demand, but styles are all introduced.

A better way is to use the plug-in babel-plugin-import

Install the plug-in cnpm I babel-plugin-import-save-dev

Using the plug-in, add the babel.config.js or .babelrc.js file, and add the following configuration:

Module.exports = {"plugins": [["import", {"libraryName": "mand-mobile", "libraryDirectory": "lib", "style": true / / documentation says there is no need to configure style, maybe the default value is true bar}]]}

Once configured, you can use it directly in the project: import {Button} from 'mand-mobile'

In this way, components and styles are introduced on demand, and relatively few lines of code are written, so it is useful to configure if there are many components introduced.

3. Configure postcss.config.js or .postcssrc.js

Module.exports = {plugins: [require ('postcss-pxtorem') ({rootValue: 75, / / result: design draft element size / 75 minPixelValue: 2, / / elements less than or equal to 2 are not processed propWhiteList: []})]}

If you want to ignore individual attributes without conversion, the easiest way is to use uppercase PX in pixel cell declarations, for example, some fonts do not need to be converted. At this point, the project is connected to the UI library.

4. How to customize the theme

We have two ways to customize the theme: one is css style override, the other is style variable override.

The first way is to write our own style theme, and then introduce it globally and forcibly overwrite the original style, which is a little less elegant, but there is nothing wrong with it.

The second is described in the documentation, that is, overriding style variables, which requires us to do some configuration:

First modify the babel.config.js to change the value of libraryDirectory to "components". The components folder holds all the components. Rerun after the change, at this time you will find that your styles are gone, because there are some things missing in components, which can be compared with the lib folder, for example, the following figure shows the lib folder and components does not have these, if you add the import 'mand-mobile/lib/mand-mobile.css'; style at this time, but can not add it, because we have to override the style variables to customize the theme.

How to cover it? In fact, components in components have styles, but the values of these styles are style variables, and there are no variables introduced inside the components. For example, take a look at the source code of Button. Some of its styles are as follows:

.md-button position relative display block height button-height / / style variable line-height button-height / / style variable font-size button-font-size / / style variable font-weight button-font-weight / / style variable font-family font-family-normal text-align center border none border-radius button-radius / / style variable box-sizing border-box

So we just need to introduce these variables, the style can be displayed normally, and then we can change the theme by overriding the values of these variables. The key is how we introduce these variables.

According to the document, first we create a new custom theme file, such as theme.custom.styl, and then introduce the style variable here:

@ import'~ mand-mobile/components/_style/mixin/util'@import'~ mand-mobile/components/_style/mixin/theme.components'@import'~ mand-mobile/components/_style/mixin/theme.basic'// install and introduce css extension nib (optional) @ import'~ nib/lib/nib/vendor'@import'~ nib/lib/nib/gradients'

After the introduction, we also need to configure webpack to make it effective in our project. I use vue-cli3, so do the following configuration in vue.config.js:

Module.exports = {css: {loaderOptions: {stylus: {import: [resolve (`.src / assets/ theme.custom`)] / / configure the path} according to the actual situation of your project

This time is basically fine, but there is another style file that needs to be introduced, that is, the global style, because we need to import the so style separately in the component folder. Add the following code to your entry file (mian.is):

Import 'mand-mobile/components/_style/global.styl'

Referenc

Global style variables and component style variables, set these values in theme.custom.styl, you can customize the theme.

5. Project start

If some properties do not take effect, see if the version of the UI library is too low

The above is all the content of the article "how to use mandMobile in front-end html5". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.