常用框架
-
vant
-
axios [npm install axios] or [yarn add axios]
UI框架
image.png
1. vant 官网https://vant-contrib.gitee.io/vant/v2/#/zh-CN/
-
全部导入
1. yarn add vant@latest-v2 -S
import Vue from 'vue'; import Vant from 'vant'; import 'vant/lib/index.css'; Vue.use(Vant);
image.png
-
按需导入
0. yarn add babel-plugin-import
(自定义项目可能需要安装这个模块 ,)1. yarn add vant@latest-v2 -S
2. yarn add babel-plugin-import -D
3.添加配置 配置文件
babel.config.js
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
// 增加项
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
}
image.png
2. 移动端适配postcss https://github.com/evrone/postcss-px-to-viewport
-
安装$ yarn add -D postcss-px-to-viewport
-
在项目根目录下创建 postcss.config.js 文件，配置 postcss-px-viewport 插件
module.exports = {
plugins: {
'postcss-px-to-viewport': {
unitToConvert: 'px', // 需要转换的单位，默认为"px"
viewportWidth: 320, // 设计稿的视口宽度
unitPrecision: 5, // 单位转换后保留的精度
propList: ['*'], // 能转化为vw的属性列表
viewportUnit: 'vw', // 希望使用的视口单位
fontViewportUnit: 'vw', // 字体使用的视口单位
selectorBlackList: [], // 需要忽略的CSS选择器
minPixelValue: 1, // 最小的转换数值，如果为1的话，只有大于1的值会被转换
mediaQuery: false, // 媒体查询里的单位是否需要转换单位
replace: true, // 是否直接更换属性值，而不添加备用属性
exclude: [], // 忽略某些文件夹下的文件或特定文件
include: undefined, // 如果设置了include，那将只有匹配到的文件才会被转换，例如只转换 'src/mobile' 下的文件 (include: /\/src\/mobile\//)
landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
landscapeUnit: 'vw' // 横屏时使用的单位
},
'postcss-preset-env': {
browsers: 'last 2 versions' //指定只对最近 2 个版本的浏览器进行兼容性处理。
}
}
}
-
和vant 配合使用简单配置(官网给出的配置
module.exports = {
plugins: {
'postcss-px-to-viewport': {
viewportWidth: 375,
},
},
};
image.png
