nuxt的使用(一款vue基于服务器SSR渲染工具)

Nuxt.js简单的说是Vue.js的通用框架，最常用的就是用来作SSR（服务器端渲染）。

SSR，就是在服务器端将对Vue页面进行渲染生成html文件，将html页面传递给浏览器。

SSR两个优点：

• SEO 不同于SPA的HTML只有一个无实际内容的HTML和一个app.js，SSR生成的HTML是有内容的，这让搜索引擎能够索引到页面内容。
• 更快内容到达时间 传统的SPA应用是将bundle.js从服务器获取，然后在客户端解析并挂载到dom。而SSR直接将HTML字符串传递给浏览器。大大加快了首屏加载时间。

1.首先你需要安装vue-cli，安装过的小伙伴直接跳过

npm install vue-cli -g

2.确保安装了npx（npx在NPM版本5.2.0默认安装了）后，运行命令

npx create-nuxt-app <项目名>

之后它会让你进行一些选择(按自己的需求选择):

1. 在集成的服务器端框架之间进行选择:
   • None (Nuxt默认服务器)
   • Express
   • Koa
   • Hapi
   • Feathers
   • Micro
   • Adonis (WIP)
2. 选择您喜欢的UI框架:
   • None (无)
   • Bootstrap
   • Vuetify
   • Bulma
   • Tailwind
   • Element UI
   • Ant Design Vue
   • Buefy
3. 选择你想要的Nuxt模式 (Universal or SPA)
4. 添加 axios module 以轻松地将HTTP请求发送到您的应用程序中。
5. 添加 EsLint 以在保存时代码规范和错误检查您的代码。
6. 添加 Prettier 以在保存时格式化/美化您的代码。

3.运行完以上代码，我们就会得到一个nuxt项目文件啦，之后启动项目

npm run dev

启动即可，项目默认运行在http://localhost:3000

4.nuxt目录结构介绍