vue3 + vite+ ts + pinia(PC端和移动端共用一套代码)

1,165 阅读1分钟

实现PC端与移动端自适应的问题,使用了 vue3 + vite+ ts + pinia 技术栈开发项目。

思路

  1. 写两套代码,pc端和移动端
  2. 采用路由控制,加载PC端代码还是移动端代码
  3. 通过屏幕宽度大小来判断加载相应端的代码

1、创建两套代码的文件夹

1717415726105.png

2、分别在pc、moblie 文件夹下创建 index.vue 文件是用来存放路由视图的,用于展示路由组件。

1717415901746.png

3、在views文件夹下创建一个文件用于展示两个index.vue组件

创建一个文件用于引入并展示两个index.vue组件,用于判断是pc端、还是移动端的组件进行展示。

1717416033580.png

1717416256032.png

4、使用 pinia 创建了一个状态管理devices,用于存储,可以全局使用

1717416634707.png 5、创建pc端和移动端两套路由

在router文件夹下创建两套路由

1717416877956.png

1717416915021.png

在index.js 中默认展示 PC 端的路由

1717417006883.png 6、 检测屏幕变化

1717417112491.png

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转换

1717417465638.png

注意:大佬们有更好的方法实现吗?