从零开始实现慕课网（一）

xzero
86 阅读2分钟

第一步：项目初始化

  1. 安装Vite和Vue项目 打开终端并运行以下命令创建一个新的Vue项目：

    bash
复制代码
npm create vite@latest my-project --template vue
cd my-project
npm install

  2. 运行开发服务器 启动开发服务器查看项目是否正确配置：

    bash
复制代码
npm run dev

第二步：项目结构

为了便于维护和扩展，我们需要一个良好的项目结构。以下是推荐的目录结构：

csharp
复制代码
my-project/
├── public/
├── src/
│   ├── assets/       # 静态资源（图片、字体等）
│   ├── components/   # 公共组件
│   ├── layouts/      # 布局组件
│   ├── pages/        # 页面组件
│   ├── router/       # 路由配置
│   ├── store/        # 状态管理
│   ├── styles/       # 全局样式
│   ├── utils/        # 工具函数
│   ├── App.vue
│   └── main.js
├── .gitignore
├── index.html
├── package.json
└── vite.config.js

第三步：配置Vue Router

  1. 安装Vue Router

    bash
复制代码
npm install vue-router

  2. 创建路由配置文件 src/router/index.js：

    js
复制代码
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../pages/Home.vue';
import Course from '../pages/Course.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/course/:id', component: Course },
];

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

export default router;

  3. 在主文件中使用路由器 src/main.js：

    js
复制代码
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);
app.use(router);
app.mount('#app');

第四步：配置Pinia

  1. 安装Pinia

    bash
复制代码
npm install pinia

  2. 创建状态管理文件 src/store/index.js：

    js
复制代码
import { defineStore } from 'pinia';

export const useMainStore = defineStore('main', {
  state: () => ({
    user: null,
    courses: [],
  }),
  actions: {
    setUser(user) {
      this.user = user;
    },
    setCourses(courses) {
      this.courses = courses;
    },
  },
});

  3. 在主文件中使用Pinia src/main.js：

    js
复制代码
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import { createPinia } from 'pinia';

const app = createApp(App);
app.use(router);
app.use(createPinia());
app.mount('#app');

第五步：安装和配置Element Plus

  1. 安装Element Plus

    bash
复制代码
npm install element-plus

  2. 在主文件中引入Element Plus src/main.js：

    js
复制代码
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import { createPinia } from 'pinia';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';

const app = createApp(App);
app.use(router);
app.use(createPinia());
app.use(ElementPlus);
app.mount('#app');

第六步：创建和组织组件

  1. 创建Header组件 src/components/Header.vue：

    vue
复制代码
<template>
  <el-header>
    <div class="logo">慕课网</div>
    <el-menu mode="horizontal" :default-active="activeIndex">
      <el-menu-item index="1">首页</el-menu-item>
      <el-menu-item index="2">课程</el-menu-item>
      <el-menu-item index="3">个人中心</el-menu-item>
    </el-menu>
  </el-header>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '1',
    };
  },
};
</script>

<style scoped>
.logo {
  font-size: 24px;
  font-weight: bold;
}
</style>

  2. 创建Footer组件 src/components/Footer.vue：

    vue
复制代码
<template>
  <el-footer>
    <div class="footer-content">© 2024 慕课网 - 版权所有</div>
  </el-footer>
</template>

<style scoped>
.footer-content {
  text-align: center;
  padding: 20px 0;
}
</style>

  3. 创建课程卡片组件 src/components/CourseCard.vue：

    vue
复制代码
<template>
  <el-card :body-style="{ padding: '0px' }">
    <img src="https://via.placeholder.com/400" class="image" />
    <div style="padding: 14px;">
      <span>课程名称</span>
      <div class="bottom clearfix">
        <el-button type="primary" size="small">查看课程</el-button>
      </div>
    </div>
  </el-card>
</template>

<style scoped>
.image {
  width: 100%;
  display: block;
}
.bottom {
  margin-top: 10px;
  text-align: right;
}
</style>

第七步：创建页面

  1. 创建首页 src/pages/Home.vue：

    vue
复制代码
<template>
  <div>
    <Header />
    <el-main>
      <el-row :gutter="20">
        <el-col :span="6" v-for="n in 8" :key="n">
          <CourseCard />
        </el-col>
      </el-row>
    </el-main>
    <Footer />
  </div>
</template>

<script>
import Header from '../components/Header.vue';
import Footer from '../components/Footer.vue';
import CourseCard from '../components/CourseCard.vue';

export default {
  components: {
    Header,
    Footer,
    CourseCard,
  },
};
</script>

第八步：样式和布局

  1. 全局样式 src/styles/global.css：

    css
复制代码
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

el-header, el-footer {
  background-color: #b3c0d1;
  color: #333;
}

  2. 在主文件中引入全局样式 src/main.js：

    js
复制代码
import './styles/global.css';
avatar
文章
阅读
粉丝