您的位置: 首页  >  文章  >  Nuxt.js 学习之路

Nuxt.js 学习之路

分类: 文章 • 2023-11-29 17:43:16

诞生

最主要的原因时使用vue-cli搭建的SPA（单页应用）不利于搜索引擎的SEO操作.，但是随着技术的普及，很多人想用Vue开发多页应用，并在SSR（服务器端渲染）。Nuxt.js框架出现，简化了SSR的开发难度。还可以直接用命令把我们制作的vue项目生成为静态html。

一 Nuxt.js介绍

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

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

  • 优点：

  • 基于 Vue.js

  • 自动代码分层

  • 服务端渲染

  • 强大的路由功能，支持异步数据

  • 静态文件服务

  • ES6/ES7 语法支持

  • 打包和压缩 JS 和 CSS

  • HTML头部标签管理

  • 本地开发支持热加载

  • 集成ESLint

  • 支持各种样式预处理器： SASS、LESS、 Stylus等等

二 Nuxt.js环境搭建

首先，本机需要有node环境，这边不再阐述（均在命令行进行）。

1.安装vue-cli脚手架

npm install vue-cli -g

查看是否安装成功

vue -V

2.首先创建项目存放位置，即项目名称（盘符自选）

mkdir appName

3.进入项目目录，初始化Nuxt.js项目

cd appName

vue init nuxt/starter

会询问你项目的名称、作者之类的信息，自行填写。

4.安装依赖包

npm install

5.启动服务

npm run dev

三 目录

Nuxt.js 学习之路

|-- .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-lock.json                // npm自动生成，用于帮助package的统一性设置的，yarn也有相同的操作
|-- package.json                     // npm包管理配置文件

四 常修改配置项

1.配置IP和端口号

修改项目根目录package.json文件（如下图）
Nuxt.js 学习之路
2.配置全局css(公共样式)

在目录/assets下新建css文件夹、在css文件夹下新建reset.css文件，写入修改根目录下的nuxt.config.js文件（如图）：
Nuxt.js 学习之路
更多配置 点击进官网

dev 该配置项用于配置 Nuxt.js 应用是开发还是生产模式。
env 该配置项用于定义应用客户端和服务端的环境变量。
generate 该配置项用于定义每个动态路由的参数，Nuxt.js 依据这些路由配置生成对应目录结构的静态文件。
head 该配置项用于配置应用默认的meta标签。
loading 该配置项用于个性化定制 Nuxt.js 使用的加载组件。
modules 该配置项允许您将Nuxt模块添加到项目中。
modulesDir 该配置项允许您定义Nuxt.js应用程序的node_modules文件夹。
plugins 该配置项用于配置那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件。
rootDir 该配置项用于配置 Nuxt.js 应用的根目录。
router 该配置项可用于覆盖 Nuxt.js 默认的 vue-router 配置。
server 此选项允许您配置Nuxt.js应用程序的服务器实例变量。
srcDir 该配置项用于配置应用的源码目录路径。
transition 该配置项用于个性化配置应用过渡效果属性的默认值。

…待续

相关推荐