二.移动端组件库

Snipaste_2021-08-移动-56-38.png

一. 关于移动端组件库

下面是 Awesome Vue 收集的一些优质的第三方组件库资源。

UI frameworks for mobile

• Framework7-Vue - Build full featured iOS & Android apps using Framework7 & Vue.

• vux - [Chinese] Vue UI Components based on WeUI.

• vue-onsenui - Mobile app development framework and SDK using HTML5 and JavaScript. Create beautiful and performant cross-platform mobile apps. Based on Web Components, and provides bindings for Angular 1, 2, React and Vue.js.

• Weex - Weex provides the ability to publish cross platform, so web, Android, and IOS apps can use the same API development functions.

• weex-eros - [Chinese] Eros is a app solution based on Weex and Vue, which enables you to use API of Vue, simple and quick development of small and medium app.

Set of components for mobile

• mint-ui - Mobile UI elements for Vue.js.

• vant - A Vue.js 2.0 Mobile UI From YouZan.

• cube-ui - A fantastic mobile ui lib implement by Vue.js 2.

• mand-mobile - A mobile UI toolkit, based on Vue.js 2, designed for financial scenes.

• NutUI - A Vue.js 2.0 UI Toolkit for Mobile Web

二. Vant 组件库介绍

img

官方文档

Vant 是有赞商城前端开发团队开发的一个基于 Vue.js 的移动端组件库，它提供了非常丰富的移动端功能组件，简单易用。

下面是在 Vant 官网中列出的一些优点：

• 60+ 高质量组件

• 90% 单元测试覆盖率

• 完善的中英文文档和示例

• 支持按需引入

• 支持主题定制

• 支持国际化

• 支持 TS

• 支持 SSR

在我们的项目中主要使用 Vant 作为核心组件库，下面我们根据官方文档将 Vant 导入项目中。

将 Vant 引入项目一共有四种方式：

• 方式一：自动按需引入组件

• 和方式二一样，都是按需引入，但是加载更方便一些（需要额外配置插件）

• 优点：打包体积小

• 缺点：每个组件在使用之前都需要手动加载注册

• 方式二：手动按需引入组件

• 在不使用插件的情况下，可以手动引入需要的组件

• 优点：打包体积小

• 缺点：每个组件在使用之前都需要手动加载注册

• 方式三：导入所有组件

• Vant 支持一次性导入所有组件，引入所有组件会增加代码包体积，因此不推荐这种做法

• 优点：导入一次，使用所有

• 缺点：打包体积大

• 方式四：通过 CDN 引入

• 使用 Vant 最简单的方法是直接在 html 文件中引入 CDN 链接，之后你可以通过全局变量vant访问到所有组件。

• 优点：适合一些演示、示例项目，一个 html 文件就可以跑起来

• 缺点：不适合在模块化系统中使用

这里建议为了前期开发的便利性我们选择方式三：导入所有组件，在最后做打包优化的时候根据需求配置按需加载以降低打包体积大小。

三. Vant安装

1、安装 Vant

npm i vant

2、在 main.js 中加载注册 Vant 组件

import Vue from 'vue'
import Vant from 'vant'
import 'vant/lib/index.css'

Vue.use(Vant)

3、查阅文档使用组件

官方文档