vant 爬坑（一）

vant 通过脚手架安装：

# 安装 Vue Cli
npm install -g @vue/cli

# 创建一个项目
vue create hello-world

# 创建完成后，可以通过命令打开图形化界面，如下图所示
vue ui

按需引入组件：

方式一. 自动按需引入组件 (推荐)
babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式。

# 安装插件
npm i babel-plugin-import -D
// 在.babelrc 中添加配置
// 注意：webpack 1 无需设置 libraryDirectory
{
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}

// 对于使用 babel7 的用户，可以在 babel.config.js 中配置
module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};
// 接着你可以在代码中直接引入 Vant 组件
// 插件会自动将代码转化为方式二中的按需引入形式
import { Button } from 'vant';
经过确认 这部分引入我的环境下执行不起来 具体原因未知。


// 引入以后 样式不显示 提示错误：
did you register the component correctly? For recursive components ...

问题说明：
没有注册该组件！

其他按需引入方式：

import { Button } from 'vant';

components: {
    [Button.name]: Button
  },

这样就可以啦！

文档这里没有说明我是没想到的。

vant 爬坑 （一）

vant 爬坑（一）