vite+vue3+ts+eslint编写移动端rem自适应

3,539 阅读1分钟

5a7d43c57b2e47fb8a96d32531ba660c_tplv-k3u1fbpfcp-watermark.image

项目介绍

1.eslint配合prettier进行项目代码风格管理
2.postcss对css进行前缀兼容和px转rem的计算
3.配合lib-flexible.js进行rem自适应处理
4.项目使用less进行css编写,也可自行改scss,stylus

getee地址

Getee: gitee.com/zhizous/vue…

有帮助到你留下你的star,我将万分感激

安装方式

 推荐使用yarn安装: $ npm install yarn -g
 进入项目输入命令: yarn

生产依赖项 dependencies

vue,vuex,vue-router,axios,vant

{
  "axios": "^0.21.1",
  "vant": "^3.0.12",
  "vue": "^3.0.10",
  "vue-router": "^4.0.6",
  "vuex": "^4.0.0"
}

开发依赖项 devDependencies

vite typescript prettier postcss-pxtorem less

vite内部提供了postcss所以这里无需安装postcss

{
  "@typescript-eslint/eslint-plugin": "^4.21.0",
  "@typescript-eslint/parser": "^4.21.0",
  "@vitejs/plugin-vue": "^1.2.1",
  "@vue/compiler-sfc": "^3.0.10",
  "autoprefixer": "^10.2.5",
  "eslint": "^7.23.0",
  "eslint-config-prettier": "^8.1.0",
  "eslint-plugin-prettier": "^3.3.1",
  "eslint-plugin-vue": "^7.8.0",
  "less": "^3.13.1",
  "less-loader": "^7.3.0",
  "postcss-pxtorem": "^6.0.0",
  "prettier": "^2.2.1",
  "typescript": "^4.1.5",
  "vite": "^2.1.5",
  "vue-tsc": "^0.0.20"
}

vs code的插件和配置

这里必须安装prettier插件来管理你的代码格式化风格

这一块我已经将配置提交到了项目的.vscode文件夹里边,引入到vscode中自行安装即可

需要注意的是你要是使用setup的方式编写vue那么请禁用vetur插件,如果不是那么禁用volar插件这两个插件尽量不要同时开启,避免代码提示和格式化出现问题

image.png

项目结构

image.png

demo样例

image.png