init

.gitignore

@@ -0,0 +1,5 @@
+node_modules
+*.log
+.nuxt
+nuxt.d.ts
+.output

.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/nuxt3-app.iml" filepath="$PROJECT_DIR$/.idea/nuxt3-app.iml" />
+    </modules>
+  </component>
+</project>

.idea/nuxt3-app.iml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>

.idea/workspace.xml

@@ -0,0 +1,64 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="AutoImportSettings">
+    <option name="autoReloadType" value="SELECTIVE" />
+  </component>
+  <component name="ChangeListManager">
+    <list default="true" id="83558921-0a42-4f39-ab1d-d218d98a0f1e" name="变更" comment="" />
+    <option name="SHOW_DIALOG" value="false" />
+    <option name="HIGHLIGHT_CONFLICTS" value="true" />
+    <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
+    <option name="LAST_RESOLUTION" value="IGNORE" />
+  </component>
+  <component name="FileTemplateManagerImpl">
+    <option name="RECENT_TEMPLATES">
+      <list>
+        <option value="TypeScript File" />
+        <option value="JavaScript File" />
+        <option value="Vue Single File Component" />
+      </list>
+    </option>
+  </component>
+  <component name="MarkdownSettingsMigration">
+    <option name="stateVersion" value="1" />
+  </component>
+  <component name="ProjectId" id="21G1XcHf3PStWue0CjcAKg9di9f" />
+  <component name="ProjectViewState">
+    <option name="hideEmptyMiddlePackages" value="true" />
+    <option name="showLibraryContents" value="true" />
+  </component>
+  <component name="PropertiesComponent">
+    <property name="RunOnceActivity.OpenProjectViewOnStart" value="true" />
+    <property name="RunOnceActivity.ShowReadmeOnStart" value="true" />
+    <property name="last_opened_file_path" value="$PROJECT_DIR$" />
+    <property name="node.js.detected.package.eslint" value="true" />
+    <property name="node.js.detected.package.tslint" value="true" />
+    <property name="node.js.selected.package.eslint" value="(autodetect)" />
+    <property name="node.js.selected.package.tslint" value="(autodetect)" />
+    <property name="nodejs_package_manager_path" value="yarn" />
+    <property name="ts.external.directory.path" value="C:\Users\Administrator\AppData\Local\JetBrains\Toolbox\apps\WebStorm\ch-1\213.5449.31\plugins\JavaScriptLanguage\jsLanguageServicesImpl\external" />
+    <property name="vue.rearranger.settings.migration" value="true" />
+  </component>
+  <component name="RecentsManager">
+    <key name="MoveFile.RECENT_KEYS">
+      <recent name="D:\Demo\vue3\nuxt3-app" />
+    </key>
+  </component>
+  <component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="应用程序级" UseSingleDictionary="true" transferred="true" />
+  <component name="TaskManager">
+    <task active="true" id="Default" summary="默认任务">
+      <changelist id="83558921-0a42-4f39-ab1d-d218d98a0f1e" name="变更" comment="" />
+      <created>1637552651133</created>
+      <option name="number" value="Default" />
+      <option name="presentableId" value="Default" />
+      <updated>1637552651133</updated>
+      <workItem from="1637552653176" duration="4398000" />
+      <workItem from="1637624185248" duration="3822000" />
+      <workItem from="1637636122018" duration="8074000" />
+    </task>
+    <servers />
+  </component>
+  <component name="TypeScriptGeneratedFilesManager">
+    <option name="version" value="3" />
+  </component>
+</project>

README.md

@@ -0,0 +1,32 @@
+# nuxt3 Demo
+
+## Nuxt 3 Minimal Starter
+
+We recommend to look at the [documentation](https://v3.nuxtjs.org).
+
+### Setup
+
+Make sure to install the dependencies
+
+```bash
+yarn install
+```
+
+### Development
+
+Start the development server on http://localhost:3000
+
+```bash
+yarn dev
+```
+
+### Production
+
+Build the application for production:
+
+```bash
+yarn build
+```
+
+Checkout the [deployment documentation](https://v3.nuxtjs.org/docs/deployment).
+

app.vue

@@ -0,0 +1,39 @@
+<template>
+  <NuxtPage/>
+</template>
+
+<style>
+html, body, #__nuxt {
+  margin: 0;
+  width: 100%;
+  height: 100%;
+}
+.clear:after {
+  content: '';
+  clear: both;
+}
+.float-left {
+  float: left;
+}
+.float-right {
+  float: right;
+}
+.absolute {
+  position: absolute;
+}
+.fixed {
+  position: fixed;
+}
+.relative {
+  position: relative;
+}
+.flex {
+  display: flex;
+}
+.items-center {
+  align-items: center;
+}
+.justify-center {
+  justify-content: center;
+}
+</style>

components/Page/Footer.vue

@@ -0,0 +1,37 @@
+<template>
+  <footer class="page-footer clear">
+    <div class="center">山西农业大学农业科学研究院</div>
+    <div class="right">山西传控电子科技有限公司技术支持 <span style="margin-left: 16rem">400 668 1386</span><span style="margin-left: 16rem">181 3510 0170</span></div>
+  </footer>
+</template>
+
+<script>
+export default {
+  name: "Footer"
+}
+</script>
+
+<style scoped>
+.page-footer {
+  position:relative;
+  width: 100%;
+  height: 34rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.center {
+  font-size: 16rem;
+  color: #fff;
+}
+.right {
+  position: absolute;
+  right: 10rem;
+  height: 34rem;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  font-size: 14rem;
+  color: rgba(255, 255, 255, .3);
+}
+</style>

components/Page/Header.vue

@@ -0,0 +1,22 @@
+<template>
+  <header class="page-header">
+<!--    时间-->
+    <PageTime></PageTime>
+  </header>
+
+
+</template>
+
+<script>
+export default {
+  name: "Header"
+}
+</script>
+
+<style scoped>
+.page-header {
+  height: 115rem;
+  background: url("@/assets/images/top.png") no-repeat center;
+  background-size: 100% 114rem;
+}
+</style>

components/Page/Time.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="time-wrap">
+    <div class="date">{{ date }}</div>
+    <div class="time">{{ time }}</div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import dayjs from '@/utils/time';
+import { weeks } from "@/config/time";
+
+const date = ref('');
+const time = ref('');
+
+setInterval(() =>{
+  const week = weeks[dayjs().day()];
+  date.value = dayjs().format('YYYY年MM月DD日 星期') + week;
+  time.value = dayjs().format('HH:mm:ss');
+}, 1000);
+
+</script>
+
+<style scoped>
+.time-wrap {
+  height: 38rem;
+  padding-left: 15rem;
+  color: #fff;
+  display: flex;
+  align-items: center;
+}
+.date {
+  font-size: 14rem;
+  margin-right: 14rem;
+}
+.time {
+  font-size: 25rem;
+}
+</style>

components/Page/Weather.vue

@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: "Weather"
+}
+</script>
+
+<style scoped>
+
+</style>

config/time.js

@@ -0,0 +1 @@
+export const weeks = ['日', '一', '二', '三', '四', '五', '六'];

layouts/default.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="page">
+    <PageHeader></PageHeader>
+    <slot />
+    <PageFooter></PageFooter>
+  </div>
+</template>
+
+<script setup>
+import { onMounted } from 'vue';
+
+function setRem(html) {
+  const winWidth = html.clientWidth;
+  html.style.fontSize = winWidth / 1920 + 'px';
+}
+
+onMounted(() => {
+  const html = document.documentElement;
+  setRem(html);
+  window.addEventListener('resize', () => {
+    setRem(html);
+  }, false);
+})
+</script>
+
+<style scoped>
+.page {
+  width: 100%;
+  height: 100%;
+  background: url("@/assets/images/bg.png") no-repeat center center;
+  background-size: cover;
+}
+
+
+</style>

nuxt.config.ts

@@ -0,0 +1,14 @@
+import { defineNuxtConfig } from 'nuxt3'
+
+// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
+export default defineNuxtConfig({
+    meta: {
+        meta: [
+            { name: 'viewport', content: 'width=device-width, initial-scale=1' }
+        ],
+        link: [
+            { rel: 'stylesheet', href: 'https://cdn.jsdelivr.net/npm/qweather-icons@1.1.0/font/qweather-icons.css' },
+            { rel: 'stylesheet', href: 'https://cdn.bootcdn.net/ajax/libs/normalize/8.0.1/normalize.min.css' }
+        ],
+    }
+})

package.json

@@ -0,0 +1,14 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "nuxi dev",
+    "build": "nuxi build",
+    "start": "node .output/server/index.mjs"
+  },
+  "devDependencies": {
+    "nuxt3": "latest"
+  },
+  "dependencies": {
+    "dayjs": "^1.10.7"
+  }
+}

pages/index.vue

@@ -0,0 +1,19 @@
+<template>
+hello index
+  {{ data.code }}
+</template>
+
+<script setup>
+const { data } = await useFetch('/api/hello');
+console.log('res: ', data);
+</script>
+
+<script>
+export default {
+  layout: "default"
+}
+</script>
+
+<style scoped>
+
+</style>

server/api/hello.ts

@@ -0,0 +1,8 @@
+// export default (req, res) => 'Hello world';
+
+import type { IncomingMessage, ServerResponse } from 'http';
+
+export default async (req: IncomingMessage, res: ServerResponse) => {
+        return {code: 200,
+                msg: 'ok'}
+}

tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://v3.nuxtjs.org/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}

utils/time.js

@@ -0,0 +1,6 @@
+import dayjs from 'dayjs';
+import('dayjs/esm/locale/zh-cn');
+
+dayjs.locale('zh-cn');
+
+export default dayjs;