- 开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第1天 点击查看活动详情
前言
最近接到改版公司官网的需求，由于前任用的nuxt2，而团队大部分项目已经开始使用vue3或者正在由vue2升vue3的路上，正好nuxt3支持vue3，就自然而然地选用了nuxt3。为什么是从0到1搭建而不是版本升级？那是因为需求新版本跟旧版本关联不大。月夏也是第一次接触nuxt，因此今天这篇文章主要是为了记录一下如何从0开始构建nuxt3应用~
收获清单
阅读本文，您将获得以下技能~
- nuxt3应用场景
- 从0到1搭建nuxt3项目
- 一些坑及解决方法
nuxt3简介及应用
详细的简介还是得看nuxt3官网传送门，也有中文文档，可以配合着看，关键知道nuxt3支持vue3+typescript，主要应用是ssr方面的就差不多了，下图是ssr的做法~
项目搭建
运行环境
根据官网要求node.js要在16.11以上，开始构建前记得检查一下自己的环境~
创建项目
npx nuxi init nuxt3-app
如果你跟我一样初始化项目时也出现如下图错误【主要是代理错误】，可以尝试使用支持https代理的degit下载代码,亲测有效！
解决初始化错误
npm install -g degit
degit 'nuxt/starter#v3' nuxt3-app
安装依赖
新建.npmrc文件，在里面写入如下内容：
shamefully-hoist = true
通过pnpm安装依赖
pnpm install
或者这样开启幽灵依赖
pnpm install --shamefully-hoist
pnpm run dev启动项目，出现如下界面就ok了~
提升效率
主要是通过vscode的代码片段，偶然一次摸鱼看到这个，用了之后能增加不少摸鱼时间，以下是步骤图解~
在生成代码片段网站输入自己的代码片段
复制代码
总结及展望
鉴于篇幅不易过长，今天的文章先到这里，主要是实践了nuxt3的创建项目，以及使用代码片段为提效做准备，接下来的计划是会记录插件的配置、国际化、动画等的引入应用~
