1.首先先用nuxt脚手架生成一个项目，这我就不说了
2.安装 lib-flexible与postcss-pxtorem
npm i -S amfe-flexible
npm install postcss-pxtorem --save-dev
3.配置 nuxt.config.js
export default {
// ......
head: {
title: process.env.npm_package_name || '',
meta: [
{ charset: 'utf-8' },
{
name: 'viewport',
content:
'width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no'
// 增加viewport标签
},
{
hid: 'description',
name: 'description',
content: process.env.npm_package_description || ''
}
],
link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
},
// ......
// 在plugins内引入 amfe-flexible ，ssr设置为false（不设置为false会报错）
plugins: [
{
src: './node_modules/amfe-flexible/index.js',
ssr: false
}
],
// ......
// 更改build为如下，我这里面项目还引入了 vant 所以这是根字体设置为37.5
build: {
postcss: [
require('postcss-pxtorem')({
rootValue: 37.5, // vant-UI的官方根字体大小是37.5
propList: ['*']
}),
require('autoprefixer')({
browsers: ['Android >= 4.0', 'iOS >= 7']
}),
],
/*
** You can extend webpack config here
*/
extend(config, ctx) {}
}
}
4.运行 dev 看看效果吧！
