使用vw配置 · vue.js

本文引用至[碼云](https://gitee.com/yzfgits/vue3.x_vw_layout) [參考文章](https://segmentfault.com/a/1190000013948219) # vuecli3vw # 總體思路 * 你可以參考此文檔完成`vw`布局適配移動端,適用于`vuecli3.x`搭建的項目 * 此文檔是帶領你完成一項具體任務,而不是教你如何編程 ## 1\. 使用`vuecli3.x`搭建項目 ## 2\. 在項目根目錄的`.postcssrc.js`文件中增加配置項 ## 3\. 使用`npm`下載相關包 ## 4\. 在`index.html`引入js插件并使用該插件 ## 5\. 在`App.vue`組件中嘗試使用vw布局 ## 6\. 運行項目,驗證是否成功 # 操作流程 ### 1\. 使用`vuecli3.x`創建項目 ~~~ vue create vuecli3vw ~~~ * 具體操作步驟參考一下gif圖片,此項目勾選了 vue-router, vuex, babel ~~~ 需要注意的是: 詢問配置 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 ~~~ ### 2\. 在項目根目錄的`postcss.config.js`文件中增加配置項 * `postcss.config.js`全部內容 ~~~ //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', // 指定需要轉換成的視窗單位，建議使用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 npm i postcss-import postcss-url autoprefixer -D ~~~ ### 4\. 在`index.html`引入js插件并使用該插件 ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <title>vuecli3vw</title> </head> <body> <noscript> <strong>We're sorry but vuecli3vw doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div>  <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> <script> window.onload = function () { window.viewportUnitsBuggyfill.init({ hacks: window.viewportUnitsBuggyfillHacks }); } </script> </body> </html> ~~~ ### 5\. 在`App.vue`組件中嘗試使用vw布局 ~~~ <template> <div id="app"> <div class='box'> 使用 vw 布局 </div> <div id="nav"> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link> </div> <router-view/> </div> </template> <style> html,body{ margin: 0; padding: 0; } .box{ width: 750px; height: 1000px; background-color: #ccc; color: darkred; font-size: 40px; } #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; } </style> ~~~ ### 6\. 運行項目,驗證是否成功 ~~~ npm run serve ~~~ * 查看`.box`的`css px`是否成功轉為`vw` * 如果成功轉為`vw`,恭喜你成功啦! ## Project setup ~~~ npm install ~~~ ### Compiles and hot-reloads for development ~~~ npm run serve ~~~ ### Compiles and minifies for production ~~~ npm run build ~~~ 相關文件參考 [vw](https://www.cnblogs.com/jinsuo/p/8533269.html) [vw2](https://note.52admin.net/2018/09/03/Vue-js-%E7%A7%BB%E5%8A%A8%E7%AB%AF%E9%80%82%E9%85%8D%E4%B9%8B-vw-%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88/)