testvw

vuecli2.x + vw

总体思路

你可以参考此文档完成vw布局适配移动端,适用于vuecli2.x搭建的项目
此文档是带领你完成一项具体任务,而不是教你如何编程

1. 使用`vuecli2.x`搭建项目

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

3. 使用`npm`下载相关包

4. 在`index.html`引入js插件并使用该插件

5. 在`HelloWorld.vue`组件中尝试使用vw布局

6. 运行项目,验证是否成功

操作流程

1. 使用`vuecli2.x`创建项目

vue init webpack testvw

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

.postcssrc.js全部内容

// https://github.com/michael-ciniawsky/postcss-load-config

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', // 指定需要转换成的视窗单位，建议使用vw 
        selectorBlackList: ['.ignore', '.hairlines'], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名 
        minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值 
        mediaQuery: false // 允许在媒体查询中转换`px` 
      }, 
      "postcss-viewport-units":{},
      "cssnano": {
        preset: "advanced",
        autoprefixer: false,
        "postcss-zindex": false
      },
  }
}

3. 使用`npm`下载相关包

npm i cssnano postcss-aspect-ratio-mini postcss-cssnext postcss-px-to-viewport postcss-viewport-units postcss-write-svg -S

npm i cssnano-preset-advanced -D

4. 在`index.html`引入js插件并使用该插件

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>testvw</title>
  <script src="//g.alicdn.com/fdilab/lib3rd/viewport-units-buggyfill/0.6.2/??viewport-units-buggyfill.hacks.min.js,viewport-units-buggyfill.min.js"></script>
</head>
<body>
  <div id="app"></div>
  <!-- built files will be auto injected -->
  <script>
    window.onload = function () {
      window.viewportUnitsBuggyfill.init({
        hacks: window.viewportUnitsBuggyfillHacks
      });

      // var winDPI = window.devicePixelRatio;
      // var uAgent = window.navigator.userAgent;
      // var screenHeight = window.screen.height;
      // var screenWidth = window.screen.width;
      // var winWidth = window.innerWidth;
      // var winHeight = window.innerHeight;
      // alert(
      // "Windows DPI:" + winDPI +
      // ";\ruAgent:" + uAgent +
      // ";\rScreen Width:" + screenWidth +
      // ";\rScreen Height:" + screenHeight +
      // ";\rWindow Width:" + winWidth +
      // ";\rWindow Height:" + winHeight
      // )
    }
  </script>
</body>
</html>

5. 在`HelloWorld.vue`组件中尝试使用vw布局

<template>
  <div class="hello">
    <div class='box'>
      使用 vw 布局 
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.box{
  width: 750px;
  height: 1000px;
  background-color: #ccc;
  color: darkred;
  font-size: 40px;
}
</style>

6. 运行项目,验证是否成功

npm run dev

查看.box的css px是否成功转为vw
如果成功转为vw,恭喜你成功啦!

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

For a detailed explanation on how things work, check out the guide and docs for vue-loader.

大漠孤烟 / vue2.x_vw_layout

testvw

总体思路

1. 使用`vuecli2.x`搭建项目

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

3. 使用`npm`下载相关包

4. 在`index.html`引入js插件并使用该插件

5. 在`HelloWorld.vue`组件中尝试使用vw布局

6. 运行项目,验证是否成功

操作流程

1. 使用`vuecli2.x`创建项目

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

3. 使用`npm`下载相关包

4. 在`index.html`引入js插件并使用该插件

5. 在`HelloWorld.vue`组件中尝试使用vw布局

6. 运行项目,验证是否成功

Build Setup

简介

发行版

贡献者

近期动态

大漠孤烟 / vue2.x_vw_layout .gitee-modal { width: 500px !important; }

testvw

总体思路

1. 使用vuecli2.x搭建项目

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

3. 使用npm下载相关包

4. 在index.html引入js插件并使用该插件

5. 在HelloWorld.vue组件中尝试使用vw布局

6. 运行项目,验证是否成功

操作流程

1. 使用vuecli2.x创建项目

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

3. 使用npm下载相关包

4. 在index.html引入js插件并使用该插件

5. 在HelloWorld.vue组件中尝试使用vw布局

6. 运行项目,验证是否成功

Build Setup

简介

发行版

贡献者

近期动态

搜索帮助

大漠孤烟 / vue2.x_vw_layout

1. 使用`vuecli2.x`搭建项目

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

3. 使用`npm`下载相关包

4. 在`index.html`引入js插件并使用该插件

5. 在`HelloWorld.vue`组件中尝试使用vw布局

1. 使用`vuecli2.x`创建项目

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

3. 使用`npm`下载相关包

4. 在`index.html`引入js插件并使用该插件

5. 在`HelloWorld.vue`组件中尝试使用vw布局