nuxt - 初始化项目

1. 初始化项目

• 在cmd窗口中输入npx create-nuxt-app nuxt-test，其中nuxt-test是你的项目名称。

• 选择配置

  
  
  nuxt项目搭建配置
• 安装完成后，进入到nuxt-test项目，在cmd窗口中输入npm run dev即可跑项目。

2. 对项目进行基础配置

lib-flexible + postcss-px2rem

lib-flexible：动态改变html的font-size

npm install lib-flexible --save

postcss-px2rem：将px转换成rem

npm install postcss-px2rem –save

配置nuxt.config.js

• 配置lib-flexible

plugins: [
  {
    src: './node_modules/lib-flexible/flexible.js',
    ssr: false // ssr为true时是无window对象的，因此如果需要window对象，需要将ssr设置为false
  }
]

弊端：这样子引入lib-flexible，会导致页面元素一开始出现很小的情况，闪烁一下才会恢复正常。这是因为DOM在渲染出来的时候，flexible生成的font-size还没有设置到html里面去。所以解决方法就是在渲染之前，我们就要设置好根元素的font-size，即将js文件通过外链的形式引入到头部。

在head里加入script

head: {
  script: [
    { src: './node_modules/lib-flexible/flexible.js' }
  ]
}

然而我发现不管怎么改引入的路径，页面都是报404，找不到这个js文件，不知道是因为head里不能引入node_modules里的文件还是我的路径一直没引对，还没找到原因，记录一个问题点？？？
最后决定在static文件夹里，把node_modules/lib-flexible/flexible.js文件复制一份进去，再引入到头部。

head: {
  script: [
    { src: '/js/flexible.js' }
  ]
}

至此，问题解决了，屏幕也不闪了，接下来就配置postcss-px2rem吧~

build: {
  postcss: [
    require('postcss-px2rem')({
      remUnit: 37.5 // remUnit: 37.5 表示1rem=37.5px
    })
  ]
}

OK，第一部分就先这样了，后面就进行环境配置吧。