# fullstack

**Repository Path**: jiadeyu/fullstack

## Basic Information

- **Project Name**: fullstack
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-05-28
- **Last Updated**: 2025-05-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# fullstack

#### 介绍

前端菜鸡跟随《全栈之巅》入门全栈之路(nodejs + vue3 + mongodb)

#### 软件架构

软件架构说明

## 一、安装教程

1.  工具安装和环境搭建
    1.  安装 node mongodb
    2.  下载安装 mongodb
2.  初始化项目

    1.  npm i -g nodemon
    2.  通过 npm create vite@latest web --template vue、通过 npm create vite@latest admin --template vue 创建 web 和 admin 项目
        使用 Vite 创建 Vue 3 项目（2024 最新版）
        Vite 是一个现代化的前端构建工具，启动快、热更新快，非常适合 Vue 3 开发。以下是详细步骤： 1. 创建项目
        方式一：npm / yarn / pnpm（推荐）

        ```bash
            npm create vite@latest my-vue-app -- --template vue
        ```

        说明：

            my-vue-app 是项目名称（可自定义）

            --template vue 表示使用 Vue 模板（默认是 Vue 3）

            方式二：手动选择模板

        ```bash
           npm create vite@latest
        ```

            然后按提示选择：

            项目名称（如 my-vue-app）

            框架（选择 Vue）

            语言（可选 JavaScript 或 TypeScript）

            1. 进入项目并安装依赖

        ```bash
           cd my-vue-app
           npm install  # 或 yarn / pnpm install
        ```

            2. 启动开发服务器

        ```bash
            npm run dev
        ```

            访问 http://localhost:5173 即可看到 Vue 3 的默认页面。

            3. 项目结构说明
               my-vue-app/
               ├── node_modules/     # 依赖
               ├── public/           # 静态资源（不经过打包）
               ├── src/
               │   ├── assets/       # 图片、CSS 等资源
               │   ├── components/   # Vue 组件
               │   ├── App.vue       # 根组件
               │   └── main.js       # 应用入口
               ├── index.html        # 主页面
               ├── vite.config.js    # Vite 配置文件
               └── package.json
            4. 可选配置
            (1) 修改 Vite 配置（vite.config.js）

        ```javascript
        import { defineConfig } from "vite";
        import vue from "@vitejs/plugin-vue";

        export default defineConfig({
          plugins: [vue()],
          server: {
            port: 3000, // 自定义端口
            open: true, // 自动打开浏览器
          },
        });
        ```

            (2) 安装 Vue Router

        ```bash
          npm install vue-router@4
        ```

                在 src/router/index.js 中配置路由：

        ```javascript
        import { createRouter, createWebHistory } from "vue-router";
        import Home from "../views/Home.vue";

        const routes = [{ path: "/", component: Home }];

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

        export default router;
        ```

            然后在 main.js 中引入：

        ```javascript
        import { createApp } from "vue";
        import App from "./App.vue";
        import router from "./router";

        createApp(App).use(router).mount("#app");
        ```

            (3) 安装 Pinia（状态管理）

        ```bash
            npm install pinia
        ```

            在 main.js 中引入：

        ```javascript
        import { createPinia } from "pinia";

        const app = createApp(App);
        app.use(createPinia());
        app.mount("#app");
        ```

            5. 构建生产环境代码

        ```bash
            npm run build
        ```

            生成的代码会放在 dist/ 目录下。

    3.  新建 server 项目文件夹，npm init -y 初始化 server 项目

## 二、管理后台

1.  基于 element-plus 搭建基础界面

    1.  使用 npm 或 yarn 安装
        在 Vue 项目中，直接通过 npm 或 yarn 安装 Element Plus：

        ```bash
           npm install element-plus --save
           或
           yarn add element-plus
        ```
    2.  完整引入（推荐新手）
        在 main.js 或 main.ts 中全局引入：

        ```    javascript
           import { createApp } from 'vue';
           import ElementPlus from 'element-plus';
           import 'element-plus/dist/index.css';  // 引入样式
           import App from './App.vue';

           const app = createApp(App);
           app.use(ElementPlus);
           app.mount('#app');
        ```
    3.  按需引入（推荐生产环境）
        使用 unplugin-vue-components 自动按需导入（减少打包体积）：

            安装插件：

        ```bash
        npm install -D unplugin-vue-components unplugin-auto-import
        ```
            在 vite.config.js 或 vue.config.js 中配置：

        ```javascript
        // Vite 示例
        import AutoImport from 'unplugin-auto-import/vite';
        import Components from 'unplugin-vue-components/vite';
        import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';

        export default {
        plugins: [
            AutoImport({
            resolvers: [ElementPlusResolver()],
            }),
            Components({
            resolvers: [ElementPlusResolver()],
            }),
        ],
        };`
        ```

        这样你就能直接在模板中使用 <el-button> 等组件，无需手动导入！

2.  创建分类
3.  分类列表
4.  修改分类
5.  删除分类

#### 参与贡献

1.  Fork 本仓库
2.  新建 Feat_xxx 分支
3.  提交代码
4.  新建 Pull Request

#### 特技

1.  使用 Readme_XXX.md 来支持不同的语言，例如 Readme_en.md, Readme_zh.md
2.  Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
4.  [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
5.  Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
6.  Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)

```

```