这一篇主要是安装移动端常用ui和全局公共样式以及适配的设置。
开发工具:vscode,
包安装工具:yarn
这里补充下,scss是在使用vue-cli4.0创建项目的时候就直接勾选dart-sass的。
一、确认我们要使用的ui框架
移动ui框架市面上有很多,这里就不一一举例了。我在挑选的时候主要看这个框架在github上的最近提交时间和修复时间,以及框架的人气和活跃度,看这些的原因,就是因为怕有些框架停止维护很多坑没必要去踩,选那些一直在维护的ui框架反而更好些。我这里采用的有赞的vant中文地址,做一般的项目都可以。
直接yarn add vant 就可以了,
main.js中使用,可以把通用的组件放到全局
import Vue from 'vue'
import {
Toast,
List,
Dialog,
Stepper,
ActionSheet,
Overlay,
Slider,
Tab,
Tabs,
Popup,
Sticky,
Swipe,
SwipeItem,
CountDown
} from 'vant' // 全局引入vant样式
Vue.use(Toast)
.use(List)
.use(Dialog)
.use(Stepper)
.use(ActionSheet)
.use(Overlay)
.use(Slider)
.use(Tab)
.use(Tabs)
.use(Popup)
.use(Sticky)
.use(Swipe)
.use(SwipeItem)
.use(CountDown)
在根目录下的babel.config.js文件中添加vant按需加载
module.exports = {
presets: ['@vue/cli-plugin-babel/preset'],
// 设置vant自动按需加载
plugins: [
[
'import',
{ libraryName: 'vant', libraryDirectory: 'es', style: true },
'vant'
]
]
}
二、移动端自适应处理。
1.先安装postcss-px-to-viewport
yarn add postcss-px-to-viewport -D
2.在根目录下新建postcss.config.js
plugins: {
autoprefixer: {},
'postcss-px-to-viewport': {
viewportWidth: 375, // 视窗的宽度,对应的是我们设计稿的宽度,一般是750
viewportHeight: 667, // 视窗的高度,根据750设备的宽度来指定,一般指定1334,也可以不配置
unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数
viewportUnit: 'vw', // 指定需要转换成的视窗单位,建议使用vw
selectorBlackList: ['.ignore'], // 指定不转换为视窗单位的类,可以自定义,可以无限添加,建议定义一至两个通用的类名
minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位,你也可以设置为你想要的值
mediaQuery: false
}
}
3.可能出现的问题
当配置完上述步骤以后出现下图问题
// 一般vue报错提示很智能,上述提示就是babel-plugin-import包的缺失
直接 yarn add babel-plugin-import
然后 yarn serve 就可以成功运行项目
运行项目之后就可以看到页面中的px单位已经变成vw
相关文章:
移动端适配方案之postcss-px-to-viewport
npm postcss-px-to-viewport
三、配置全局公共样式。
1.我们现在src/styles目录下新建以下scss文件
├─styles // 放置一些通用的scss
│ _mixins.scss // 放置一些常用的混合器
│ _variable.scss // 放置一些样式变量
│ common.scss // 放置一些公共的样式
2.在项目根目录新建vue.config.js文件
'use strict'
const name = defaultSettings.title || 'H5' // page title
const port = process.env.port || process.env.npm_config_port || 8888
// All configuration item explanations can be find in https://cli.vuejs.org/config/
module.exports = {
....
css: {
loaderOptions: {
scss: {
prependData: `@import "~@/styles/_variable.scss"; @import "~@/styles/_mixins.scss";`
}
}
},
....
}
下面会讲vue.config.js完整配置