Nuxt3 项目基础配置超详细 and 项目模板

git clone https://github.com/Seven7v/Nuxt3-vue3-project.git

npx nuxi@latest init may-app // my-app你的项目名称

cd my-app

npm i

npm run dev

 "scripts": {
    "build": "nuxt build", // 生成环境，同构渲染
    "dev": "nuxt dev", // 开发者环境，支持同构渲染
    "generate": "nuxt generate", // 生成静态资源，在output中的public文件夹中
    "preview": "nuxt preview", // build 命令后可以可以启动一个node服务来运行生成的文件
    "postinstall": "nuxt prepare"
  },

|- pages
    |-- home.vue

|- pages
    |-- home
         |-- index.vue

<template>
  <div>
    <NuxtPage></NuxtPage>
  </div>
</template>

|- components
    |-- Header.vue

<template>
  <div>
    <Header/>
    <NuxtPage></NuxtPage>
  </div>
</template>

|- layouts
    |-- default.vue
    |-- notab.vue

<template>
  <div>
    <Header />
    <NuxtPage></NuxtPage>
    <Tabbar />
  </div>
</template>

<template>
  <div>
    <NuxtLayout></NuxtLayout>
  </div>
</template>

<template>
  <div>
    <NuxtLayout name = "notab"></NuxtLayout>
  </div>
</template>

|- composables
    |-- useLang.ts

export const useLang = () => useState("lang",()=>'zh-cn')

 <!-- active-class="active"  给active class 设置样式，可以自动实现选中高亮 -->
 <template>
  <div class="mod-header">
    <div>
        <!-- 基本写法 -->
        <NuxtLink  to="/home" active-class="active">
          Home
        </NuxtLink>
        <!-- 定制元素 -->
        <!-- custom属性代表定制 -->
        <NuxtLink custom v-slot="{isActive, href, navigate } " to="/home" active-class="active">
          <h4 :href="href" @click="navigate" :class="isActive?'active':''">
              Home
          </h4>
        </NuxtLink>
    </div>
  </div>
</template>
<!-- 如果想要使用scss 或者 less 预处理器需要额外安装 -->
 <style lang="scss" scoped>
.active {
  border-bottom: 2px solid #000;
}
</style>

|- pages
    |-- home.vue
    |-- home // 文件夹
          |--hot.vue  

|- pages
    |-- home
         |-- index.vue
         |-- hot.vue // 单独页面 不是组件内容

<NuxtLink  to="/home/hot" >HOT</NuxtLink>

|- pages
    |-- detail
         |-- [id].vue

<script setup lang="ts">
const route = useRoute() // 可以直接使用，不需要导入

console.log(route.params) // route.params 中就是我们传递过来的内容 { id : '9527 '}
</script>

<script setup lang="ts">
const router = useRouter() // 可以直接使用，不需要导入

const handleToDetail = (id: number) => {
  router.push(`/detail/${id}`)
}
</script>

<!-- 对单页面的路由守卫 -->
<script setup lang="ts">
 definePageMeta({
  middleware: (to, from) => {
    if (!localStorage.getItem('token')) {
      return navigateTo('/login') //一定要写return
    }
  }
})
</script>

|- middleware
   |-- auth.ts // 中间件名称自定义

export default defineNuxtRouteMiddleware((to, from) => {
  if (!localStorage.getItem('token')) {
    return navigateTo('/login') //一定要写return
  }
})

<script setup lang="ts">
definePageMeta({
  middleware: 'auth'
})
</script>

|- middleware
   |-- auth.global.ts // 加上global后缀，默认全局中间件，进入所有路由都会通过这里

export default defineNuxtRouteMiddleware((to, from) => {
  const limitList = ['/article', '/home', '/product'] // 配置适配 路由
  if (limitList.includes(to.fullPath)) {
    if (!localStorage.getItem('token')) { // ！！！！这里有个大坑
      return navigateTo('/login') //一定要写return
    }
  }
})

if (process.server) {
      // 从服务端的cookie中获取token
    } else {
      // js 使用从浏览器的cookie中获取token
    }

export default defineNuxtRouteMiddleware((to, from) => {
  const limitList = ['/article', '/home', '/product']
  if (limitList.includes(to.fullPath)) {
    const token = useCookie('token')
    if (!token.value) {
      return navigateTo('/login') //一定要写return
    }
  }
})

|- middleware
   |-- redirect.global.ts // 中间件名称自定义

export default defineNuxtRouteMiddleware((to, from) => {
  if (to.fullPath === '/') {
    return navigateTo('/home')
  }
})