利用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文件夹里面的内容丢到服务器上就完成静态部署了；

标签：npm,jquery,vue,nuxtJS,nuxt,js,rem,SSR,页面
来源： https://www.cnblogs.com/tap819/p/16254229.html