vant-ui安装和使用(Vue2.0)

完整引入方式

• 安装依赖包

  yarn add vant -S

• 在main.js中引入依赖样式

  import Vue from 'vue';
  import Vant from 'vant';
  import 'vant/lib/index.css'
  Vue.use(vant)

按需引入方式

• 安装依赖包

  yarn add vant -S

• 按需引入依赖包

  yarn add babel-plugin-import -D

• 在babel.config.js里配置

  plugins: [
      ['import', {
          libraryName: 'vant',
          libraryDirectory: 'es',
          style: true
      }, 'vant']
  ]

• 再main.js里引入

  import { Button, NavBar } from 'vant';​
  Vue.use(Button).use(NavBar)

• 在需要的地方直接引入 vant组件库。

由于vant官网经常崩溃

所以代替网址

Vant 中文教程_w3cschool

mint-ui 按需引入方式

• 安装依赖插件

  npm install babel-plugin-component -D​
  yarn add babel-plugin-component -D​

  • 然后，将 .babelrc 修改为：

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