巴中商城网站建设,安全文化企业示范企业评价标准,网页关键词优化,贵州省兴义市专做网站公司1. 组件库的选择
组件库并不是唯一的#xff0c;常用的组件库还有以下几种#xff1a;
pc 端:element-uielement-plus iviewelement-plus iviewant-design移动端#xff1a;vant-uiMint UI (饿了么)Cube UI (滴滴)…
2. vant组件库
主要参考官网#xff1a;Vant官网
3…1. 组件库的选择
组件库并不是唯一的常用的组件库还有以下几种
pc 端:element-uielement-plus iviewelement-plus iviewant-design移动端vant-uiMint UI (饿了么)Cube UI (滴滴)…
2. vant组件库
主要参考官网Vant官网
3. vant按需导入官网推荐
参考官网Vant官网
步骤如下
安装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]]
}把引入组件的步骤抽离到单独的js文件中比如 utils/vant-ui.js
import { Button, Icon } from vantVue.use(Button)
Vue.use(Icon)在main.js中进行导入即可
// 导入按需导入的配置文件
import /utils/vant-ui测试在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-button4. 导入所有组件不推荐
参考官网vant官网
安装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-button5. 项目中的vw适配
官方说明浏览器适配
安装插件
postcss-px-to-viewport 是一款 PostCSS 插件用于将 px 单位转化为 vw/vh 单位。
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的视口宽度设计的具体场景需要进行修改
toast 轻提示
参考vant官网
两种使用方式
导入调用 ( 组件内 或 非组件中均可 )
import { Toast } from vant;
Toast(提示内容);通过this直接调用 ( 组件内 使用)
添加到单独 utils/vant-ui.js 文件中 或 main.js 注册绑定到原型
import { Toast } from vant;
Vue.use(Toast)this.$toast(提示内容)
