Mint UI在Vue中如何引入

1. 安装mint-ui

   npm install mint-ui  --save

   

2. 检查一下是否 安装成功

   查看配置文件package.json文件是否有mint-ui的版本信息

   

3. main.js中引入mint-ui

   import MintUI from 'mint-ui'

   import 'mint-ui/lib/style.css'

   Vue.use(MintUI)

   

4. 组件调用

   我们测试一下button组件能否正常显示 。

   button组件在页面正常显示了，说明我们成功了。

   

   

5. 步骤三的方法是将所有的mint-ui组件全部引入，有一些组件可能是项目中不需要的，那么就需要按需引入。

   首先需要安装 babel-plugin-component

   

   

6. 修改.babelrc文件

   "plugins": [["component", [   

      {     

          "libraryName": "mint-ui",  

          "style": true  

        } 

     ]]]

   

7. 在main.js中引入项目需要的组件

   本例子中引入 button组件用于实践效果

   

8. 步骤4中的代码不变，查看效果，正常显示，按需引入成功。