已有的vue项目如何改成响应式布局

要将已有的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），添加以下代码：

module.exports = {
  publicPath: "./",
  outputDir: "dist",
  lintOnSave: true,
  css: {
    loaderOptions: {
      css: {},
      postcss: {
        plugins: \[
          require("postcss-px2rem")({
            remUnit: 192 // 设计图宽度/10
          })
        \]
      }
    }
  },
};

3. 修改main.js文件，引入lib-flexible-computer插件：

import Vue from 'vue'
import App from './App'
import 'lib-flexible-computer'

new Vue({
  render: h => h(App)
}).$mount('#app')

4. 在需要响应式布局的组件中进行屏幕大小的监听和样式的判断。可以使用computed属性和watch属性来实现：

computed: {
  ...mapGetters(\['bigSum'\]), // 引入vuex的临界值
},
watch: {
  'bigSum': {
    handler(newValue, oldValue) {
      this.isMScreen = this.bigSum; // 监听临界值，如果发生变化，修改屏幕宽度判断值isMScreen
    }
  }
}

5. 在需要响应式布局的组件中，根据判断修改样式。可以使用三元表达式来判断是否达到临界值，从而修改样式：

<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生命周期钩子函数中获取屏幕宽度：

<div class="header-components" ref="theRef">
  <!-- 通过挂载的ref="theRef"的方式，等等就可以获取这个div的具体数据，包括所占空间的大小等等 -->
</div>

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 ]