做网站的公司北京有哪些,网络推广平台有哪些公司,怎么用vs2017做网站,海南seo快速排名优化多少钱文章目录 vant组件库1、什么是组件库2、vant组件 全部导入 和 按需导入的区别3、全部导入的使用步骤#xff1a;4、按需导入的使用步骤#xff1a;5、封装vant文件包 vant组件库
该项目将使用到vant-ui组件库#xff0c;这里的目标就是认识他#xff0c;铺垫知识
1、什么… 文章目录 vant组件库1、什么是组件库2、vant组件 全部导入 和 按需导入的区别3、全部导入的使用步骤4、按需导入的使用步骤5、封装vant文件包 vant组件库
该项目将使用到vant-ui组件库这里的目标就是认识他铺垫知识
1、什么是组件库
组件库第三方封装好了很多很多的 组件整合到一起 就是一个组件库。Vue的组件库并不是唯一的
vant组件库https://youzan.github.io/vant-weapp/#/home
2、vant组件 全部导入 和 按需导入的区别
全部导入好处方便占用性能、体积大按需导入好处体积小、性能比全部导入高用什么导入什么移动端推荐使用
3、全部导入的使用步骤
① 安装
这里使用 yarn yarn add vantlatest-v2
② 导入注册组件
// 导入vant组件
import Vant from vant
import vant/lib/index.css// 插件安装初始化内部将所有的vant所有组件进行导入注册
Vue.user(Vant)
③ 使用 van-goods-actionvan-goods-action-icon iconchat-o text客服 dot /van-goods-action-icon iconcart-o text购物车 info5 /van-goods-action-icon iconshop-o text店铺 /van-goods-action-button text加入购物车 typewarning /van-goods-action-button text立即购买 //van-goods-action效果
4、按需导入的使用步骤
① 安装组件 上面已安装
这里使用 yarn yarn add vantlatest-v2
② 安装插件
yarn add bable-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 { Button, Icon } from vantVue.use(Button)
Vue.use(Icon)⑤ app.vue中进行测试
van-button typeprimary主要按钮/van-button
van-button typeinfo信息按钮/van-button
van-button typedefault默认按钮/van-button
van-button typewarning警告按钮/van-button
van-button typedanger危险按钮/van-button5、封装vant文件包
把引入组件的步骤抽离到单独的js文件中比如 utils/vant-ui.js方便维护
import { Button, Icon } from vantVue.use(Button)
Vue.use(Icon)main.js中进行导入
// 导入按需导入的配置文件
import /utils/vant-ui
