在 https://blog.csdn.net/qq_39480297/article/details/125785301?spm=1001.2014.3001.5501一文中,采用路由控制,加载PC端代码还是移动端代码。本文采用,通过屏幕宽度大小来判断加载相应端的代码。
首先,创建一个新的vue项目。
① 创建 src/views/index/index.vue
② 在src/router/index.js中设置
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}, {
path: '/index',
name: 'Index',
component: () =>
import(/* webpackChunkName: "about" */ '../views/index')
}
]
③ 在App.vue中设置
① src/views/index/路径下,创建pc/index.vue、m/index.vue
② 设置store,在src/store中,目录如下:
index.js
import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
Vue.use(Vuex)
const modulesFiles = require.context('./modules', true, /\.js$/)
// you do not need `import app from './modules/app'`
// it will auto require all vuex module from modules file
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
// set './app.js' => 'app'
const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
const value = modulesFiles(modulePath)
modules[moduleName] = value.default
return modules
}, {})
const store = new Vuex.Store({
modules,
getters
})
export default store
app.js
const state = {
device: 'pc' // 默认是PC端,====》 PC端:pc、移动端:m
}
const mutations = {
SET_DEVICE: (state, device) => {
state.device = device
}
}
const actions = {
setDevice ({ commit }, device) {
commit('SET_DEVICE', device)
}
}
export default {
namespaced: true,
state,
mutations,
actions
}
getters.js
const getters = {
device: state => state.app.device
}
export default getters
③ 在src/views/index/index.vue中,通过判断store中的device,选择加载pc或m。
④ 在App.vue中,通过检测屏幕变化,设置当前设备应采用pc端还是移动端。
上述代码中,throttle节流方法,可以使用框架,也可以自定义,本文中使用自定义,在src/utils/index.js中,添加
export function throttle (func, wait, options) {
let context
let args
let result
var timeout = null
var previous = 0
if (!options) options = {}
var later = function () {
previous = options.leading === false ? 0 : new Date().getTime()
timeout = null
result = func.apply(context, args)
if (!timeout) context = args = null
}
return function () {
var now = new Date().getTime()
if (!previous && options.leading === false) previous = now
var remaining = wait - (now - previous)
context = this
args = arguments
if (remaining <= 0 || remaining > wait) {
if (timeout) {
clearTimeout(timeout)
timeout = null
}
previous = now
result = func.apply(context, args)
if (!timeout) context = args = null
} else if (!timeout && options.trailing !== false) {
timeout = setTimeout(later, remaining)
}
return result
}
}
运行结果如下:
pc:
移动端:
⑤ css适配
2、创建src/styles/,目录如下:
styles/m/index.less
.m {
font-size: 20px;
color: red;
}
styles/pc/index.less
.pc {
font-size: 50px;
color: blue;
}
styles/index.less
@import "./m/index.less";
@import "./pc/index.less";
3、在main.js中引入css
这样,css样式也可以进行pc、移动端适配
运行结果如下:
移动端:
pc端:
备注:后期也可设置pc端使用px布局,移动端使用rem来布局