Nuxt3第一篇【安装与基本使用】

Nuxt3【入门篇】

使用它你会觉得很自动化,首先贴上目录结构图

• 在空闲时间内不学习是不行的，被逼无奈，学无止境，在有限的时间跟我一起学习更多知识吧！别人都在前进，而你还在原地踏步，冲😊
• 中文文档:----->Nuxt3中文文档

安装

方式一(手动创建)

1.创建package.json并编写代码

{
	"scripts": {
		"dev": "nuxi dev",
		"build": "nuxi build",
		"start": "nuxi build && node .output/server/index.mjs"
	},
	"devDependencies": {
		"nuxt": "^3.0.0-rc.3"
	}
}

2.根目录下创建app.vue

<template>
	<div>Hello, World!!</div>
</template>

3.安装依赖

npm i

• 如果是ts项目还需手动配置

3.1 根目录创建tsconfig.json编写代码

{
	"extends": "./.nuxt/tsconfig.json"
}

3.2 根目录下创建 nuxt.config.ts编写代码

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
	typescript: {
		shim: false
	}
})

方式二(参照官网教程创建)

• 保证node版本高于v14.16.0

1.执行命令创建项目

npx nuxi init 项目名称

2.安装依赖

npm i

通过以上两种方法项目就创建完成了

启动项目

以下两个命令都可以启动

npm run dev
npm run start

打包

npm run build

启动后目录会自动生成.nuxt .output文件夹

默认端口是3000，打开浏览器输入localhost:3000即可访问项目首页
这样你就初步成功创建nuxt3项目了