当前位置: 首页 > 工具软件 > Lemon-IMUI > 使用案例 >

VUE+mint-ui按需引入总结

卫博
2023-12-01

第一步:安装mint-ui(这里不细说)

第二步;运行npm install babel-plugin-component (文档写的npm install babel-plugin-component -D,)(我按文档知道装了报错,项目无法编译,可能是和版本有关系???多次尝试后把-D删掉就可以)

第三部: 修改.babelrc 文件,一般安装在项目根目录下
(我按文档说的修改的内容走报错无法运行,后来发现只需要在.babelrc文件里面的plugin加上以下内容即可)
["component", [ { "libraryName": "mint-ui", "style": true } ] ]

我的最终结果如下:

{
  "presets": [
    ["env", { "modules": false }],
    "stage-2"
  ],
  "plugins": ["transform-runtime"],
  "comments": false,
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": [
        "istanbul" ,
        ["component", [
          {
            "libraryName": "mint-ui",
            "style": true
          }
        ]]
      ]
    }
  }
}


第四部:修改main.js文件
首先,引入使用的组件(以下是我用到的)

//按需引入
import { Button, TabContainer, TabContainerItem, Loadmore , } from 'mint-ui'

然后,声明使用组件(文档说可以写成Vue.use(xxxx),我这么写报错,具体原因未知,建议用下面的写法)

//按需引入
Vue.component(Button.name, Button);
Vue.component(TabContainer.name, TabContainer);
Vue.component(TabContainerItem.name, TabContainerItem);
Vue.component(Loadmore.name, Loadmore);

第五步:npm run build 运行无报错,成功

附全局引入:(这里多了个CSS文件的引入,按需引入的话这行也要注释掉)

// 全局引入
// import MintUI from 'mint-ui'
// import 'mint-ui/lib/style.css'

// 全局引入
// Vue.use(MintUI)
 

 类似资料: