Vue移动端组件库Vant的快速上手 |
您所在的位置：网站首页 › vant移动端表格组件 › Vue移动端组件库Vant的快速上手 |
Vue移动端组件库Vant的快速上手
|
初次创建项目使用此方法
Vue 官方提供的脚手架 Vue Cli 创建项目 安装 npm install -g @vue/cli运行 vue ui2. 已有项目 使用Vant 安装 npm i vant --save引入组件配置 方式一. 自动按需引入组件 (推荐) babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式 # 安装插件 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';查看package.json
babel.config.js里
使用先注册
使用
实际页面效果
方式二. 手动按需引入组件 在不使用插件的情况下，可以手动引入需要的组件 import Button from 'vant/lib/button'; import 'vant/lib/button/style';方式三. 导入所有组件 在main.js中导入 Vant 支持一次性导入所有组件，引入所有组件会增加代码包体积，因此不推荐这种做法 import Vue from 'vue'; import Vant from 'vant'; import 'vant/lib/index.css'; Vue.use(Vant);结束
|
【本文地址】
今日新闻 |
推荐新闻 |