first commit

.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

README.md

@@ -0,0 +1,75 @@
+# Nuxt Minimal Starter
+
+Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

app.vue

@@ -0,0 +1,6 @@
+<template>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+</template>
+

assets/css/tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

components/HelloWorld.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div>
+    Component: HelloWorld
+  </div>
+</template>
+
+<style scoped></style>

docs/01-关于Nuxt的初始化.md

@@ -0,0 +1,26 @@
+# 关于Nuxt的初始化
+
+- 命令
+
+```bash
+npm init nuxt
+
+npm create nuxt <项目名称>
+```
+
+- 创建目录 `nuxi add`
+
+```bash
+npx nuxi add <TEMPLATE> <NAME> [--cwd=<directory>] [--logLevel=<silent|info|verbose>] [--force]
+# <TEMPLATE> 指定要生成的模板 <api | plugin | component | composable | middleware | layout | page | layer>
+# <NAME> 指定生成的文件的名称
+# --cwd=<directory> 指定工作目录 默认为:.
+# --logLevel=<silent|info|verbose> 指定构建时日志级别
+# --force 强制覆盖文件 (如果已存在) 默认为:false
+```
+
+- npm script运行到浏览器
+
+```bash
+"dev": "nuxt dev --open --host localhost"
+```

docs/02-使用tailwindcss.md

@@ -0,0 +1,80 @@
+## 安装 Tailwind CSS 及其依赖
+
+```bash
+npm install -D tailwindcss postcss autoprefixer @nuxtjs/tailwindcss
+```
+
+## 初始化 Tailwind 配置文件
+
+```bash
+npx tailwindcss init
+```
+
+## 配置 `tailwind.config.js`
+
+```js
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./components/**/*.{js,vue,ts}",
+    "./layouts/**/*.vue",
+    "./pages/**/*.vue",
+    "./plugins/**/*.{js,ts}",
+    "./app.vue",
+    "./error.vue",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+```
+
+## 创建 Tailwind CSS 入口文件
+
+在 assets/css/tailwind.css 文件中添加：
+
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+## 更新 `nuxt.config.ts/nuxt.config.js`
+
+```js
+export default defineNuxtConfig({
+  modules: ['@nuxtjs/tailwindcss']
+})
+```
+
+## 添加自定义样式
+
+在 tailwind.config.js 中扩展主题：
+
+```js
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        'primary': '#1DA1F2',
+        'secondary': '#14171A',
+      },
+    },
+  },
+}
+```
+
+## 使用 @apply 指令（在 CSS 文件中）
+
+```css
+.btn {
+  @apply font-bold py-2 px-4 rounded;
+}
+.btn-blue {
+  @apply bg-blue-500 text-white;
+}
+.btn-blue:hover {
+  @apply bg-blue-700;
+}
+```

eslint.config.mjs

@@ -0,0 +1,6 @@
+// @ts-check
+import withNuxt from './.nuxt/eslint.config.mjs'
+
+export default withNuxt(
+  // Your custom configs here
+)

layouts/default.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div>
+    <slot />
+  </div>
+</template>
+
+<style scoped></style>

layouts/home.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+<slot/>
+</template>
+
+<style scoped>
+
+</style>

layouts/start.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <slot />
+</template>
+
+<style scoped>
+
+</style>

nuxt.config.ts

@@ -0,0 +1,63 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+// 每次热更新都会执行defineNuxtConfig
+import {exec} from "node:child_process";
+import open, {apps} from "open";
+import type {AddressInfo} from "node:net";
+
+
+export default defineNuxtConfig({
+  compatibilityDate: '2024-11-01',
+  devtools: { enabled: true },
+  modules: ['@nuxt/eslint', '@nuxtjs/tailwindcss'],
+  devServer: {
+    host: '0.0.0.0',
+  },
+  hooks: {
+    'listen': (server) => {
+      startBroswer(server.address())
+    },
+  }
+})
+
+// 首次启动浏览器
+async function startBroswer(address: AddressInfo | string | null) {
+  if(!process.env.START){
+    if (address && typeof address !== 'string') {
+      console.log('Hooks: Listen')
+      const host = address.address === '::' ? 'localhost' : address.address
+      const port = address.port
+      const url = `http://${host}:${port}`;
+      let resd;
+      try {
+        resd = await open(url, {
+          app: {
+            name: apps.chrome,
+            arguments: [
+              '--remote-debugging-port=9222',
+              '--auto-open-devtools-for-tabs'
+            ]
+          }
+        });
+      } catch (e) {
+        console.error((e as Error).message)
+        switch (process.platform) {
+          case 'win32':
+            console.log('Windows 系统');
+            exec(`start ${url}`)
+            break;
+          case 'darwin':
+            console.log('macOS 系统');
+            exec(`open ${url}`)
+            break;
+          case 'linux':
+            console.log('Linux 系统');
+            exec(`xdg-open ${url}`)
+            break;
+          default:
+            console.log('其他系统:', process.platform);
+        }
+      }
+      process.env.START = String(true)
+    }
+  }
+}

package.json

@@ -0,0 +1,27 @@
+{
+  "name": "nuxt-app",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "dependencies": {
+    "@nuxt/eslint": "^1.3.0",
+    "eslint": "^9.25.0",
+    "nuxt": "^3.16.2",
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0"
+  },
+  "devDependencies": {
+    "@nuxtjs/tailwindcss": "^6.13.2",
+    "autoprefixer": "^10.4.21",
+    "open": "^10.1.1",
+    "postcss": "^8.5.3",
+    "sass": "^1.86.3",
+    "tailwindcss": "^3.4.17"
+  }
+}

pages/home/index.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+definePageMeta({
+  layout: 'home',
+})
+</script>
+
+<template>
+  <div>HOME</div>
+</template>
+
+<style scoped>
+
+</style>

pages/index.vue

@@ -0,0 +1,189 @@
+<script setup lang="ts">
+
+definePageMeta({
+  // 使用自定义模板
+  layout: 'start',
+})
+// 离开页面的时机
+const leaveTime = ref(false)
+// 离开前路由拦截
+onBeforeRouteLeave((to, from, next) => {
+  leaveTime.value = true
+  setTimeout(() => {
+    next(true)
+  }, 1100)
+})
+</script>
+
+<template>
+  <div class="relative w-screen h-screen overflow-hidden flex items-center justify-center">
+    <div class="myFace top-0" :class="leaveTime ? 'myFaceLeave' : ''"></div>
+    <div class="myFace bottom-0" :class="leaveTime ? 'myFaceLeave' : ''"></div>
+    <div class="myContainer text-center font-bold">
+      <div class="content">
+        <span>STAR</span><span>WAIT<div class="myMask"></div></span>
+      </div>
+      <div class="entry" :class="leaveTime ? 'entryGo' : ''">
+        <div class="cursor-pointer">
+          <nuxt-link to="/home">Entry</nuxt-link>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.myFace {
+  position: absolute;
+  width: 100%;
+  animation: HalfScreen 1s ease-in-out forwards;
+  background: #000;
+  left: 0;
+}
+.myFaceLeave{
+  animation: LeaveHalfScreen 1s ease-in-out forwards !important;
+}
+
+.myContainer {
+  position: relative;
+  width: 360px;
+  color: #000;
+  font-size: 32px;
+  letter-spacing: 4px;
+
+  & > div.content > span {
+    position: relative;
+    display: inline-block;
+    margin: 0 10px;
+    padding: 0 10px;
+    animation: ChangeColor 1s ease-in-out 0.65s forwards;
+
+    & > div.myMask {
+      position: absolute;
+      overflow: hidden;
+      box-sizing: border-box;
+      width: 0;
+      height: 100%;
+      top: 0;
+      left: 0;
+      font-size: inherit;
+      color: #000;
+      background: #fefefe;
+      animation: ChangeWidth 1s ease-in-out 1.2s forwards;
+
+      &:last-child::after {
+        content: 'WAIT';
+        position: absolute;
+        overflow: hidden;
+        box-sizing: border-box;
+        width: 100%;
+        height: 100%;
+        padding: 0 10px;
+        text-align: center;
+        left: 0;
+        font-size: inherit;
+        background: transparent;
+        color: #000;
+      }
+    }
+  }
+
+  & > div.entry {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: -4em;
+    overflow: hidden;
+    border-radius: 8px;
+    font-size: 18px;
+    width: 6em;
+    height: 2.3em;
+    margin: 0 auto;
+    opacity: 0;
+    animation: ShowEntry 1s ease-in-out 1s forwards, gradient 3s ease 1s infinite;
+    background: linear-gradient(45deg, #00dc82, #36e4da, #ff7e5f);
+    background-size: 600% 600%; /* 设置背景大小 */
+    &.entryGo{
+      animation: HideEntry 300ms ease-in-out forwards !important;
+    }
+    & > div {
+      position: relative;
+      height: 100%;
+      border-radius: 8px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      backdrop-filter: blur(20px);
+      border: 3px solid #fefefe88;
+    }
+  }
+}
+
+@keyframes gradient {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+@keyframes ShowEntry {
+  0% {
+    opacity: 0;
+    bottom: -400em;
+  }
+  1% {
+    bottom: -4em;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes HideEntry {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes ChangeWidth {
+  from {
+    width: 0;
+  }
+  to {
+    width: 100%;
+  }
+}
+
+@keyframes ChangeColor {
+  from {
+    color: #000;
+  }
+  to {
+    color: #fff;
+  }
+}
+
+@keyframes HalfScreen {
+  from {
+    height: 0;
+  }
+  to {
+    height: 50%;
+  }
+}
+@keyframes LeaveHalfScreen {
+  from {
+    height: 50%;
+  }
+  to {
+    height: 0;
+  }
+}
+</style>

public/robots.txt

@@ -0,0 +1,2 @@
+User-Agent: *
+Disallow:

server/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../.nuxt/tsconfig.server.json"
+}

tailwind.config.js

@@ -0,0 +1,16 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./components/**/*.{js,vue,ts}",
+    "./layouts/**/*.vue",
+    "./pages/**/*.vue",
+    "./plugins/**/*.{js,ts}",
+    "./app.vue",
+    "./error.vue",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+

tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}