- 新建一个vue项目
我们执行npm run serve 启动项目，在浏览器输入：“localhost:8080”；正常的话然后我们会看到项目的启动页
2.把目录结构改为下图所示
3.更改路由(router)的文件
核心代码
import Vue from ‘vue’
import VueRouter from ‘vue-router’
Vue.use(VueRouter)
const routesP = [{
path: ‘/’,
name: ‘Index’,
component: () => import( /* webpackChunkName: “about” */ ‘…/views/pc/index.vue’)
}]
const routesM = [{
path: ‘/’,
name: ‘Index’,
component: () => import( /* webpackChunkName: “about” */ ‘…/views/mobile/index.vue’)
}]
var routes = [];
if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
routes = routesM
} else {
routes = routesP
}
const router = new VueRouter({
mode: ‘history’,
base: process.env.BASE_URL,
routes
})
export default router
4.pc端和移动端分别打开网站
5.移动端配置vw适配
安装处理移动端适配各种依赖包
cnpm install cssnano postcss-aspect-ratio-mini postcss-cssnext postcss-import postcss-px-to-viewport postcss-url postcss-write-svg --save
6.新建postcss.config.js文件进行适配配置
核心配置
module.exports = {
“plugins”: {
“postcss-import”: {},
“postcss-url”: {},
“postcss-aspect-ratio-mini”: {}, //主要用来处理元素容器宽高比
“postcss-cssnext”: {}, //该插件可以让我们使用CSS未来的特性，其会对这些特性做相关的兼容性处理。
“postcss-px-to-viewport”: { //http://npm.taobao.org/package/postcss-px-to-viewport
viewportWidth: 750, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
unitPrecision: 3, // 指定px转换为视窗单位值的小数位数（很多时候无法整除）
viewportUnit: ‘vw’, // 指定需要转换成的视窗单位，建议使用vw
selectorBlackList: [’.ignore’, ‘.hairlines’, ], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
exclude: [/node_modules/, /pc/], //If value is regexp, will ignore the matches files.If value is array, the elements of the array are regexp.
minPixelValue: 1, // 小于或等于1px不转换为视窗单位，你也可以设置为你想要的值
mediaQuery: false // 允许在媒体查询中转换px
},
“cssnano”: { //主要用来压缩和清理CSS代码
“cssnano-preset-advanced”: {
zindex: false,
autoprefixer: false
},
}
}
};
7.重启项目，此时mobile目录的文件就可以进行移动端的vw适配
