前端零基础教程(六)：综合实战项目

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

my-project/
├── public/
│   └── index.html
├── src/
│   ├── assets/          # 静态资源
│   │   ├── images/
│   │   └── styles/
│   ├── components/      # 公共组件
│   │   ├── Header.vue
│   │   ├── Footer.vue
│   │   └── Loading.vue
│   ├── views/           # 页面组件
│   │   ├── Home.vue
│   │   ├── Login.vue
│   │   └── Profile.vue
│   ├── router/          # 路由配置
│   │   └── index.js
│   ├── stores/          # 状态管理
│   │   └── user.js
│   ├── api/             # API 接口
│   │   └── index.js
│   ├── utils/           # 工具函数
│   │   └── request.js
│   ├── App.vue
│   └── main.js
├── .eslintrc.js
├── .prettierrc
├── package.json
├── vite.config.js
└── README.md

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

// router/index.js
import { createRouter, createWebHistory } from "vue-router";
import Home from "../views/Home.vue";
import ArticleDetail from "../views/ArticleDetail.vue";
import ArticleEdit from "../views/ArticleEdit.vue";

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/article/:id",
    name: "ArticleDetail",
    component: ArticleDetail,
  },
  {
    path: "/edit/:id?",
    name: "ArticleEdit",
    component: ArticleEdit,
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

// stores/article.js
import { defineStore } from "pinia";
import { ref } from "vue";

export const useArticleStore = defineStore("article", {
  state: () => ({
    articles: [],
    currentArticle: null,
    loading: false,
  }),
  actions: {
    async fetchArticles() {
      this.loading = true;
      try {
        // 模拟 API 调用
        const response = await fetch("/api/articles");
        this.articles = await response.json();
      } catch (error) {
        console.error("获取文章失败:", error);
      } finally {
        this.loading = false;
      }
    },
    async fetchArticle(id) {
      this.loading = true;
      try {
        const response = await fetch(`/api/articles/${id}`);
        this.currentArticle = await response.json();
      } catch (error) {
        console.error("获取文章详情失败:", error);
      } finally {
        this.loading = false;
      }
    },
    async createArticle(article) {
      // 创建文章逻辑
    },
    async updateArticle(id, article) {
      // 更新文章逻辑
    },
    async deleteArticle(id) {
      // 删除文章逻辑
    },
  },
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

<!-- views/Home.vue -->
<template>
  <div class="home">
    <div class="search-bar">
      <el-input
        v-model="searchQuery"
        placeholder="搜索文章"
        @keyup.enter="handleSearch"
      >
        <template #append>
          <el-button @click="handleSearch">搜索</el-button>
        </template>
      </el-input>
    </div>

    <div class="article-list" v-loading="articleStore.loading">
      <ArticleCard
        v-for="article in filteredArticles"
        :key="article.id"
        :article="article"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import { useArticleStore } from "@/stores/article";
import ArticleCard from "@/components/ArticleCard.vue";

const articleStore = useArticleStore();
const searchQuery = ref("");

const filteredArticles = computed(() => {
  if (!searchQuery.value) {
    return articleStore.articles;
  }
  return articleStore.articles.filter(
    (article) =>
      article.title.includes(searchQuery.value) ||
      article.content.includes(searchQuery.value)
  );
});

const handleSearch = () => {
  // 搜索逻辑已在 computed 中实现
};

onMounted(() => {
  articleStore.fetchArticles();
});
</script>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

<!-- components/ArticleCard.vue -->
<template>
  <el-card class="article-card" @click="goToDetail">
    <template #header>
      <h3>{{ article.title }}</h3>
    </template>
    <p class="summary">{{ article.summary }}</p>
    <div class="meta">
      <span class="date">{{ formatDate(article.createdAt) }}</span>
      <el-tag v-for="tag in article.tags" :key="tag" class="tag">
        {{ tag }}
      </el-tag>
    </div>
  </el-card>
</template>

<script setup>
import { useRouter } from "vue-router";

const props = defineProps({
  article: {
    type: Object,
    required: true,
  },
});

const router = useRouter();

const goToDetail = () => {
  router.push(`/article/${props.article.id}`);
};

const formatDate = (date) => {
  return new Date(date).toLocaleDateString("zh-CN");
};
</script>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

// stores/cart.js
import { defineStore } from "pinia";

export const useCartStore = defineStore("cart", {
  state: () => ({
    items: [],
  }),
  getters: {
    totalPrice: (state) => {
      return state.items.reduce((total, item) => {
        return total + item.price * item.quantity;
      }, 0);
    },
    itemCount: (state) => {
      return state.items.reduce((count, item) => {
        return count + item.quantity;
      }, 0);
    },
  },
  actions: {
    addItem(product) {
      const existingItem = this.items.find((item) => item.id === product.id);
      if (existingItem) {
        existingItem.quantity++;
      } else {
        this.items.push({
          ...product,
          quantity: 1,
        });
      }
    },
    removeItem(productId) {
      const index = this.items.findIndex((item) => item.id === productId);
      if (index > -1) {
        this.items.splice(index, 1);
      }
    },
    updateQuantity(productId, quantity) {
      const item = this.items.find((item) => item.id === productId);
      if (item) {
        item.quantity = quantity;
      }
    },
    clearCart() {
      this.items = [];
    },
  },
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

<!-- views/ProductList.vue -->
<template>
  <div class="product-list">
    <div class="filters">
      <el-select v-model="selectedCategory" placeholder="选择分类">
        <el-option
          v-for="category in categories"
          :key="category"
          :label="category"
          :value="category"
        />
      </el-select>
    </div>

    <div class="products">
      <ProductCard
        v-for="product in filteredProducts"
        :key="product.id"
        :product="product"
        @add-to-cart="handleAddToCart"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import { useCartStore } from "@/stores/cart";
import ProductCard from "@/components/ProductCard.vue";

const cartStore = useCartStore();
const selectedCategory = ref("");
const products = ref([]);
const categories = ref(["全部", "电子产品", "服装", "食品"]);

const filteredProducts = computed(() => {
  if (!selectedCategory.value || selectedCategory.value === "全部") {
    return products.value;
  }
  return products.value.filter((p) => p.category === selectedCategory.value);
});

const handleAddToCart = (product) => {
  cartStore.addItem(product);
  ElMessage.success("已添加到购物车");
};
</script>

1
2
3
4
5
6
7

// 路由懒加载
const routes = [
  {
    path: "/about",
    component: () => import("../views/About.vue"),
  },
];

1
2
3
4
5
6
7
8

<template>
  <img
    :src="imageSrc"
    :alt="imageAlt"
    loading="lazy"
    @error="handleImageError"
  />
</template>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<script setup>
import { useHead } from "@unhead/vue";

useHead({
  title: "页面标题",
  meta: [
    { name: "description", content: "页面描述" },
    { property: "og:title", content: "页面标题" },
  ],
});
</script>

1
2
3
4
5

// main.js
app.config.errorHandler = (err, instance, info) => {
  console.error("全局错误:", err);
  // 错误上报逻辑
};

1
2
3
4
5

# 构建生产版本
npm run build

# 预览构建结果
npm run preview

1
2

# 将 dist 目录上传到服务器
scp -r dist/* user@server:/var/www/html/

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

server {
    listen 80;
    server_name example.com;
    root /var/www/html;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

name: Deploy

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
      - run: npm install
      - run: npm run build
      - name: Deploy to server
        uses: appleboy/scp-action@master
        with:
          host: ${{ secrets.HOST }}
          username: ${{ secrets.USERNAME }}
          key: ${{ secrets.SSH_KEY }}
          source: "dist/*"
          target: "/var/www/html"