首先安装:

cnpm i element-ui -S  //安装element-ui
cnpm i mint-ui -S  //安装mint-ui

为了减小项目体积,为了引入插件或者组件时会自动引入相应的 CSS 文件,咱们按需引入,所以借助: babel-plugin-component 

肯定得安装:

cnpm i babel-plugin-component -D

然后修改.babelrc:

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    ["component",
      [{
        "libraryName": "mint-ui",
        "style": true
      },
        {
          "libraryName": "element-ui",
          "styleLibraryName": "theme-chalk"
        }]
    ]
  ]
}

当然这样写还不够,会报错,所以我们还需安装:

cnpm install babel-preset-es2015 --save-dev

还有第二种方法,在网上看的:

再需安装一个: npm install babel-plugin-import --save-dev 

然后再修改:

{
"presets": [

["env", {
  "modules": false,
  "targets": {
    "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
  }
}],
"stage-2"

],
"plugins": ["transform-vue-jsx", "transform-runtime",

["component", {
  "libraryName": "mint-ui",
  "style":true
}],
["import",
  {
    "libraryName": "element-ui",
    "styleLibraryName": "theme-chalk"
  }
]

]
}

这个我没试,大家可以试一试,我只是在这里先记录一下。

配置好后,举个例子:

import Vue from 'vue'
import App from './App.vue'
import Element from 'element-ui'
import {Button } from 'mint-ui/lib/button';

Vue.component(Button.name, Button);
Vue.use(Element)



new Vue({
  el: '#app',
  render: h => h(App)
})

 

GitHub 加速计划 / eleme / element
14
2
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:2 个月前 )
c345bb45 1 年前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 1 年前
Logo

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。

更多推荐