欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

nuxt模板的创建及使用(koa、sass)

程序员文章站 2022-06-22 09:05:44
概念Nuxt.js 是一个基于 Vue.js 的服务端渲染应用框架。Nuxt.js 为 客户端/服务端 这种典型的应用架构模式提供了许多有用的特性,例如异步数据加载、中间件支持、布局支持等。特性基于 Vue.js自动代码分层服务端渲染强大的路由功能,支持异步数据ES2015+ 语法支持打包和压缩 JS 和 CSSHTML 头部标签管理本地开发支持热加载集成 ESLint支持各种样式预处理器: SASS、LESS、 Stylus 等等支持 HTTP/2 推送流程图模板安装...

概念

Nuxt.js 是一个基于 Vue.js 的服务端渲染应用框架。

Nuxt.js 为 客户端/服务端 这种典型的应用架构模式提供了许多有用的特性,例如异步数据加载中间件支持布局支持等。

特性

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

流程图

nuxt模板的创建及使用(koa、sass)

模板安装

首先我们安装好npx(现在的node一般默认带有),如果已经有可以跳过此步。

npm i -g npx

然后我们使用nuxt给的模板安装指令:

npx create-nuxt-app  <my-project>

也可以直接用npm或者yarn直接安装,指令如下:

npm init nuxt-app <my-project>
yarn create nuxt-app <my-project>

由于nuxt的模板安装已经到了3.X版本,而该版本的server framework被否决了,所以如果想带有server framework选项的模板的话可以安装2.15.0的版本指令如下:

npx create-nuxt-app@2.15.0 <my-project>

不过两个版本插件之间的版本是有一定程度的差异的,如果你想使用更新的版本建议还是用回3.X版本,自己额外安装server framework,该本章只作2.15.0的安装使用。

关于安装的各种选项建议大家去理解是什么意思,毕竟一个好的开发人员要慢慢尝试去阅读理解英语。像下面的英语其实都很简单,如果不懂的可以去翻译网站翻译一下就理解了。
nuxt模板的创建及使用(koa、sass)

服务框架

nuxt模板的创建及使用(koa、sass)
我只截取了选项中的3个框架做了一下对比,相对来说koa更加的轻量,而express更多人使用

选项差异

3.x
nuxt模板的创建及使用(koa、sass)
2.15.0
nuxt模板的创建及使用(koa、sass)

package.json的差异

3.x
nuxt模板的创建及使用(koa、sass)

2.15.0
nuxt模板的创建及使用(koa、sass)

目录讲解

nuxt模板的创建及使用(koa、sass)
这里说一下2.15.0的目录结构:

  • 资源目录 assets 用于组织未编译的静态资源如 LESSSASSJavaScript。(关于 assets 目录的更多信息
  • 组件目录 components 用于组织应用的 Vue.js 组件。Nuxt.js 不会扩展增强该目录下 Vue.js 组件,即这些组件不会像页面组件那样有 asyncData 方法的特性。
  • 布局目录 layouts 用于组织应用的布局组件。若无额外配置,该目录不能被重命名。(关于布局的更多信息
  • middleware 目录用于存放应用的中间件。(关于中间件的更多信息
  • 页面目录 pages 用于组织应用的路由及视图。Nuxt.js 框架读取该目录下所有的 .vue 文件并自动生成对应的路由配置。若无额外配置,该目录不能被重命名。关于页面的更多信息
  • 插件目录 plugins 用于组织那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件。(关于插件的更多信息
  • 当你配置了服务框架选项就会有server目录,连接服务器及存储api文件。
  • 静态文件目录 static 用于存放应用的静态文件,此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。 服务器启动的时候,该目录下的文件会映射至应用的根路径 / 下。若无额外配置,该目录不能被重命名。关于静态文件的更多信息
  • store 目录用于组织应用的 Vuex 状态树 文件。 Nuxt.js 框架集成了 Vuex 状态树 的相关功能配置,在 store 目录下创建一个 index.js 文件可激活这些配置。若无额外配置,该目录不能被重命名。关于 store 的更多信息
  • nuxt.config.js 文件用于组织Nuxt.js 应用的个性化配置,以便覆盖默认配置。若无额外配置,该文件不能被重命名。关于 nuxt.config.js 的更多信息

Babel

如果我们想要在serve下的js文件中使用import、export等其它语法糖,我们需要安装配置babel 首先安装babel-preset-env插件

npm i babel-preset-env

在server目录下创建.balcelrc文件填入以下内容:

// 将来babel-loader运行的时候,会检查这个配置文件,并读取相关的语法和插件配置
{
    "presets": ["env"]
}

最后我们需要在package.json的scripts指令的dev及start的末尾加上--exec babel-node

nuxt模板的创建及使用(koa、sass)
这样就可以使用import等其他的语法糖了

关于更多 babel的用法

sass

安装指令

npm i sass-loader node sass

当你安装依赖完成后要留意它是否出现warn 或者error,并尝试去解决它,这也是作为一个开发者必备技能。
像当我安装完上面的组件出现了下面的警报
nuxt模板的创建及使用(koa、sass)
根据它的提示,我们只需要对应安装好缺失的依赖即可。

npm install sass@^1.3.0 --save-dev
npm install fibers@3.1.0 --save-dev

而如果你用的是windows系统报下面的警报则不需要管它,这是因为该依赖只是在mac系统上使用的,而模板的打包里面,也包括了该依赖,在windows上是不需要的,所以你也不用去管它。
nuxt模板的创建及使用(koa、sass)
安装好后便可以开始你的开发之路了。

资源汇总

关于 assets 目录的更多信息
关于布局的更多信息
关于中间件的更多信息
关于页面的更多信息
关于插件的更多信息
关于静态文件的更多信息
关于 store 的更多信息
关于 nuxt.config.js 的更多信息
关于更多 babel的用法
create-nuxt-app模板Github
nuxt中文官网
基于koa的mongoose(mongodb、robo 3T、mongoose)、redis使用

如果大家在开发中遇到什么问题,尽量去官网的issue中搜索解决,很多的已知问题在官网上都有解答的,养成看官网文档的习惯是非常必要的,希望大家不单单只学会这门技术,而是懂得如何去学习一门新技术。

本文地址:https://blog.csdn.net/qq_36587420/article/details/107529766