初识vue第七篇

vant 组件库

1.组件库：

组件库：第三方 封装 好了很多很多的 组件，整合到一起就是一个组件库。

2.其他 Vue 组件库

Vue的组件库并不是唯一的，vant-ui 也仅仅只是组件库的一种。

① PC端： element-ui (element-plus)

ant-design-vue

② 移动端：vant-ui

Mint UI (饿了么) Cube UI (滴滴)

3.vant 全部导入 和 按需导入

4.全部导入：

① 安装 vant-ui

yarn add vant@latest-v2

② main.js 中注册

import Vant from 'vant'
import 'vant/lib/index.css'
// 把vant中所有的组件都导入了
Vue.use(Vant)

③ 使用测试

<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>

5.按需导入：

① 安装 vant-ui (已安装)

yarn add vant@latest-v2

② 安装插件

npm i babel-plugin-import -D

③ babel.config.js 中配置

module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
}

④ main.js 按需导入注册

import Vue from 'vue';
import { Button } from 'vant';
Vue.use(Button);

⑤ 测试使用

<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>

⑥ 提取到 vant-ui.js 中，main.js 导入

// 导入按需导入的配置文件
import '@/utils/vant-ui'

项目中的 vw 适配

① 安装插件

yarn add postcss-px-to-viewport@1.1.1 -D

② 根目录新建 postcss.config.js 文件，填入配置

// postcss.config.js
module.exports = {
plugins: {
'postcss-px-to-viewport': {
// 标准屏宽度
viewportWidth: 375
}
}
}

路由设计配置

tabbar标签页：

① vant-ui.js 按需引入

import { Tabbar, TabbarItem } from 'vant'
Vue.use(Tabbar)
Vue.use(TabbarItem)

② layout.vue 粘贴官方代码测试

<van-tabbar>
<van-tabbar-item icon="home-o">标签</van-tabbar-item>
<van-tabbar-item icon="search">标签</van-tabbar-item>
<van-tabbar-item icon="friends-o">标签</van-tabbar-item>
<van-tabbar-item icon="setting-o">标签</van-tabbar-item>
</van-tabbar>

③ 修改文字、图标、颜色

<van-tabbar active-color="#ee0a24" inactive-color="#000">
<van-tabbar-item icon="wap-home-o">首页</...>
<van-tabbar-item icon="apps-o">分类页</...>
<van-tabbar-item icon="shopping-cart-o">购物车</...>
<van-tabbar-item icon="user-o">我的</...>
</van-tabbar>

api 接口模块 -封装图片验证码接口 

Toast 轻提示 

注册安装：

import { Toast } from 'vant'
Vue.use(Toast)

两种使用方式

① 导入调用 (组件内 或 非组件中均可)

import { Toast } from 'vant'
Toast('提示内容')

② 通过this直接调用 (必须组件内)

本质：将方法，注册挂载到了Vue原型上 Vue.prototype.$toast = xxx

this.$toast('提示内容')

响应拦截器统一处理错误提示