nuxtjs:移动端适配

引入postcss-pxtorem;

npm install postcss-pxtorem --save

引入lib-flexible;

npm install lib-flexible --save

把node_modules\lib-flexible下的flexible.js复制一份,复制到根目录的plugins下(无plugins文件夹自行创建);
把plugins/flexible.js的refreshRem方法里的540(下方截图红框)改成width
在这里插入图片描述
在nuxt.config.js里引入plugins/flexible.js

plugins: [
	{src:'@plugins/flexible.js',ssr:false}
]

在nuxt.config.js里引入postcss-pxtorem

build: {
	postcss: [
		require('postcss-pxtorem')({
			rootValue: 37.5,    // 以设计稿750为参考
			propList: ['*']
		}),
	],
}

按照上面引入的话,会出现一个问题,页面加载的时候文字会先小后大(大即正常设置的样式大小)
在这里插入图片描述
在这里插入图片描述
例:123设置字号28px,刷新的时候会先小,然后在加载成正常的28px;
解决办法:把flexible.js当成静态文件,放在static下(也可以在static下面创建一个js的文件夹,专门存放静态js)
nuxt.config.js把上面plugins设置的{src:‘@plugins/flexible.js’,ssr:false}去掉,改成

head:{
	script:[
		{src:'js/flexible.js',type:'text/javascript',charset:'utf-8'}
	]
}

如果要引入公共的一些css(scss的话要引入相关依赖)

css: [
	'@/assets/css/common.scss'
]
nuxt3是一个基于Vue.js的服务器端渲染框架,它可以帮助我们快速构建适配移动端和Web端的应用程序。下面是一些关于nuxt3适配移动端和Web端的方法和步骤: 1. 安装Nuxt.js:首先,你需要安装Nuxt.js。你可以使用npm或者yarn来安装Nuxt.js。在命令行中运行以下命令来安装Nuxt.js: ```shell npm install create-nuxt-app -g ``` 2. 创建一个新的Nuxt项目:使用以下命令创建一个新的Nuxt项目: ```shell npx create-nuxt-app my-app ``` 这将会创建一个名为my-app的新的Nuxt项目。 3. 配置Nuxt.js:在创建项目的过程中,你将会被要求回答一些问题来配置你的Nuxt.js项目。你可以选择适配移动端和Web端的选项,例如是否使用Element Plus来适配移动端和Web端。 4. 安装Element Plus:如果你选择了使用Element Plus来适配移动端和Web端,你需要在项目中安装Element Plus。在命令行中运行以下命令来安装Element Plus: ```shell npm install element-plus ``` 5. 配置Element Plus:在Nuxt.js的配置文件(nuxt.config.js)中,你需要引入Element Plus并配置它。你可以在配置文件中添加以下代码: ```javascript export default { // ... buildModules: [ // ... 'element-plus/nuxt' ], // ... } ``` 6. 创建适配移动端和Web端的组件:在你的Nuxt项目中,你可以创建适配移动端和Web端的组件。你可以使用Vue.js的响应式布局来实现适配移动端和Web端的效果。 7. 运行项目:在命令行中运行以下命令来启动你的Nuxt项目: ```shell npm run dev ``` 这将会启动一个本地开发服务器,并在浏览器中打开你的应用程序。 这是一个简单的介绍,希望对你有帮助。如果你需要更详细的信息,请参考Nuxt.js的官方文档。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值