前军教程网

（1）通过vite创建一个vue3的typescript项目， 可以选择ts 也可以不选，不选的话，也是支持在vue中写typescript代码的，只不过选择ts来去书写代码会类型推断，能够标红，代码的拼写错误，或者变量类型的定义错误等等

yarn create vite

2）引入hotcss cnpm install hotcss -D

新建commons文件夹将 node_models中 下载的 hotcss.js 的添加进去

也可以从官网下载引入。

https://github.com/imochen/hotcss

(3).index.html的meta 添加 ，具体可以参考 https://github.com/imochen/hotcss

    <meta name="viewport"
    content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="screen-orientation" content="portrait" />
    <meta name="format-detection" content="telephone=no">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <meta name="hotcss" content="initial-dpr=1">  

（4）通过vite创建的vue3项目是没有vue-router的，所以安装vue路由

yarn add vue-router@4

(5) 安装sass

        yarn add sass   
        就可以不同时安装 node-sass 和sass -loader同理 如果你想用less 
        可以直接yarn add less  不必同时安装less. 和 less-loader

安装"sass": "~1.32.6"可以解决sass 版本过高的问题

Deprecation Warning: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div(math.div($px * 320, $designWidth), 20)

More info and automated migrator: https://sass-lang.com/d/slash-div 

(6) px2rem.scss中 自己根据设计图设定designWidth的值

改成750 就会以750的大小为基础，根据设计图尺寸。

效果如图所示

(如果你使用的是vue create创建的项目 你可以通过vue.config.js配置去加载全局的px2rem.scss )或者在main.js中引入。

如果使用的是scss可以写一些公共的mixns,然后就开发吧

  // 垂直居中
@mixin table-center {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
// 字体的处理
@mixin fz($font-size) {
  font-size: $font-size;
  [data-dpr="2"] & {
      font-size: $font-size * 2;
  }
  [data-dpr="3"] & {
      font-size: $font-size * 3;
  }
}
// 处理图片
// 了适应retain和非retain屏幕，我们会准备不同的图片大小，也就是2x和3x图，我的做法是[data-dpr="3"]下使用3x图，其他情况统一使用2X图。
// 第一个参数为2x,3x文件夹所在路径，第二个参数为文件名，第三个参数为文件类型，默认为.jpg结尾。
@mixin dpr-img($url,$name,$type:".jpg"){
  background-image: url($url+"2x/"+ $name+"@2x"+$type);
  [data-dpr="3"] &{
     background-image: url($url+"3x/"+ $name+"@3x"+$type);
  }
}

// 单行文本溢出和多行文本溢出
@mixin t-overflow($line:1) {
  @if $line==1 {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
  }
  @else {
      display: -webkit-box;
      -webkit-line-clamp: $line;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
  }
}