在vue里引入element-ui或mint-ui

安装element-ui

一、在项目路径下安装element-ui，运行命令：

npm install element-ui -s

二、项目导入 element-ui

修改main.js文件

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

Vue.use(ElementUI)

在vue项目中安装使用Mint-UI

一、安装 Mint UI：

npm i mint-ui --save

然后需要引入 Mint UI ,这里有两种情况:

1. 引入全部组件

如果项目会用到 Mint UI 里较多的组件，最简单的方法就是把它们全部引入。此时需要在入口文件 main.js 中：

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

2. 按需引入

如果你只需要使用某个组件，可以仅引入这个组件，Mint UI 能够保证在代码打包时，与这个组件无关的文件不会出现在最终代码里。比如需要引入 Button 组件，则在 main.js 中：

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

上面两种引入方法都要单独引入相应的 CSS 文件。这很不方便，尤其当你使用按需引入的方法引入多个组件时。

为了避免这个问题，可以使用 babel-plugin-component 插件。

1. 首先安装：

npm i babel-plugin-component -D

2. 然后在 .babelrc 中配置它：

{
  "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. 这样上述两种引入方法就可以简化为：

//import Mint from 'mint-ui';
//Vue.use(Mint);
//import 'mint-ui/lib/style.css';    //不需要手动导入mint-ui样式
import Button from 'mint-ui/lib/button';
Vue.component(Button.name, Button);

import { Swipe, SwipeItem } from 'mint-ui';   //按需引入部分组件
Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);

前面安装的插件会自动引入相应的 CSS 文件！

出处：https://www.cnblogs.com/stella1024/p/7771334.html

来源：https://www.cnblogs.com/Strangers/p/11924702.html

标签

vue

按钮

mint