基于ChatGpt开发移动端自适应框架
心血来潮想看看ChatGpt是不是真的好使,于是搜索了《基于vue-cli3搭建一个自适应的移动端框架》答案如下。
·
心血来潮想看看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
}
试过了 确实可以实现自适应,不过我搜索了很多次,每次提供的答案都不一样,有的方案可以,有的不行
更多推荐
已为社区贡献11条内容
所有评论(0)