需要借助官网提供的构建工程以及一些PostCSS插件来完成
需要准备以下东西
NodeJs
NPM
Webpack
Vue-cli
postcss-import
postcss-url
postcss-aspect-ratio-mini
postcss-cssnext
autoprefixer
postcss-px-to-viewport
postcss-write-svg
cssnano
postcss-viewport-units
Viewport Units Buggyfill
使用Vue-cli 构建项目
1、 全局安装 vue脚手架
npm install -g vue-cli
2、使用vue-cli 来构建项目
vue init webpack proejctname
3、进入到刚创建的项目
cd projectname
4、cmd ->启动项目
npm run dev
安装PostCSS插件
1、项目根目录下 .postcssrc.js
打开发现 默认有
postcss-import ---- 解决@import 引入路径问题
postcss-url—处理文件引用路径的处理
autoprefixer — 处理浏览器前缀的问题 的一个插件
其他PostCSS插件
postcss-aspect-ratio-mini
postcss-cssnext
postcss-px-to-viewport
postcss-write-svg
cssnano
postcss-viewport-units
安装以上插件
npm i postcss-aspect-ratio-mini postcss-cssnext postcss-px-to-viewport postcss-write-svg postcss-viewport-units cssnano --S
安装完成在 项目根目录下 .package.js中
配置安装的插件
在项目根目录下 .package.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, // (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.
},
"postcss-viewport-units":{},
"cssnano": {
preset: "advanced",
autoprefixer: false,
"postcss-zindex": false
}
}
}
在cssnano 配置中使用 advanced 所以需要另外安装
npm i cssnano-preset-advanced --save-dev
启动项目 npm run dev
到这里 算完成了