前言
看了大漠老师的前端文章如何在Vue项目中使用vw实现移动端适配,决定在项目使用,但是发现我的脚手架是vue-cli3,和vue-cli2有点不一样,所以打算总结一下,供自己和别人参考下。
你可以参考此文档完成vw布局适配移动端,适用于vuecli3.x搭建的项目
操作流程(步骤)
- 1.使用vuecli3.x搭建项目
- 2.在项目根目录的.postcssrc.js文件中增加配置项
- 3.使用npm下载相关包
- 4.在index.html引入js插件并使用该插件
- 5.在App.vue组件中尝试使用vw布局
- 6.运行项目,验证是否成功
使用vuecli3.x创建项目
vue create testvw
需要注意的是: 询问配置 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
在项目根目录的.postcssrc.js文件中增加配置项
具体的解释可以去查看大漠老师的如何在Vue项目中使用vw实现移动端适配
//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', // 指