基于ChatGpt开发移动端自适应框架

心血来潮想看看ChatGpt是不是真的好使，于是搜索了
《基于vue-cli3搭建一个自适应的移动端框架》

答案如下

1. 创建项目

首先，我们需要安装Vue CLI 3。在终端输入以下命令：

npm install -g @vue/cli

然后，我们可以使用以下命令创建一个新的项目：

vue create my-project

这将创建一个新的Vue项目，并为我们提供一些选项来选择所需的功能。

2. 安装移动端框架 （这步可以省略）

接下来，我们需要为项目安装一个移动端框架。我们可以使用Vant或者Mint UI等流行的UI框架。这里我们以Vant为例进行说明。

npm i vant -S

3. 配置移动端适配方案

为了实现自适应的移动端框架，我们需要选择一种移动端适配方案。这里我们使用rem适配方案。

在项目根目录下创建postcss.config.js文件，并添加以下内容：

module.exports = {
    
    
  plugins: {
    
    
    'postcss-pxtorem': {
    
    
      rootValue: 37.5, // 按照设计图尺寸，将px转为rem
      propList: ['*'],
      exclude: /(node_module)/ // 不转换第三方包
    }
  }
}

在main.js文件中添加以下内容：

import 'amfe-flexible'

在main.js 添加 ‘amfe-flexible’ 插件前需要下载一下，ChatGpt 少了一步

npm install --save amfe-flexible

上述代码中，我们引入了amfe-flexible插件，它可以将页面宽度分为10份，每份为1rem。例如，我们可以使用以下代码设置一个宽度为100px的元素

div {
    
    
  width: 2rem; // 宽度为20px
}

试过了 确实可以实现自适应，不过我搜索了很多次，每次提供的答案都不一样，有的方案可以，有的不行