H5,简易搭建vueH5项目

最新推荐文章于 2024-07-10 11:49:32 发布

围炉谈话

最新推荐文章于 2024-07-10 11:49:32 发布

阅读量483

点赞数

分类专栏： H5 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/C_javascrip/article/details/133854776

版权

H5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.常规下载vue项目

npm create 'name'

2.在项目根目录添加postcss.config.js文件，并将如下代码添加

module.exports = {
  plugins: {
    'postcss-import': {},
    'postcss-url': {},
    // to edit target browsers: use "browserslist" field in package.json
    'postcss-px-to-viewport-update': {
      viewportWidth: 750,
      viewportHeight: 1334,
      unitPrecision: 3,
      viewportUnit: 'vw',
      selectorBlackList: ['.ignore', '.hairlines'],
      minPixelValue: 1,
      mediaQuery: false,
      // include:[/\/src\/InventoryH5\//],

    },
    autoprefixer: {},
    // 'postcss-pxtorem-include': {
    //   include: 'src/pages/home/pages/datav/*', // 制定转换的目录
    //   rootValue: 128, //  根据多大设计稿设置尺寸/10
    //   unitPrecision: 6,
    //   propList: ['*']
    // },
    'postcss-pxtorem': {
      rootValue: 192,
      minPixelValue: 1,
      propList: ['*'],
      exclude: e => {
        if (/src(\\|\/)pages(\\|\/)home(\\|\/)pages/.test(e)) {
          return false
        }
        return true
      }
    }
  }
}

3.添加如下依赖

【可将如下1图依赖复制进入package.json文件内，之后在终端输入cnpm install 更新下载依赖】

"postcss-import": "^12.0.1",
"postcss-loader": "^5.0.0",
"postcss-px-to-viewport-update": "^1.2.0",
"postcss-pxtorem": "^5.1.1",
"postcss-pxtorem-include": "0.0.1",
"postcss-url": "^8.0.0",

完成✅