vant官方文档: https://vant-contrib.gitee.io/vant/#/zh-CN/home
其他vue相关的移动端组件库: vux, mint(饿了么), cube-ui(滴滴) ...
项目基本目录结构
在 src 目录下中补充创建以下目录：
- /api ： 存储请求函数模块
- /styles: 样式文件模块
-
/utils: 工具函数模块
image-pro.png
全部引入 (不推荐)
全部引入, 会导入所有的组件, 虽然方便, 但是将来的打包体积也就大了 (200-300k)
- 安装
npm i vant
- 在
main.js中
import Vant from 'vant'
import 'vant/lib/index.css'
Vue.use(Vant)
- 安装
<van-button type="primary" size="large" round>主要按钮</van-button>
按需导入 (推荐)
减轻将来打包后的包的体积
- 安装
npm i vant
- 安装插件
npm i babel-plugin-import -D
//babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式
- 在
babel.config.js中配置
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
}
- 使用插件
main.js中
import { Button } from 'vant'
Vue.use(Button)
以上已经完成了vant组件库的按需导入，but but but!!! 由于组件的导入都书写到了main.js中,导致main.js 代码冗余 优化方案如下：
- 将vant组件的导入和注册单独抽离到utils文件夹中，新建vant-ui.js
import Vue from 'vue'
// 按需导入组件
import {
Button,
Switch,
Cell,
CellGroup
} from 'vant'
// 注册全局组件
Vue.use(Button)
.use(Switch)
.use(Cell)
.use(CellGroup)
- 直接导入main.js中
// 直接导入vant-ui.js
import '@/utils/vant-ui.js'
- 优缺点
优点：按需引入, 将来上线, 包的体积小
缺点：使用麻烦, 需要用一个导入一个
