nuxt3入门（超简易版）

本文主要介绍了nuxt3的快速入门使用（简易版），旨在帮助有一定vue3基础的开发人员快速认识并上手支持vue3的nuxt3

2022新发布的nuxt3支持vue3，暂时没找到中午官网，官网网站：nuxt.com/

nuxt2中午官网参考：www.nuxtjs.cn/ （应为仅支持到vue2）

什么是nuxt，为什么需要nuxt

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

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

服务器渲染（ssr），在服务器端将对Vue页面进行渲染生成html文件，将html页面传递给浏览器

作用：

在SEO上：纯vue写的项目（SPA）的HTML只有一个无实际内容的HTML和一个app.js，而SSR生成的HTML是有内容的，这让搜索引擎能够索引到页面内容，利于网站的排名

大大加快了首屏加载时间：传统的SPA应用是将bundle.js从服务器获取，然后在客户端解析并挂载到dom。而SSR直接将HTML字符串传递给浏览器。

前提条件

Node.js - v18.0.0 或更新的版本
文本编辑器 - 使用Visual Studio Code和这个扩展 Volar Extension
终端 - 运行nuxt的指令

1.安装

npx安装：

npx nuxi@latest init <project-name>

pnpm安装：

pnpm dlx nuxi@latest init <project-name>

网上的解决方法


1. 修改本地网络DNS为114.114.114.114 // 实际无效
2. 在系统hosts文件里添加 raw.githubusercontent.com [该域名ip] // 实际无效

最后改为直接下载了zip

地址：codeload.github.com/nuxt/starte…

2.启动

安装依赖：

npm:npm install

yarn：yarn install

启动： npm:npm run dev -- -o

yarn:yarn dev --open

启动成功：

3.不同于vue原来的路由跳转方式：

Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。要在页面之间使用路由，建议使用<nuxt-link> 标签。

在这个目录下就可以自动生成路由啦

在app.vue中，依然可以使用router-view来作为出口，当然nuxt也给出了自己的路由出口

在nuxt3（新版本）中使用的为<NuxtPage>,nuxt2为<Nuxt>

4.pinia、axios等插件

1.pinia

npm安装pinia：npm install pinia @pinia/nuxt

pinia的使用除了挂载位置稍微改变和vue3普通项目中使用基本没有区别，vue3普通项目中在main.js中使用app.use(pinia)挂载,nuxt中则改为了在nuxt.config.ts中使用modules: ['@pinia/nuxt']挂载

定义store

store/index.ts

import { user } from "./user/index"

const stores = {
    user
}

export default stores

store/user/index.ts

import { defineStore } from 'pinia'
export const user = defineStore("user",()=> {
    const name = ref("yuxiangluo")

    return { name }
})

在组件中使用

效果：

2.aixos

npm安装axios:npm install axios -s

axios基本没有什么变化，这里就不再演示了

3.route和router

Nuxt自带router和route，不用再重复安装。

总结：这些插件的使用总体和普通vue3项目相比区别不大

5.seo优化

设置全局默认的title、meta、keywords、description、content等信息在nuxt.config.ts中提供app.head属性。允许你为整个应用程序定制head。示例如下：

export default defineNuxtConfig({
  app: {
    head: {
      charset: 'utf-16',
      viewport: 'width=500, initial-scale=1',
      title: 'My App',
      meta: [
        // <meta name="description" content="My amazing site">
        { name: 'description', content: 'My amazing site.' }
      ],
      link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
    }
  }
})

5.nuxt流程总结

6.后续应该在另外的文章具体描述

1.Nust路由具体变化

2.Nust视图