/nuxt-blog-start

Preparing to rewrite my blog using Nuxt

Primary LanguageVue

Nuxt 3 Minimal Starter

Look at the Nuxt 3 documentation to learn more.

Setup

Make sure to install the dependencies:

# yarn
yarn install

# npm
npm install

# pnpm
pnpm install

Development Server

Start the development server on http://localhost:3000

npm run dev

Production

Build the application for production:

npm run build

Locally preview production build:

npm run preview

Check out the deployment documentation for more information.

Development

Directory Structure

  • pages
  • components
  • layouts
  • assets

Pages

nuxt中访问页面的入口,每个页面都是一个 vue 文件,文件名就是页面的路径,比如 pages/index.vue 就是访问 / 路径的页面,pages/about.vue 就是访问 /about 路径的页面。 pages中的vue文件文件名应 使用小写

pages/article.vue/[id].vue 相当于访问路径/pages/article.vue/{id},其中ID为自定义参数

在[id].vue可以 通过以下代码获取到这个id

const router = useRouter()
const {id1} = router.currentRoute.value.params
// or
const route = useRoute()
const {id2} = route.params

嵌套路由

|--pages
|----parent/
|------child.vue
|----parent.vue

父路由访问路径为/pages/parent 子路由为/pages/parent/child

在parent.vue添加<NuxtPage></NuxtPage>作为子路由的出口 例如:

<template>
  <div>
    <h1>Parent</h1>
    <NuxtPage></NuxtPage>
  </div>

layouts

  • 创建一个layouts
<template>
	<div class="flex flex-col w-full h-full bg-gray-100 shadow-md">
		<slot name="header"/>
		<h4>layouts/default</h4>
		<slot name="main"/>
		<slot name="footer"/>
	</div>
</template>
  • 在pages中使用
<template>
	<div>
		<NuxtLayout name="default">
			<template #header>
				<Navs/>
			</template>
			<template #main>
				<NuxtPage/>
			</template>
			<template #footer>
				<Footer/>
			</template>
		</NuxtLayout>
	</div>
</template>

components

  • 创建一个组件:在components中创建一个vue文件例如:components/Navs.vue,组件名应使用大写

  • 在其他组件中引用这个组件:

<NuxtLayout name="default">
    <Navs/>
    <NuxtPage class="h-[70vh] m-4 p-4 bg-gray-200"/>
    <Footer/>
</NuxtLayout>
  • 使用目录中的组件:如组件在components/article/Title.vue中,可以在其他组件中使用<ArticleTitle></ArticleTitle>来引用,目录名应小写

composables

composables是nuxt3中的一个新概念,用于存放一些公共的逻辑,例如:获取数据,验证数据等 如需要引用composables中的方法,直接在需要的地方写方法名即可

composables中只有顶层的方法才能被直接引入,如果需要引入子目录中的方法,需要在子目录中创建一个index.ts文件,然后在index.ts中导出方法

使用API