vue如何从pc端到移动端

Vue.js 本身不区分是PC端还是移动端，但你可以通过检测用户代理（User Agent）来决定如何呈现你的Vue应用。此外，Vue CLI 3+ 提供了自动适配移动端的简易方式。

1. 通过用户代理检测：

   你可以在Vue组件中使用JavaScript检测用户代理，然后根据结果决定加载哪个版本的样式或逻辑。

mounted() {
  if (/mobile/i.test(navigator.userAgent)) {
    // 移动端逻辑
  } else {
    // PC端逻辑
  }
}

2. 使用Vue CLI的自适应方案：

   Vue CLI 3+ 创建的项目可以通过配置 vue.config.js 文件来启用自适应方案。

首先，安装lib-flexible 和 postcss-px2rem：

npm install lib-flexible --save
npm install postcss-px2rem --save-dev

然后，在main.js中引入lib-flexible：

import 'lib-flexible'

接下来，在vue.config.js中配置自适应：

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-px2rem')({
            remUnit: 37.5 // 设计稿宽度/10，通常设置为75
          })
        ]
      }
    }
  }
}

最后，在HTML模板中添加viewport元标签：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

这样，你的Vue应用就可以在移动端和PC端都很好地工作了。如果需要针对不同端点进行特定的样式或逻辑调整，可以在组件中使用上述的用户代理检测方法。