- Nodejs >= 20.0.0
- pnpm >= 7.x
1.初始化
npx nuxi init <project-name>
# 安装依赖：
npm i
# 运行项目：
npm run dev
2.安装依赖
二、新建约定目录
1. app(src) 项目目录
- 根目录新建文件夹
app或src - 把
app.vue文件移入到src目录下 - 修改配置文件
nuxt.config.ts：
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
srcDir: 'src/',
})
2. pages 页面路由
- 新建
src/pages目录： - 新建
src/pages/index.vue首页 - 修改
src/app.vue入口
<template>
<div>
<!-- 路由出口 -->
<NuxtPage></NuxtPage>
</div>
</template>
3. 新增 layouts 模板
放入 如header，footer等 通用模板
- 新建
src/layouts目录 - 新建
src/layouts/default.vue默认模板文件
<template>
<div>
<h1>这里是默认模板，可以添加在所有页面，也可单独添加</h1>
<slot />
</div>
</template>
- 在全局页面中配置：
src/app.vue（也就是每个页面中都会有该模板）
<template>
<div>
<!-- 路由出口 -->
<NuxtLayout>
<NuxtPage></NuxtPage>
</NuxtLayout>
</div>
</template>
- 自定义模板（类似 header、footer）
<template>
<header class="header">
<h1>默认模板 header</h1>
</header>
</template>
- 使用自定义模板
<template>
<div>
<NuxtLayout name="header"/>
<NuxtLink to="/list">进入列表页</NuxtLink>
</div>
</template>
4. 配置组件 components
- 新建
src/components目录** - 新建
src/components/[classname].vue文件
nuxt可以自己导入
components嵌套目录组件使用
components/
--| list/
----| detail/
------| Button.vue
那么我们可以直接在其它地方使用：
<ListDetailButton />
5. 配置静态资源 assets 和 全局css
css 的集成有多种方式，有使用原生 css 的，也有使用 less 和 scss 的，也有使用 stylus 的；
下面主要以 scss 为例；
1. 安装：
pnpm install sass --save-dev
2. 新建 src/assets/styles 目录添加默认 default.scss
$bgColor: rgb(125, 159, 172);
$theme: red;
3. 在 nuxt.config.ts 中添加 scss 的配置
export default defineNuxtConfig({
vite: {
css: {
preprocessorOptions: {
scss: {
additionalData: '@import "@/assets/styles/default.scss";'
}
}
}
}
})
4. 使用
<style lang="scss">
body {
background-color: $bgColor;
color: $theme;
}
</style>
6. 配置插件 plugins
Nuxt 会自动读取 plugins 目录中的文件并在创建 Vue 应用程序时加载它们；
你可以在文件名中使用 .server 或 .client 后缀来让插件在 服务器端 或 客户端 加载插件；
1. 新建 src/plugins 目录
2. 以 vue 指令为例：新建 src/plugins/directives.ts 文件
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.directive('focus', {
mounted (el) {
el.focus()
},
getSSRProps (binding, vnode) {
// you can provide SSR-specific props here
return {}
}
})
})
7. 用 composables 灵活配置 hooks
可参考[[useState - Nuxt3中的全局状态管理]]
1. 新建 src/composables 目录
2. 新建 src/composables/useFoo.ts 文件
export const useFoo = () => {
return useState('foo', () => 'bar')
}
3. 在 src/pages/index.vue 中使用
<template>
<div>
<h1>欢迎来到第一个页面</h1>
<NuxtLink to="/list">进入列表页</NuxtLink>
</div>
</template>
<script setup>
const foo = useFoo()
</script>
8. server 目录下的api路由
9. middleware 路由中间件
10. nuxt.config.ts 配置
css
你可以定义你想要全局设置的CSS文件/模块/库(包含在每个页面中)。 next将根据扩展名自动猜测文件类型，并使用适当的预处理器。 如果需要使用所需的加载程序，您仍然需要安装它们。
// nuxt.config.js
export default defineNuxtConfig({
css: [
// Load a Node.js module directly (here it's a Sass file).
'bulma',
// CSS file in the project
'~/assets/css/main.css',
// SCSS file in the project
'~/assets/css/main.scss'
]
})
