init
This commit is contained in:
539943419 committed
commit
2c6a2d8a88
19 files changed
+16652
No files matched your search
+24
@@ -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
|
||||
Vendored
+5
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"cSpell.words": [
|
||||
"unplugin"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
# Nuxt 3 Minimal Starter
|
||||
|
||||
Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
|
||||
|
||||
## Setup
|
||||
|
||||
Make sure to install the 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 run dev
|
||||
|
||||
# yarn
|
||||
yarn dev
|
||||
|
||||
# bun
|
||||
bun run dev
|
||||
```
|
||||
|
||||
## Production
|
||||
|
||||
Build the application for production:
|
||||
|
||||
```bash
|
||||
# npm
|
||||
npm run build
|
||||
|
||||
# pnpm
|
||||
pnpm run build
|
||||
|
||||
# yarn
|
||||
yarn build
|
||||
|
||||
# bun
|
||||
bun run build
|
||||
```
|
||||
|
||||
Locally preview production build:
|
||||
|
||||
```bash
|
||||
# npm
|
||||
npm run preview
|
||||
|
||||
# pnpm
|
||||
pnpm run preview
|
||||
|
||||
# yarn
|
||||
yarn preview
|
||||
|
||||
# bun
|
||||
bun run preview
|
||||
```
|
||||
|
||||
Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
|
||||
@@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<div class="main-warpper">
|
||||
<miao-header></miao-header>
|
||||
<miao-content-warpper>
|
||||
<NuxtPage />
|
||||
</miao-content-warpper>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import miaoHeader from './components/miaoHeader.vue';
|
||||
import miaoContentWarpper from './components/miaoContentWarpper.vue';
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.main-warpper {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
@use '/style/default.scss';
|
||||
</style>
|
||||
@@ -0,0 +1,24 @@
|
||||
<template>
|
||||
<main id="miao-main">
|
||||
<n-scrollbar>
|
||||
<slot></slot>
|
||||
</n-scrollbar>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
#miao-main {
|
||||
position: relative;
|
||||
height: calc(100vh - 60px);
|
||||
max-height: calc(100vh - 60px);
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,156 @@
|
||||
<template>
|
||||
<section id="miao-header-warpper">
|
||||
<header id="miao-header">
|
||||
<div class="miao-header-title">
|
||||
<a href="https://nj.miaospring.top:3001/" target="_blank" title="喵"><span
|
||||
style="color: #15aa87; margin-right: 1px;">杪</span>Blog</a>
|
||||
</div>
|
||||
<div class="header-right-warp">
|
||||
<ul class="miao-header-nav">
|
||||
<li v-for="(item) in navList" :key="item.path"
|
||||
:class="['miao-header-nav-item', isActive(item) ? 'miao-header-nav-item-active' : '']">
|
||||
<NuxtLink :to="item.path">{{
|
||||
item.title }}</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
const route = useRoute()
|
||||
|
||||
type NavItem = {
|
||||
title: string,
|
||||
path: string,
|
||||
otherPath?: string[]
|
||||
}
|
||||
|
||||
|
||||
const navList: NavItem[] = [
|
||||
{
|
||||
title: '首页',
|
||||
path: '/'
|
||||
},
|
||||
{
|
||||
title: '文章',
|
||||
path: '/posts',
|
||||
otherPath: ['/post']
|
||||
},
|
||||
// {
|
||||
// title: '测试',
|
||||
// path: '/test',
|
||||
// otherPath: ['/testRouter']
|
||||
// },
|
||||
]
|
||||
|
||||
const isActive = (navItem: NavItem) => {
|
||||
const currentFirstPath = `/${route.path.split('/')[1]}`
|
||||
if (currentFirstPath === navItem.path) {
|
||||
return true
|
||||
}
|
||||
if (navItem.otherPath && navItem.otherPath.length > 0) {
|
||||
return navItem.otherPath.includes(currentFirstPath)
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// console.log(route)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// @use '/style/miaoStyle.scss';
|
||||
|
||||
|
||||
#miao-header-warpper {
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
user-select: none;
|
||||
|
||||
#miao-header {
|
||||
box-sizing: border-box;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-shadow: 0 5px 20px rgba(0, 0, 0, .03), 0 6px 6px rgba(0, 0, 0, .05);
|
||||
transition: box-shadow .3s linear;
|
||||
padding: 10px 32px;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 5px 20px rgba(0, 0, 0, .08), 0 6px 6px rgba(0, 0, 0, .1);
|
||||
}
|
||||
|
||||
.miao-header-title {
|
||||
font-size: 30px;
|
||||
margin: 0;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
|
||||
&>a {
|
||||
color: #000;
|
||||
// font-weight: 600;
|
||||
letter-spacing: 4px;
|
||||
text-decoration: none;
|
||||
font-family: PT Serif, Serif;
|
||||
}
|
||||
}
|
||||
|
||||
.header-right-warp {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
|
||||
.miao-header-nav {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
&-item {
|
||||
&:not(:first-child) {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
&>a {
|
||||
font-size: 20px;
|
||||
font-family: PT Serif, Serif;
|
||||
text-decoration: none;
|
||||
color: #000;
|
||||
transition: color .15s linear;
|
||||
}
|
||||
}
|
||||
|
||||
&-item-active {
|
||||
&>a {
|
||||
color: #15aa87;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- <style lang="scss">
|
||||
.miao-header-nav {
|
||||
&-item {
|
||||
&>a {
|
||||
.router-link-active {
|
||||
color: #cf1111;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style> -->
|
||||
@@ -0,0 +1,11 @@
|
||||
import { defineStore } from "pinia";
|
||||
|
||||
export const useDefaultStore = defineStore("default", () => {
|
||||
const _return = {};
|
||||
const appendReturn = (obj: { [key: string]: any }) => {
|
||||
Object.assign(_return, obj);
|
||||
};
|
||||
const count = ref(0);
|
||||
appendReturn({ count });
|
||||
return _return;
|
||||
});
|
||||
@@ -0,0 +1,29 @@
|
||||
import AutoImport from "unplugin-auto-import/vite";
|
||||
import { NaiveUiResolver } from "unplugin-vue-components/resolvers";
|
||||
import Components from "unplugin-vue-components/vite";
|
||||
|
||||
// https://nuxt.com/docs/api/configuration/nuxt-config
|
||||
// @ts-ignore
|
||||
export default defineNuxtConfig({
|
||||
devtools: { enabled: true },
|
||||
alias: {
|
||||
"@": "/"
|
||||
},
|
||||
vite: {
|
||||
server: {},
|
||||
plugins: [
|
||||
AutoImport({
|
||||
imports: [
|
||||
{
|
||||
"naive-ui": ["useDialog", "useMessage", "useNotification", "useLoadingBar"]
|
||||
}
|
||||
]
|
||||
}),
|
||||
Components({
|
||||
resolvers: [NaiveUiResolver()]
|
||||
})
|
||||
]
|
||||
},
|
||||
modules: ["nuxtjs-naive-ui", "@pinia/nuxt"],
|
||||
compatibilityDate: "2025-01-12"
|
||||
});
|
||||
Generated
+9259
File diff suppressed because it is too large.
Load diff
@@ -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": {
|
||||
"@pinia/nuxt": "^0.9.0",
|
||||
"naive-ui": "^2.41.0",
|
||||
"node-fetch": "^3.3.2",
|
||||
"nuxt": "^3.10.3",
|
||||
"nuxtjs-naive-ui": "^1.0.2",
|
||||
"pinia": "^2.3.0",
|
||||
"unplugin-auto-import": "^19.0.0",
|
||||
"unplugin-vue-components": "^28.0.0",
|
||||
"vue": "^3.4.21",
|
||||
"vue-router": "^4.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"sass": "^1.83.1"
|
||||
}
|
||||
}
|
||||
+151
@@ -0,0 +1,151 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<div class="title">
|
||||
<span>导航</span>
|
||||
</div>
|
||||
<div class="content-warp">
|
||||
<div v-for="(item) in PageContent" :key="item.subTitle" class="content">
|
||||
<div class="sub-title">
|
||||
<span>{{ item.subTitle }}</span>
|
||||
</div>
|
||||
<div v-for="(cItem) in item.content" :key="cItem.name" class="content-item">
|
||||
<div class="content-item-name">{{ cItem.name }}</div>
|
||||
<div class="content-item-description">{{ cItem.description }}</div>
|
||||
<div class="content-item-link-warp">
|
||||
<div>link:</div>
|
||||
<a v-for="link in cItem.links" :href="link.url" target="_blank">{{ link.name }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
||||
const PageContent = [
|
||||
{
|
||||
subTitle: '个人项目',
|
||||
content: [
|
||||
{
|
||||
name: 'miaoDirectory',
|
||||
description: '有个插件功能的单文件文件托管服务',
|
||||
links: [
|
||||
{
|
||||
name: 'github',
|
||||
url: "https://github.com/Zioywishing/miao-directory",
|
||||
},
|
||||
{
|
||||
name: 'gitea',
|
||||
url: 'https://nj.miaospring.top:3001/539943419/miaoDirectory',
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'miaoShare',
|
||||
description: '多了个加密环节的文件分享平台',
|
||||
links: [
|
||||
{
|
||||
name: "gitea",
|
||||
url: "https://nj.miaospring.top:3001/539943419/miaoShare"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.main {
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 20px 10px;
|
||||
|
||||
.content-warp {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding: 0 15px;
|
||||
|
||||
.content {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 250px));
|
||||
gap: 20px;
|
||||
/* 可选，设置子元素之间的间距 */
|
||||
|
||||
.sub-title {
|
||||
font-size: 20px;
|
||||
margin-bottom: 10px;
|
||||
letter-spacing: 2px;
|
||||
grid-row: 1 / span 1;
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.content-item {
|
||||
border: 1px solid #000;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: baseline;
|
||||
// margin-bottom: 10px;
|
||||
padding: 5px 10px 10px 10px;
|
||||
border-radius: 10px;
|
||||
|
||||
.content-item-name {
|
||||
font-size: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.content-item-description {
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.content-item-link-warp {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 10px;
|
||||
user-select: none;
|
||||
|
||||
&>div {
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
&>a {
|
||||
&:not(:last-child) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
color: #000;
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
text-decoration: none;
|
||||
transition: color .15s linear;
|
||||
|
||||
&:hover {
|
||||
color: #15aa87;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 20px;
|
||||
|
||||
&>span {
|
||||
font-size: 30px;
|
||||
letter-spacing: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<div style="height: 9999px;">
|
||||
this is a long long page
|
||||
<nuxt-link to="/testRouter/1">test</nuxt-link>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,11 @@
|
||||
<template>
|
||||
<div>
|
||||
111
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
Generated
+6806
File diff suppressed because it is too large.
Load diff
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"extends": "../.nuxt/tsconfig.server.json"
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
body,html {
|
||||
padding: 0;
|
||||
margin: 0
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
font-size: 16px;
|
||||
color: #2c3e50;
|
||||
background-color: #fff
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
// https://nuxt.com/docs/guide/concepts/typescript
|
||||
"extends": "./.nuxt/tsconfig.json"
|
||||
}
|
||||
Reference in new issue
Block a user