Nuxt3入门到精通教程

2022-06-02 05:06:40
2024-12-01 19:27:58

什么是 Nuxt?

Vue的SSR框架,服务端渲染,有利于SEO优化和提高浏览器渲染速度!

使用脚手架创建nuxt-app项目

language 复制代码
pnpm dlx nuxi init nuxt-app

配置.npmrc文件

language 复制代码
shamefully-hoist=true

进入目录,安装依赖,启动项目

language 复制代码
code nuxt-app
pnpm i
pnpm run dev 

目录结构

  • .nuxt // 自动生成的目录,用于展示结果
  • node_modules // 项目依赖包存放目录
  • .gitignore // Git的配置目录,比如一些文件不用Git管理就可以在这个文件中配置
  • pages // 开发的页面目录
  • components // 组件目录
  • assets // 静态资源目录
  • layouts // 项目布局目录
  • app.vue // 项目入口文件,你可以在这里配置路由的出口
  • nuxt.config.ts // nuxt项目的配置文件 ,这个里边可以配置Nuxt项目的方法面面
  • package-lock.json // 锁定安装时包的版本,以保证其他人在 npm install时和你保持一致
  • package.json // 包的配置文件和项目的启动调式命令配置
  • README.md // 项目的说明文件
  • tsconfig.json // TypeScript的配置文件

增加pwa功能

官方教程

language 复制代码
https://github.com/kevinmarrec/nuxt-pwa-module

安装

shell 复制代码
npm install -D @kevinmarrec/nuxt-pwa

nuxt.config.ts配置

js 复制代码
export default defineNuxtConfig({
  modules: [
    '@kevinmarrec/nuxt-pwa'
  ],
//开发环境也生成pwa
  pwa: {
    workbox: {
      enabled: true
    }
  }
})

根目录public目录中添加网站图标文件(不添加,无法生成)

language 复制代码
/public/icon.png

常见问题

使用https,ws链接拦截,不断刷新页面

通过反向代理解决

language 复制代码
    location /_nuxt/hmr/ {
        proxy_pass http://localhost:24678;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }

pnpm安装依赖,会缺依赖

加参数

language 复制代码
pnpm i --shamefully-hoist

出现错误“write EPIPE”

language 复制代码
npx nuxi upgrade --force
目录

运营需要亿点资金维持,您的支持,是小白龙创作的动力!!!

昵称
留言
赞赏金额
暂无评论,欢迎留下你的评论