nuxt初识

295 阅读2分钟

前言


最近一直没有更新写的文章,之前学习了一些关于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 包管理配置文件)

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

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