网站创建要多少钱,光触媒网站建设,wordpress做管理网站,网站建设方案设计书(创作不易#xff0c;感谢有你#xff0c;你的支持#xff0c;就是我前行的最大动力#xff0c;如果看完对你有帮助#xff0c;请留下您的足迹#xff09; 目录
vant 组件库
安装
导入
全部导入
按需导入
浏览器配饰
Viewport 布局
Rem 布局适配 vant 组件库 …(创作不易感谢有你你的支持就是我前行的最大动力如果看完对你有帮助请留下您的足迹 目录
vant 组件库
安装
导入
全部导入
按需导入
浏览器配饰
Viewport 布局
Rem 布局适配 vant 组件库 目标认识第三方 Vue组件库 vant-ui 组件库第三方 封装 好了很多很多的 组件 整合到一起就是一个组件库。 https://vant-contrib.gitee.io/vant/v2/#/zh-CN/ 安装 通过 npm 安装 在现有项目中使用 Vant 时可以通过 npm 或 yarn 进行安装 这是官方给出的代码如果安装失败请根据我下面导入步骤重新安装 # Vue 3 项目安装最新版 Vant
npm i vant -S# Vue 2 项目安装 Vant 2
npm i vantlatest-v2 -S 导入
全部导入 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-button Tips: 配置按需引入后将不允许直接导入所有组件。 按需导入 babel-plugin-import 是一款 babel 插件它会在编译过程中将 import 的写法自动转换为按需引入的方式。 ① 安装 vant-ui yarn add vantlatest-v2 ② 安装插件 官方代码 # 安装插件
npm i babel-plugin-import -D 我自己的代码 yarn add babel-plugin-import -D ③ babel.config.js 中配置 // 在.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]]
}; ④ main.js 按需导入注册 import Vue from vue;
import { Button } from vant;
Vue.use(Button); ⑤ 测试使用 van-button typeprimary主要按钮/van-button
van-button typeinfo信息按钮/van-button ⑥ 提取到 vant-ui.js 中main.js 导入 // 导入按需导入的配置文件
import /utils/vant-ui 浏览器配饰
Viewport 布局 Vant 默认使用 px 作为样式单位如果需要使用 viewport 单位 (vw, vh, vmin, vmax)推荐使用 postcss-px-to-viewport 进行转换。 postcss-px-to-viewport 是一款 PostCSS 插件用于将 px 单位转化为 vw/vh 单位。 ① 安装插件 yarn add postcss-px-to-viewport1.1.1 -D ② 根目录新建 postcss.config.js 文件填入配置 // postcss.config.js
module.exports {plugins: {postcss-px-to-viewport: {// 标准屏宽度viewportWidth: 375}}
} Rem 布局适配 如果需要使用 rem 单位进行适配推荐使用以下两个工具 postcss-pxtorem 是一款 PostCSS 插件用于将 px 单位转化为 rem 单位lib-flexible 用于设置 rem 基准值 // postcss.config.js
module.exports {plugins: {postcss-pxtorem: {rootValue: 37.5,propList: [*],},},
};
