## 1. 初始化項目 > vw自適應，樣式重置，300ms延遲，使用iconfont圖標 ### 1. 創建項目 ```bash npm config set registry https://registry.npm.taobao.org --global npm config set disturl https://npm.taobao.org/dist --global npm install -g @vue/cli vue create hello-world npm run serve ``` ### 2. 配置vw移動端自適應 1. 創建項目時注意選擇`In dedicated config files` ```bash 需要注意的是: 詢問配置 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. 安裝vw相關包 ```bash 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 -S -D npm i postcss-import postcss-url autoprefixer -S -D ``` 3. 在 postcss.config.js 中添加配置項 ```js 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 }, } } ``` 4. 在 index.html 中添加 script ```js <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> ``` 5. 使用 ### 3. 樣式重置&解決1px邊框&300ms延遲 1. reset.css樣式重置 2. border.css解決移動端一像素邊框 ```bash import './assets/style/reset.css' import './assets/style/border.css' ``` [文件地址](https://gitee.com/chengbenchao/vue-resource) 3. 解決300ms延遲問題 - 安裝 ```bash npm i fastclick --save ``` - main.js 中使用 ```js import fastClick from "fastclick" fastClick.attach(document.body) ``` ### 4. 使用iconfont圖標 1. 下載 2. 將文件放置在assets-style文件夾下。 ```js iconfont.css iconfont.eot iconfont.svg iconfont.ttf iconfont.woff ``` 3. 在main.js中引入 ```js //在此配置之后,全局都可以使用 import './assets/style/iconfont/iconfont.css' ``` 4. 在頁面中使用 ```html <span class="iconfont back">&#xe602;</span> ```