开发总结：NuxtJs

安装：（使用 nuxt 提供的 starter 模板）

npx create-nuxt-app demo-nuxt

 文件结构

 

nuxt.config.js 配置：

     引入css、js、首屏加载 

载入模块及配置： 

 请求：npm install @nuxtjs/axios --save

 轻量转化时间插件：npm install @nuxtjs/dayjs --save

 proxy代理，解决跨域：npm install @nuxtjs/proxy --save

  

踩坑：

  1、同一个页面写入两个swiper，其中一个不生效？

nuxt 中没有keep-alive。

由于是服务端渲染，所以不支持组件的keep-alive，那自然activated、deactivated这两个生命周期也没了

 

 nuxt 和 vue 的区别：

• 不可使用 keep-alive，没有激活阶段（activated）和停用阶段（deactivated）的钩子函数；
• nuxt 不需要配置路由，pages 文件夹下的文件即为路由路径，例如：pages/source.vue，路由即：/source，index.vue默认路径为 /；
• nuxt 入口文件是：layouts/default.vue，vue 入口文件是：src/App.vue；
• <nuxt /> 相当于 <router-view/> , <nuxt-link/> 相当于 <router-link/>；
• webpack配置：nuxt 内置 webpack，允许在 nuxt.config.js 中 build 属性自定义构建配置；vue 的webpack 配置存放在build 文件夹下。

 

为什么要用 nuxt，而不使用 vue：

        vue 开发 SPA（单页面应用），打包生成只有一个 html 文件，通过 js 控制路由渲染对应的页面，而搜索引擎是不会执行页面js的，导致搜索引擎只能收录一个 index.html 页面，从而导致影响 seo 优化。

 

优点：

• 基于 Vue.js
• 自动代码分层
• 服务的渲染
• 强大的路由功能，支持异步数据
• 静态文件服务
• 支持 ES6 / ES7 语法
• 打包和压缩 js 和 css
• html 头部标签管理
• 本地开发支持热加载
• 集成 ESLint
• 支持个杂种样式预处理：stylus、sass、less 等