要将已有的
Vue项目
改成响应式布局，可以按照以下步骤进行操作：
1. 安装postcss-px2rem和lib-flexible-computer插件，可以使用npm命令进行安装：
```
npm install postcss-px2rem --save
npm install lib-flexible-computer --save
```
2. 修改全局CLI配置，找到项目的配置文件（一般是
vue.config.js或者webpack.config.js），添加以下代码：
```javascript
module.exports = {
publicPath: "./",
outputDir: "dist",
lintOnSave: true,
css: {
loaderOptions: {
css: {},
postcss: {
plugins: \[
require("postcss-px2rem")({
remUnit: 192 // 设计图宽度/10
})
\]
}
}
},
};
```
3. 修改main.js文件，引入lib-flexible-computer插件：
```javascript
import
Vue from '
vue'
import App from './App'
import 'lib-flexible-computer'
new
Vue({
render: h => h(App)
}).$mount('#app')
```
4. 在需要
响应式布局的组件
中进行屏幕大小的监听和样式的判断。可以使用computed属性和watch属性来实现：
```javascript
computed: {
...mapGetters(\['bigSum'\]), // 引入
vuex的临界值
},
watch: {
'bigSum': {
handler(newValue, oldValue) {
this.isMScreen = this.bigSum; // 监听临界值，如果发生变化，修改屏幕宽度判断值isMScreen
}
}
}
```
5. 在需要
响应式布局的组件
中，根据判断修改样式。可以使用三元表达式来判断是否达到临界值，从而修改样式：
```html
<div class="downtab_func">
<div class="downtab_func_item" v-for="(item,index) in todayList" :key="index" :style="{float:item.id%2==1?'left':'right', width: isMScreen ? '224px' : '270px'}">
<!-- style里判断是否到达临界值，若是到达，就切换其样式 -->
<div class="downtab_func_item_text">{{item.text}}</div>
</div>
</div>
```
6. 如果需要获取具体屏幕的大小，可以通过在组件
中挂载ref属性，并在mounted生命周期钩子函数
中获取屏幕宽度：
```html
<div class="header-components" ref="theRef">
<!-- 通过挂载的ref="theRef"的方式，等等就可以获取这个div的具体
数据，包括所占空间的大小等等 -->
</div>
```
```javascript
mounted() {
const that = this; // 保存一下this指向
let screenWidth = this.$refs.theRef.clientWidth; // 获取屏幕宽度
that.isMScreen = screenWidth <= 1519 ? true : false; // 判断是否达到临界点
this.$store.commit('updateWidth', that.isMScreen); // 在
vuex保存结果
// 监听当前的屏幕变化，若是当前的屏幕发生变化，就修改其值，并将其重新存入
vuex
中
window.onresize = () => {
return (() => {
screenWidth = that.$refs.theRef.clientWidth;
that.isMScreen = screenWidth <= 1519 ? true : false;
this.$store.commit('updateWidth', that.isMScreen);
})();
};
},
```
通过以上步骤，你可以将已有的
Vue项目
改成响应式布局。记得根据你的具体需求进行相应的修改和调整。
#### 引用[.reference_title]
- *1* [
Vue 老项目 如何实现
响应式布局](https://blog.csdn.net/IT_czh/article/details/124020164)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* *3* [
vue 响应式布局](https://blog.csdn.net/weixin_45180205/article/details/125347090)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
716
