心血来潮想看看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
}

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

Logo

前往低代码交流专区

更多推荐