hell，大家早上好、中午好、晚上好、歡迎收看本次文章，我是聲音甜美的雞排妹。今天是週五，今天工作安排些開發移動端，那我漂亮且性感雞排妹就搭建起來了，過程特別簡單。但我想分享大家搭建Vue項目。學校雞排妹的搭建項目經驗。
新建一個vue項目：
npm install -g vue-cli
vue init webpack vw-layout [vue init webpack (項目名稱)]
npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano --S
在.postcssrc.js文件對新安裝的PostCSS插件進行配置：
module.exports = {
"plugins": {
"postcss-import": {},
"postcss-url": {},
"postcss-aspect-ratio-mini": {},
"postcss-write-svg": { utf8: false },
"postcss-cssnext": {},
"postcss-px-to-viewport": {
viewportWidth: 750, // (Number) The width of the viewport.
viewportHeight: 1334, // (Number) The height of the viewport.
unitPrecision: 3, // (Number) The decimal numbers to allow the REM units to grow to.
viewportUnit: 'vw', // (String) Expected units.
selectorBlackList: ['.ignore', '.hairlines'], // (Array) The selectors to ignore and leave as px.
minPixelValue: 1, // (Number) Set the minimum pixel value to replace.
mediaQuery: false // (Boolean) Allow px to be converted in media queries.
},
"cssnano": {
preset: "advanced",
autoprefixer: false,
"postcss-zindex": false
}
}
}
npm i cssnano-preset-advanced --save-dev
npm install vuex --save
npm install axios --save
npm install [email protected] --save
index.html加個meta標籤
npm run dev
config/index.js文件中，host的值改為：”0.0.0.0”
src/router/index.js文件中，Router的配置加上mode: 'history'
"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`
}
閱讀更多 程序美學 的文章
