Vue mobile 的优秀样式库 - vant

in 前端vue.js with 0 comment

介绍

Vant 是 有赞 团队研发的一款基于 vuejs 的移动端前端样式库。由于有赞是电商出身,所以这个样式库对于电商相关的组件有着很好的支持。

Vant DEMO

click here

安装和使用

Vue cli 3 UI洁面下的配置安装

# 安装 Vue Cli
npm install -g @vue/cli

# 创建一个项目
vue create hello-world

# 创建完成后,可以通过命令打开图形化界面,如下图所示
vue ui

在图形化界面中,点击依赖 -> 安装依赖,然后将 vant 添加到依赖中即可。
vue-cli-demo-1.png

其他 Vue 项目的安装

npm install vant --save-dev

使用组件

方法一:按需引用

# 安装插件
npm i babel-plugin-import -D
// 在.babelrc 中添加配置
// 注意:webpack 1 无需设置 libraryDirectory
{
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}

// 对于使用 babel7 的用户,可以在 babel.config.js 中配置
module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};
// 接着你可以在代码中直接引入 Vant 组件
// 插件会自动将代码转化为方式二中的按需引入形式
import { Button } from 'vant';

方法二:完整引入

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

Vue.use(Vant);
Comments are closed.