Vue.js通用应用框架Nuxt如何快速上手

一、什么是Nuxt

Nuxt 是一个Vue.js通用应用框架，它构建在Vue之上。它简化了通用或单页Vue应用程序的开发。Nuxt.js 主要关注的是应用的UI渲染。

vue ssr 服务端渲染有了解过吗？

Vue.js 是构建客户端应用程序的框架。默认情况下，项目在客户端（浏览器）渲染的，生成 DOM 和操作 DOM。同时也可以使用服务端渲染，然后将渲染好的html直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应用程序。

为什么使用服务器端渲染 (SSR)？

更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。

搜索引擎蜘蛛并不会等待异步完成，再行抓取页面内容。如果你的站点，非常需要 SEO 来给你带来流量和成交，而你的页面又是异步获取内容，那么你就需要服务器端渲染(SSR)解决此问题。

二、Nuxt优缺点

最大优点上面已经说了，更好的SEO，利用蜘蛛爬取，并收录，带来流量和成交，尤其是在你的站点刚建立并没有人了解知道时。好的SEO，带来意想不到的效果。

缺点，由于是服务端渲染，所以服务器端负载会很大，尤其是流量大时。所以需要你添加适当的缓存策略来解决这个问题。当然有钱任性的小伙伴，可以购买好的服务器。

另外传统的vue项目，是单页面应用。渲染是从服务器获取所需js，在客户端将其解析生成html挂载于id为app的DOM元素上，这样会存在两大问题。

由于资源请求量大，造成网站首屏加载缓慢，不利于用户体验。

三、快速开始nuxt

npx create-nuxt-app <my-project>

项目名字大家随意，接下来就是选择默认集成框架插件了[输入数字完成要选择安装的项目，如下方的none就是1，Express对应2，依次类推。后面的选择也是同理]

服务器端框架

• None (Nuxt默认服务器)
• Express
• Koa
• Hapi
• Feathers
• Micro
• Fastify
• Adonis (WIP)

UI框架

• None (无)
• Bootstrap
• Vuetify
• Bulma
• Tailwind
• Element UI
• Ant Design Vue
• Buefy
• iView
• Tachyons

后面的你可以选择安装 axios、EsLint等，看自己喜好。

启动项目

cd <my-project>
npm run dev