nuxt初识

前言

---

最近一直没有更新写的文章，之前学习了一些关于vue的内容。这次尝试了基于vue的nuxt.js框架去搭建一个webApp。中间还是踩了很多坑。

nuxt.js

让我们先来了解一下Nuxt是什么，Nuxt 是一个更高级的框架，它构建在Vue之上。它简化了通用或单页Vue应用程序的开发。Nuxt.js 主要关注的是应用的UI渲染。

为什么要使用nuxt.js

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

1. 由于资源请求量大，造成网站首屏加载缓慢，不利于用户体验。
2. 由于页面内容通过js插入，对于内容性网站来说，搜索引擎无法抓取网站内容，不利于seo。

nuxt 项目结构

• .nuxt (Nuxt自动生成，临时的用于编辑的文件，build)
• assets (用于组织未编译的静态资源如LESS、SASS或JavaScript)
• components (用于自己编写的Vue组件，比如波动组件、日历组件、分页组件)
• layouts (布局目录，用于组织应用的布局组件，不可更改)
• middleware (用于存放中间件)
• pages (用于存放写的页面，我们主要的工作区域)
• plugins (用于存放JavaScript插件的地方)
• static (用于存放静态资源文件，比如图片)
• store (用于组织应用的Vuex 状态管理)
• .editorconfig (开发工具格式配置)
• .eslintrc.js (ESLint的配置文件，用于检查代码格式)
• .gitignore (配置git不上传的文件)
• nuxt.config.json (用于组织Nuxt.js应用的个性化配置，已覆盖默认配置)
• package-lock.json (npm自动生成，用于帮助package的统一设置的，yarn也有相同的操作)
• package.json (npm 包管理配置文件)

具体的详细用法还是看官方文档：点击这里

我再用一段时间，有空会总结一下具体的用法。以及遇到的问题