vue项目中vant-ui按需导入

目录

 

概念：

Ⅰ、安装

 Ⅱ、导入

Ⅲ 最后，很重要，一定要重启项目

---

概念：

以前我使用ui组件库的时候，总是全局导入，但是到了实际开发中，为了提升性能，都会需要我们使用按需导入。

Ⅰ、安装

① 安装vant-ui插件

cnpm install vant-ui --save    

②  通过 npm 安装

npm i vant -S 

③ 通过 yarn 安装

yarn add vant -S

 Ⅱ、导入

 我们先来说一下以前的导入方式 (全局导入)
这种导入方式直接在 main.js 文件下引入 以下两个文件就可以了

import Vant from ‘vant’；

import ‘vant/lib/index.css’；

还要要记得： Vue.use(vant) (安装插件)

 接下来说一下我们今天的按需导入

① 安装插件：babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式
    安装按需引入的插件 命令：

npm i babel-plugin-import -D 

然后找到 babel.config.js 文件
将下面这段代码复制进去

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

​

 ② 如图：

③  创建一个plugin文件夹，在plugin中定义一个js文件用来存放代码

 ④ 之后在建好的js文件中首先导入vue，再导入需要的vant-ui插件，通过vue.use()全局注入

⑤ 最后在main.js中引入

//配置vant
import './plugin/vant'

⑥ 之后哪里需要使用，就可以直接使用了。 

Ⅲ 最后，很重要，一定要重启项目

npm run serve
不然就会没有样式效果

关注持续更新呦-.-