[Nuxt3系列教程] Vue Web项目改造Nuxt3项目之项目初始化创建

发布日期 2023-11-22 23:18:42 已于 2023-11-22 23:58:54 修改

本文将讲解如何将Vue Web项目改造为Nuxt3项目,但由于内容过多,本文只讲解如何初始化创建Nuxt3项目的过程。


Nuxt官方网址:https://nuxt.com

Nuxt中文网址:https://nuxt.com.cn


1、node17是Nuxt3所能支持的最低要求node版本,切换node版本至17:

cd ~

若没有安装node版本管理工具请先安装:

npm install -g n

切换node版本到17:

sudo n 17

查看当前node版本:

node -v

输出结果:


2、升级node-sass版本

如果原来的Vue项目中有用到node-sass依赖,比如非web项目的admin项目,则需要升级node-sass版本到7.0.3,因为这个版本是能支持node17的最高版本,node与node-sass版本对应关系详见:

https://github.com/sass/node-sass/releases

cd frontend/project-name
npm uninstall node-sass
npm i node-sass@7.0.3 -S

以上project-name对应你自己的项目目录名称。


3、切换了node17后,如果仍想正常启动的原来的Vue Web项目,则需要配置node参数选项:

cd frontend/web-project-name
export NODE_OPTIONS=--openssl-legacy-provider

以上web-project-name对应原来的Vue Web项目名称。


4、创建web-nuxt项目

#初始化创建并启动项目
cd frontend
npx nuxi@latest init web-nuxt
cd web-nuxt
npm install
npm run dev

npx是用于初始化创建nuxt项目的工具。


至此,一个Nuxt3的默认项目工程就创建好了,控制台会打印访问地址和端口信息,在浏览器访问即可!

年末感恩回馈