使用vue3+ts+vite搭建h5页面框架，适配不同尺寸选型 ， 多环境配置

大家好我是辉子，遇到有用的东西就记录下来，也希望和您成为朋友。关注 公众号: 【罗米笔记】，有更好的笔记会及时更新

有一段时间没有写笔记了，也不是因为有多忙，是因为没有太多的动力去坚持，虽然每天就写这一点东西吧，但是需要整理很多资料，然后去测试功能的实际情况，要不然后胡乱发下没有用过的、实践过的代码不是我的风格。

今天就先不推荐开源项目了，今天整理下使用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-dev1、打开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,这个时候基本上 就能应对各种屏幕的尺寸了。

代码就不上了 ， 如果感兴趣就关注下，不懂可以留言私信