vw布局实现移动端适配,项目使用 vue-cli@3.x 搭建

前言

看了大漠老师的前端文章如何在Vue项目中使用vw实现移动端适配，决定在项目使用，但是发现我的脚手架是vue-cli3，和vue-cli2有点不一样，所以打算总结一下，供自己和别人参考下。

你可以参考此文档完成vw布局适配移动端,适用于vuecli3.x搭建的项目

操作流程（步骤）

• 1.使用vuecli3.x搭建项目
• 2.在项目根目录的.postcssrc.js文件中增加配置项
• 3.使用npm下载相关包
• 4.在index.html引入js插件并使用该插件
• 5.在App.vue组件中尝试使用vw布局
• 6.运行项目,验证是否成功

使用vuecli3.x创建项目

vue create testvw

需要注意的是: 询问配置 PostCSS 时需要选择的是 In dedicated config files 在专用配置文件中

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json

在项目根目录的.postcssrc.js文件中增加配置项

具体的解释可以去查看大漠老师的如何在Vue项目中使用vw实现移动端适配

//https://github.com/michael-ciniawsky/postcss-load-config
// module.exports = {
   
//      plugins: {
   
//          autoprefixer: {}
//      }
// }
module.exports = {
   
  "plugins": {
   
    "postcss-import": {
   },
    "postcss-url": {
   },
    "postcss-aspect-ratio-mini": {
   }, 
      "postcss-write-svg": {
   
        utf8: false
      },
      "postcss-cssnext": {
   },
      "postcss-px-to-viewport": {
   
        viewportWidth: 750, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750 
        viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置 
        unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除） 
        viewportUnit: 'vw', // 指