nuxt + vant 适配 rem
程序员文章站
2022-06-06 21:17:28
...
创建项目
npx create-nuxt-app <项目名>
详情查看 安装-NuxtJS
安装vant
npm i vant -S
引入vant
这里采用的是: 导入所有组件
在根目录的 plugins
目录下创建 vant.js
,内容如下:
import Vue from 'vue'
import Vant from 'vant'
import 'vant/lib/index.css'
Vue.use(Vant)
在 nuxt.config.js
中引入:
module.exports = {
...
plugins: [
{
src: '~/plugins/vant.js'
}
}
...
}
Rem 适配
npm install postcss-pxtorem autoprefixer --save-dev
npm i -S amfe-flexible
在根目录的 plugins
目录下创建 lib-flexible.js
,内容如下:
import 'amfe-flexible'
然后在 nuxt.config.js
添加如下配置
module.exports = {
...
head: {
...
meta: [
{
charset: 'utf-8'
},
{
name: 'viewport',
content:
'width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no'
}
...
}
...
}
...
plugins: [
{
src: '~/plugins/vant.js'
},
{
src: '~/plugins/lib-flexible.js',
mode: 'client'
}
}
...
build: {
...
postcss: {
plugins: {
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*']
}
},
preset: {
autoprefixer: true
}
}
...
}
}
可以在 package.json
中配置 browserslist
:
{
...
"browserslist": [
"> 1%",
"last 2 versions"
]
...
}
上一篇: Laravel快速入门
下一篇: 紫薯功效你知道哪些?