vue 引入mint ui

最新推荐文章于 2023-12-17 10:00:00 发布

ai_feng123

最新推荐文章于 2023-12-17 10:00:00 发布

阅读量618

点赞数

分类专栏： mint ui

本文链接：https://blog.youkuaiyun.com/ai_feng123/article/details/97391520

版权

mint ui 专栏收录该内容

1 篇文章

订阅专栏

在使用Vue开发移动端应用时，引入Mint UI作为组件库。通过vue-cli初始化项目后，按照步骤安装：1) 使用npm安装mint-ui和babel-plugin-component；2) 在.babelrc配置文件中添加相应设置；3) 安装style-loader解决样式问题；4) 在main.js中导入Mint UI，完成样式加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

接触vue ，需要用来写移动端app,引入组件样式下导航

Mint-UI 官网：mint ui

Vue项目直接用vue-cli生成，直接进入正题

执行命令：

1、下载mint ui 安装包 npm install --save mint-ui,按需导入再执行 npm install --save-dev babel-plugin-component

2、在babel 设置文件中添加：

 "plugins": [
    [
      "component",
      { "libraryName": "mint-ui", "style": true }
    ]
  ],

可是执行报错

Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: .plugins[0][2] must be a string, or undefined

3、再执行 cnpm install style-loader -D 报错不再出现

4、copy 官方文本

mian.js中引入

import { Tabbar, TabItem } from 'mint-ui';

import'mint-ui/lib/style.css'
Vue.component(Tabbar.name, Tabbar);
Vue.component(TabItem.name, TabItem);

<div>
  <mt-tabbar v-model="selected" fixed>
  <mt-tab-item id="外卖">
     <i class="iconfont icon-shouye"></i>
    首页
  </mt-tab-item>
  <mt-tab-item id="订单">
     <i class="iconfont icon-sousuo"></i>
     搜索
  </mt-tab-item>
  <mt-tab-item id="发现">
    <i class="iconfont icon-dingdan"></i>
    订单
  </mt-tab-item>
  <mt-tab-item id="我的">
    <i class="iconfont icon-gerenzhongxin"></i>
    我的
  </mt-tab-item>
</mt-tabbar>
</div>

这样样式就出现了