chore: import json data and display

src/components.d.ts

@@ -5,6 +5,7 @@
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     BaseFooter: typeof import('./components/BaseFooter.vue')['default']
+    ChooseFood: typeof import('./components/ChooseFood.vue')['default']
     Counter: typeof import('./components/Counter.vue')['default']
     Menu: typeof import('./components/Menu.vue')['default']
     README: typeof import('./components/README.md')['default']

src/components/ChooseFood.vue

@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+import recipeData from '~/data/recipe.json'
+import type { Recipe } from '~/types'
+const recipe = ref(recipeData as Recipe)
+</script>
+
+<template>
+  <div>
+    <span v-for="item, i in recipe" :key="i" class="tag">{{ item.name }}</span>
+  </div>
+</template>

src/data/recipe.csv

@@ -0,0 +1,3 @@
+名称,食材,链接,标签/描述,方法,工具
+干锅土豆片,土豆,https://www.bilibili.com/video/BV1ZZ4y1A7HK,下饭,炒,锅
+罗宋汤,土豆、西红柿、洋葱,https://www.bilibili.com/video/BV1gP4y1T7Z7,简易版,煮,锅

src/main.ts

@@ -5,6 +5,8 @@ import App from './App.vue'
 
 import '@unocss/reset/tailwind.css'
 import './styles/main.css'
+import './styles/css-vars.scss'
+import './styles/index.scss'
 import 'uno.css'
 
 const routes = setupLayouts(generatedRoutes)

src/pages/index.vue

@@ -6,5 +6,8 @@
     <p m="2">
       好的，今天我们来做菜！
     </p>
+    <p>
+      <ChooseFood />
+    </p>
   </div>
 </template>

src/styles/css-vars.scss

@@ -0,0 +1,12 @@
+:root {
+  --c-primary: #5fc178;
+  --c-text: #333;
+
+  --c-bg: #fff;
+}
+
+.dark {
+  --c-text: #fafafa;
+
+  --c-bg: #121212;
+}

src/styles/index.scss

@@ -0,0 +1,14 @@
+html {
+  color: var(--c-text);
+  background-color: var(--c-bg);
+}
+
+a {
+  color: var(--c-text);
+}
+
+.tag {
+  margin: 4px;
+  padding: 2px 4px;
+  border: 1px solid var(--c-text);
+}