nuxtjs学习笔记

是什么

Nuxt.js 是一个基于 Vue.js 的通用应用框架。

通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI渲染。

我们的目标是创建一个灵活的应用框架，你可以基于它初始化新项目的基础结构代码，或者在已有 Node.js 项目中使用 Nuxt.js。

特性

基于 Vue.js
自动代码分层
服务端渲染
强大的路由功能，支持异步数据
静态文件服务
ES2015+ 语法支持
打包和压缩 JS 和 CSS
HTML 头部标签管理
本地开发支持热加载
集成 ESLint
支持各种样式预处理器： SASS、LESS、 Stylus 等等
支持 HTTP/2 推送

流程

运行 create-nuxt-app
为了快速入门，Nuxt.js团队创建了脚手架工具 create-nuxt-app。

确保安装了npx（npx在NPM版本5.2.0默认安装了）：

$ npx create-nuxt-app <项目名>
或者用yarn ：

$ yarn create nuxt-app <项目名>
它会让你进行一些选择:

在集成的服务器端框架之间进行选择:
None (Nuxt默认服务器)
Express
Koa
Hapi
Feathers
Micro
Fastify
Adonis (WIP)
选择您喜欢的UI框架:
None (无)
Bootstrap
Vuetify
Bulma
Tailwind
Element UI
Ant Design Vue
Buefy
iView
Tachyons
选择您喜欢的测试框架:
None (随意添加一个)
Jest
AVA
选择你想要的Nuxt模式 (Universal or SPA)
添加 axios module 以轻松地将HTTP请求发送到您的应用程序中。
添加 EsLint 以在保存时代码规范和错误检查您的代码。
添加 Prettier 以在保存时格式化/美化您的代码。
当运行完时，它将安装所有依赖项，因此下一步是启动项目:

$ cd
$ npm run dev
应用现在运行在 http://localhost:3000 上运行。

注意：Nuxt.js 会监听 pages 目录中的文件更改，因此在添加新页面时无需重新启动应用程序。

了解模板项目的目录结构： 目录结构。