大家好我是辉子,遇到有用的东西就记录下来,也希望和您成为朋友。关注 公众号: 【罗米笔记】,有更好的笔记会及时更新
有一段时间没有写笔记了,也不是因为有多忙,是因为没有太多的动力去坚持,虽然每天就写这一点东西吧,但是需要整理很多资料,然后去测试功能的实际情况,要不然后胡乱发下没有用过的、实践过的代码不是我的风格。
今天就先不推荐开源项目了,今天整理下使用vue3搭建h5框架及做适配的选型。
打开vue3官网 https://cn.vuejs.org/guide/quick-start.html
npm create vue@latest
按操作步骤选择就行,我这边是使用ts, 这是我新建好的目录
1. 配置多环境
在demo-product下面新建.env.development , .env.production, .env.staging 三个文件
在package.json里面进行配置
这个时候已经把多环境配置完了,如果需要工作中需要其他的环境,就自己进行配置就行
2. 配置husky
husky 可以防止使用 Git hooks 的一些不好的 commit 或者 push。
npm install husky --save-dev
1、打开package.json文件,在scripts中添加
"prepare": "husky install"
2、添加完成之后,执行如下命令
npm set-script prepare "husky install"
npm run prepare // 在这之后会生成一个husky文件夹
3、安装commitlint
npm i @commitlint/cli @commitlint/config-conventional -D
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
上面的可以在官网上找到用法
3. 安装可以在手机端调试的工具eruda
npm i eruda
在main.ts 引入 并初始化
initEruda()
4. 安装转px转视口的插件
npm install postcss-px-to-viewport
在项目根目录下添加.postcssrc.js文件
配置:
module.exports = {
plugins: {
// 用来给不同的浏览器自动添加相应前缀,如-webkit-,-moz-等等
autoprefixer: {
overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
},
'postcss-px-to-viewport-8-plugin': {
unitToConvert: 'px', // 要转化的单位
viewportWidth: 375, // UI设计稿的宽度
unitPrecision: 6, // 转换后的精度,即小数点位数
propList: ['*','!font-size'], // 指定转换的css属性的单位,*代表全部css属性的单位都进行转换
viewportUnit: 'vw', // 指定需要转换成的视窗单位,默认vw
fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位,默认vw
selectorBlackList: ['.wrap-icon','.scroll-wrap'], // 指定不转换为视窗单位的类名,
minPixelValue: 1, // 默认值1,小于或等于1px则不进行转换
mediaQuery: true, // 是否在媒体查询的css代码中也进行转换,默认false
replace: true, // 是否转换后直接更换属性值
exclude: [/node_modules/], // 设置忽略文件,用正则做目录名匹配
landscape: false // 是否处理横屏情况
}
}
}
5. 推荐视口+rem布局
在vscode 下载px to rem & rpx & vw (cssrem),在写代码的时候可以把px转成rem,这个时候基本上 就能应对各种屏幕的尺寸了。
代码就不上了 , 如果感兴趣就关注下,不懂可以留言私信