实现PC端与移动端自适应的问题,使用了 vue3 + vite+ ts + pinia 技术栈开发项目。
思路:
- 写两套代码,pc端和移动端
- 采用路由控制,加载PC端代码还是移动端代码
- 通过屏幕宽度大小来判断加载相应端的代码
1、创建两套代码的文件夹
2、分别在pc、moblie 文件夹下创建 index.vue 文件是用来存放路由视图的,用于展示路由组件。
3、在views文件夹下创建一个文件用于展示两个index.vue组件
创建一个文件用于引入并展示两个index.vue组件,用于判断是pc端、还是移动端的组件进行展示。
4、使用 pinia 创建了一个状态管理devices,用于存储,可以全局使用
5、创建pc端和移动端两套路由
在router文件夹下创建两套路由
在index.js 中默认展示 PC 端的路由
6、 检测屏幕变化
7、移动端适配
npm install postcss-pxtorem --save
npm install amfe-flexible --save
npm install autoprefixer --save
npm i unplugin-vue-components -D
main.js中引入
import 'amfe-flexible'
8、vite.config.js中配置 如果引入了vant4 注意要忽略[vant]不进行rem转换
注意:大佬们有更好的方法实现吗?