vue项目中vant-ui按需导入
前言:以前我使用ui组件库的时候,总是全局导入,但是到了实际开发中,为了提升性能,都会需要我们使用按需导入。1、安装通过 npm 安装npm i vant -S通过 yarn 安装yarn add vant2、导入我们先来说一下以前的导入方式 (全局导入)这种导入方式直接在 main.js 文件下引入 以下两个文件就可以了import Vant from ‘vant’;impo...
·
前言:以前我使用ui组件库的时候,总是全局导入,但是到了实际开发中,为了提升性能,都会需要我们使用按需导入。
1、安装
通过 npm 安装
npm i vant -S
通过 yarn 安装
yarn add vant
2、导入
我们先来说一下以前的导入方式 (全局导入)
这种导入方式直接在 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.js 的文件,然后再将这个vant.js文件引入到main.js中,你也可以直接在main.js文件中这样写你要按需导入的组件。
最后,很重要,一定要重启项目
npm run serve
不然就会没有样式效果
就像我的这个按钮一样,没有样式效果,我刚开始也是纳闷了很久,还以为是我哪里引入错了。
重启后:
最近又看到一句很好的话:当你的才华配不上你的野心时,就好好努力吧 !
更多推荐
已为社区贡献13条内容
所有评论(0)