利用nuxtJS 制作纯静态页面的开发【SSR】

创建这样的一个纯静态的SSR形式的公共项目，下次只要copy除node_modules文件之外的所有文件  重新npm i 就可以了；

 

1.创建项目  npx create-nuxt-app <项目名>

 

2. swiper 轮翻图的插件   【我的这片博客有详细说明 ：https://www.cnblogs.com/tap819/p/16243250.html】

 

3.scss 安装    npm install --save-dev sass sass-loader@10

 

4.px rem 插件安装  npm install postcss-pxtorem

 nuxt.config.js的配置

build: {

    postcss: {//rem配置

      'postcss-pxtorem': {

        rootValue: '37.5',

        propList: ['*'],

        selectorBlackList: ['mint-']

      }

    }

  }

 

5.引入  jquery-3.5.1.min.js   flexible.js

 nuxt.config.js的配置

script: [

      { src: '/js/flexible.js', type: "text/javascript", charset: 'utf-8' },  //rem配置

      { src: '/js/jquery-3.5.1.min.js', type: "text/javascript", charset: 'utf-8' },  //引入 jquery

      ],

 

6.新建 文件夹 layouts   新建文件default.vue  完成公共布局  components  创建Header.vue  Footer.vue 两个公共的组件

<template>

  <div>

    <Header />

    <nuxt />

    <Footer />

  </div>

</template>

 

 

1.轮播图功能

2. 利用 scss布局开发

3.通过rem 与px的转换  实现PC 移动端的适配，

 

开发完成之后    执行 npm run generate    会生成dist文件夹   你把dist文件夹里面的内容丢到服务器上就完成静态部署了；