网站改版介绍,wordpress实现中英文切换,搭建网站实时访问地图,电商系统app开发01. vant组件库及Vue周边的其他组件库 组件库#xff1a;第三方封装好了很多很多的组件#xff0c;整合到一起就是一个组件库。 https://vant-contrib.gitee.io/vant/v2/#/zh-CN/ 比如日历组件、键盘组件、打分组件、下拉筛选组件等
组件库并不是唯一的#xff0c;常用的组…01. vant组件库及Vue周边的其他组件库 组件库第三方封装好了很多很多的组件整合到一起就是一个组件库。 https://vant-contrib.gitee.io/vant/v2/#/zh-CN/ 比如日历组件、键盘组件、打分组件、下拉筛选组件等
组件库并不是唯一的常用的组件库还有以下几种
pc: element-ui element-plus iview ant-design
移动vant-ui Mint UI (饿了么) Cube UI (滴滴)
02. 全部导入和按需导入的区别
目标明确 全部导入 和 按需导入 的区别
区别
1.全部导入会引起项目打包后的体积变大进而影响用户访问网站的性能
2.按需导入只会导入你使用的组件进而节约了资源
03. 全部导入
安装vant-ui
yarn add vantlatest-v2在main.js中
import Vant from vant;
import vant/lib/index.css;
// 把vant中所有的组件都导入了
Vue.use(Vant)即可使用
van-button typeprimary主要按钮/van-button
van-button typeinfo信息按钮/van-buttonvant-ui提供了很多的组件全部导入会导致项目打包变得很大。
04. 按需导入
安装vant-ui
yarn add vantlatest-v2安装一个插件
yarn add 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 { 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-button把引入组件的步骤抽离到单独的js文件中比如 utils/vant-ui.js
import { Button, Icon } from vantVue.use(Button)
Vue.use(Icon)main.js中进行导入
// 导入按需导入的配置文件
import /utils/vant-ui05. 项目中的vw适配
官方说明https://vant-contrib.gitee.io/vant/v2/#/zh-CN/advanced-usage
yarn add postcss-px-to-viewport1.1.1 -D项目根目录 新建postcss的配置文件postcss.config.js
// postcss.config.js
module.exports {plugins: {postcss-px-to-viewport: {viewportWidth: 375,},},
};viewportWidth:设计稿的视口宽度
vant-ui中的组件就是按照375的视口宽度设计的恰好智慧商城项目中的设计稿也是按照375的视口宽度设计的所以此时 我们只需要配置375就可以了如果设计稿不是按照375而是按照750的宽度设计那此时这个值该怎么填呢
