Introducing element-ui or mint-ui in the vue

Introducing element-ui or mint-ui in the vue

Installation element-ui

First, the installation element-ui, run the command in the project path:

npm install element-ui -s

Second, the project import element-ui

Modify main.js file

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

Installation Mint-UI project in vue

First, install Mint UI:

npm i mint-ui --save

Then need to introduce Mint UI, there are two cases:

1. The introduction of all components

If the project will be used in more Mint UI components, the easiest way is to put them all introduced. At this time, the file entry need main.js in:

import Mint from 'mint-ui';
Vue.use(Mint);
import 'mint-ui/lib/style.css';

2. Introduction of demand

If you only need to use one of the components can be introduced only this component, Mint UI code is to ensure that when packaged, nothing to do with this component files will not appear in the final code. Button assembly such as the need to introduce, at the main.js:

import Button from 'mint-ui/lib/button';
import 'mint-ui/lib/button/style.css';
Vue.component(Button.name, Button);

Introduction method to be introduced into the above two corresponding CSS file separately. This is very convenient, especially when you are using on-demand method introduced when introducing multiple components.

To avoid this problem, you can use babel-plugin-component plug-ins.

1. First Installation:

npm i babel-plugin-component -D

2. Then configure it in .babelrc in:

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-runtime",["component",[
          {"libraryName":"mint-ui","style":true}
      ]]],
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": ["istanbul"]
    }
  }
}

 

3. Thus the two introduction method can be simplified as:

Import from Mint // 'mint-ui'; 
//Vue.use(Mint); 
// Import 'mint-ui / lib / the style.css'; // do not need to manually import the mint-ui style 
import Button from' mint -ui / lib / Button '; 
Vue.component (Button.name, the Button); 

Import the Swipe {,} from SwipeItem' Mint-UI '; // demand introduction portion assembly 
Vue.component (Swipe.name, Swipe); 
Vue.component (SwipeItem.name, SwipeItem);

The plug-in will be automatically installed in front of the introduction of the corresponding CSS file!

Source: https: //www.cnblogs.com/stella1024/p/7771334.html