nuxt搭建官网

npx create-nuxt-app GW

引入flexible.js

可加载阿里的cdn文件 http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js
或者下载到本地

//nuxt.config.js
head: {
    title: pkg.name,
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: pkg.description }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ],
    script: [
    //flexible.js
      {src: 'http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js'}
    ]
  },

对移动端做适配所以要用到postcss-2rem插件（可以将项目中的px转成rem）

yarn add postcss-px2rem

//nuxt.config.js(加在build中)
build: {
  /*
  ** You can extend webpack config here
  */
  extend(config, ctx) {
    
  },
  postcss: [
  //postcss-px2rem
      require('postcss-px2rem')({
        remUnit: 75 //remUnit: 75 表示1rem=75px
      })
  ]
}

css预加载使用stylus(https://zh.nuxtjs.org/api/configuration-build/#styleresources)

yarn add @nuxtjs/style-resources
yarn add stylus-loader stylus

modules: [
  '@nuxtjs/style-resources',
],

开始构建布局layouts（一般官网是上中下结构）
封装头部和尾部组件