1、创建项目

yarn create nuxt-app <项目名>

2、修改项目的host 和 port

在package.json文件中新增如下代码：
"config": {
    "nuxt": {
      "host": "192.168.124.4",    // 此处可以改成自己的ip
      "port": "1818"              //  端口可以随意更改
    }
  },

3、在nuxt中使用sass

yarn add node-sass sass-loader -D
yarn add node-sass@5.0.0 sass-loader@10.1.1 -D   指定版本安装

注意：可能node-sass sass-loader版本过高，导致报错。nuxt webpack版本好像是4.0，反正如果报错就降版本
"node-sass": "5.0.0",
"sass-loader": "10.1.1"

4、引入scss全局变量或函数

yarn add --save-dev @nuxtjs/style-resources

修改nuxt.config.js配置

export default {
  modules: [
    '@nuxtjs/style-resources',
  ],
  styleResources: {
    scss: './assets/variables.scss',
    less: './assets/**/*.less',
    // sass: ... 需要什么配置什么，这里是全局的   根据需要配置，没有可以不配置
  }
}

5、使用第三方插件库vant

安装
yarn add vant -S

在plugins文件夹中新建文件vant.js
import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';
 
Vue.use(Vant);

修改nuxt.config.js配置
plugins: [
    '@/plugins/vant'
]
css: [
    'vant/lib/index.css',
]

6、Rem 布局适配

1、安装postcss-pxtorem lib-flexible
yarn add postcss-pxtorem lib-flexible --save-dev
yarn add postcss-pxtorem -D

2、配置lib-flexible
在plugins文件夹中新建文件lib-flexible.js
写入代码：import 'lib-flexible'
修改nuxt.config.js配置
meta: [
      { charset: 'utf-8' },
      // { name: 'viewport', content: 'width=device-width, initial-scale=1' }, 这个要注释，用lib-flexible自动生成的viewport
      { hid: 'description', name: 'description', content: '' }
]
plugins: [
    {
      src: '@/plugins/lib-flexible',
      ssr: false //不设置会报错
    }
]

3、配置postcss-pxtorem
修改nuxt.config.js配置
build: {
    postcss: {
      plugins: {
        // postcss-pxtorem 插件的版本需要 >= 5.0.0
    'postcss-pxtorem': {
      rootValue({ file }) {
        return file.indexOf('vant') !== -1 ? 37.5 : 75;
      },
      propList: ['*'],
    },
      }
    }
}

注意：postcss-pxtorem高版本会报错：Error: PostCSS plugin postcss-pxtorem requires PostCSS 8
具体原因不知道
解决办法：老规矩，降版本
yarn add postcss-pxtorem@5.1.1 -D

7、配置初始化css

assets\css\common.css

/*
---------------------------------------
【样式初始化】
---------------------------------------
*/
body,h1,h2,h3,h4,h5,h6,p,ul,ol,form,input,table,tr,td,dl,dt,dd,img,div{margin:0;padding:0;border:0;}
body{font:13px/25px Arial;background:#FFF;}
ol,ul{list-style-type:none;}
img{vertical-align:middle; display:inline-block;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
strong {font-weight: normal;}
select,button,textarea,input[type=submit]{font-family: 'Microsoft YaHei';cursor:pointer;}
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder {color: #CCC;}
input[type=search]::-webkit-search-cancel-button{-webkit-appearance: none;}
table{border-collapse:collapse;}
a{text-decoration:none;color:#333;cursor: pointer;outline:none;-moz-outline-style:none;text-decoration: none;-webkit-tap-highlight-color: rgba(0,0,0,0);}
em,i{font-style: normal;}
img {max-width: 100%;}
:focus{outline:0;}
.clear:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clear{*height:1%;*clear: both;}
.none {display: none;}
.left {float: left;}
.right {float: right;}
.hidden {overflow: hidden;}
html,body,.app,.word {height: 100%;}

修改nuxt.config.js配置
css: [
    '~assets/css/common.css',
]

8、启动项目选择隐藏

// 去掉每次启动提示Are you interested in participating? (Y/n)
"telemetry": false,