我体会的万字长文VUE！

爱喝羊奶
78 阅读4分钟

引言

在现代前端开发中，Vue 和 React 是两大主流框架。掌握这些框架及其生态系统（如 Vue Router、Vuex、Axios、React Router、Redux 等）是成为全栈开发者的必备技能。本文将通过一个完整的实战项目，详细介绍如何使用 Vue 和 React 构建高效、灵活的全栈应用，并结合 OpenAI/Coze API 实现智能功能点。

一、项目规划与设计

1. 项目目标

我们的目标是构建一个全栈应用，展示你在 Vue 和 React 方面的全面能力。项目将包括以下特点：

  • Vue 全家桶：Vue.js + Vue Router + Vuex + Axios
  • React 基础：React + React Router + Redux + Axios
  • API 集成：OpenAI/Coze API
  • UI 框架：Tailwind CSS + Vant UI
  • 状态管理：TypeScript + Vuex/Redux
  • 页面数量：3-5 个页面

2. 项目亮点

  • 智能化功能：集成 OpenAI/Coze API，提供智能对话或内容生成功能。
  • 响应式设计：使用 Tailwind CSS 实现响应式布局。
  • 模块化开发：使用 TypeScript 提供类型安全和代码可维护性。
  • 组件复用：使用 Vant UI 组件库提高开发效率。

3. 项目的难点

  • API 集成：处理异步请求和错误处理。
  • 状态管理：合理设计 Vuex/Redux 状态树，确保数据流清晰。
  • 性能优化：减少不必要的渲染和资源加载。

4. 项目的考点

  • 技术栈熟练度：对 Vue/React 及其相关工具的掌握程度。
  • 问题解决能力：如何处理项目中的各种挑战和问题。
  • 代码质量：代码的可读性、可维护性和扩展性。

二、Vue 全栈项目实战

1. 项目初始化

首先，我们需要创建一个新的 Vue 项目。可以使用 Vue CLI 来快速搭建项目结构。

vue create vue-fullstack-project

选择默认配置或根据需要自定义配置。

2. 安装依赖

安装必要的依赖包，包括 Vue Router、Vuex、Axios 和 Tailwind CSS。

npm install vue-router vuex axios tailwindcss postcss autoprefixer

3. 配置 Tailwind CSS

在 src/assets/styles 目录下创建 tailwind.css 文件，并进行基本配置。

/* src/assets/styles/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

在 postcss.config.js 中添加 Tailwind 插件。

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

4. 路由配置

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

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';
import Contact from '../views/Contact.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    component: About,
  },
  {
    path: '/contact',
    name: 'Contact',
    component: Contact,
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;

5. 状态管理

在 src/store/index.js 中配置 Vuex。

// src/store/index.js
import { createStore } from 'vuex';

export default createStore({
  state: {
    user: null,
    messages: [],
  },
  mutations: {
    setUser(state, user) {
      state.user = user;
    },
    addMessage(state, message) {
      state.messages.push(message);
    },
  },
  actions: {
    fetchUser({ commit }) {
      // 模拟用户获取
      const user = { name: 'Alice' };
      commit('setUser', user);
    },
    sendMessage({ commit }, message) {
      commit('addMessage', message);
    },
  },
});

6. API 集成

使用 Axios 进行 API 请求。创建 src/api/index.js 文件。

// src/api/index.js
import axios from 'axios';

const apiClient = axios.create({
  baseURL: 'https://api.openai.com/v1',
  headers: {
    'Content-Type': 'application/json',
    Authorization: `Bearer ${process.env.VUE_APP_OPENAI_API_KEY}`,
  },
});

export const getCompletion = async (prompt) => {
  try {
    const response = await apiClient.post('/engines/davinci-codex/completions', {
      prompt,
      max_tokens: 50,
    });
    return response.data.choices[0].text.trim();
  } catch (error) {
    console.error('Error fetching completion:', error);
  }
};

7. 组件开发

在 src/components 目录下创建各个组件。例如，创建一个简单的对话框组件 ChatBox.vue。

<!-- src/components/ChatBox.vue -->
<template>
  <div class="chat-box">
    <div v-for="(message, index) in messages" :key="index" class="message">
      {{ message }}
    </div>
    <input v-model="newMessage" @keyup.enter="sendMessage" placeholder="Type a message..." />
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import { getCompletion } from '@/api';

export default {
  data() {
    return {
      newMessage: '',
    };
  },
  computed: {
    ...mapState(['messages']),
  },
  methods: {
    ...mapActions(['sendMessage']),
    async sendMessage() {
      if (this.newMessage.trim()) {
        this.sendMessage(this.newMessage);
        const aiResponse = await getCompletion(this.newMessage);
        this.sendMessage(aiResponse);
        this.newMessage = '';
      }
    },
  },
};
</script>

<style scoped>
.chat-box {
  padding: 1rem;
  border: 1px solid #ccc;
}
.message {
  margin-bottom: 0.5rem;
}
</style>

8. 页面开发

在 src/views 目录下创建各个页面。例如，创建 Home.vue 页面。

<!-- src/views/Home.vue -->
<template>
  <div class="home">
    <h1>Welcome to the Chat App</h1>
    <ChatBox />
  </div>
</template>

<script>
import ChatBox from '@/components/ChatBox.vue';

export default {
  components: {
    ChatBox,
  },
};
</script>

<style scoped>
.home {
  text-align: center;
  padding: 2rem;
}
</style>

9. 指令和 Hooks

为了增加项目的亮点，我们可以使用一些 Vue 的内置指令和组合式 API。

指令示例
<template>
  <div>
    <p v-if="isVisible">This is visible</p>
    <button @click="toggleVisibility">Toggle Visibility</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true,
    };
  },
  methods: {
    toggleVisibility() {
      this.isVisible = !this.isVisible;
    },
  },
};
</script>
Hook 示例
import { onMounted, ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    onMounted(() => {
      console.log('Component has been mounted');
    });

    return { count };
  },
};

10. Tailwind CSS 和 Vant UI

使用 Tailwind CSS 和 Vant UI 来美化界面。

<template>
  <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100">
    <van-button type="primary">Primary Button</van-button>
  </div>
</template>

<script>
import { Button as VanButton } from 'vant';

export default {
  components: {
    VanButton,
  },
};
</script>

三、React 全栈项目实战

1. 项目初始化

使用 Create React App 创建一个新的 React 项目。

npx create-react-app react-fullstack-project

2. 安装依赖

安装必要的依赖包，包括 React Router、Redux、Axios 和 Tailwind CSS。

npm install react-router-dom redux react-redux axios tailwindcss postcss autoprefixer

3. 配置 Tailwind CSS

在 src/index.css 中添加 Tailwind CSS。

/* src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

在 postcss.config.js 中添加 Tailwind 插件。

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

4. 路由配置

在 src/App.js 中配置 React Router。

// src/App.js
import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import Contact from './pages/Contact';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </Router>
  );
}

export default App;

5. 状态管理

在 src/store/index.js 中配置 Redux。

// src/store/index.js
import { configureStore } from '@reduxjs/toolkit';

const initialState = {
  user: null,
  messages: [],
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'SET_USER':
      return { ...state, user: action.payload };
    case 'ADD_MESSAGE':
      return { ...state, messages: [...state.messages, action.payload] };
    default:
      return state;
  }
};

const store = configureStore({ reducer });

export default store;

6. API 集成

使用 Axios 进行 API 请求。创建 src/api/index.js 文件。

// src/api/index.js
import axios from 'axios';

const apiClient = axios.create({
  baseURL: 'https://api.openai.com/v1',
  headers: {
    'Content-Type': 'application/json',
    Authorization: `Bearer ${process.env.REACT_APP_OPENAI_API_KEY}`,
  },
});

export const getCompletion = async (prompt) => {
  try {
    const response = await apiClient.post('/engines/davinci-codex/completions', {
      prompt,
      max_tokens: 50,
    });
    return response.data.choices[0].text.trim();
  } catch (error) {
    console.error('Error fetching completion:', error);
  }
};

7. 组件开发

在 src/components 目录下创建各个组件。例如，创建一个简单的对话框组件 ChatBox.js。

// src/components/ChatBox.js
import React, { useState, useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { getCompletion } from '../api';

const ChatBox = () => {
  const dispatch = useDispatch();
  const messages = useSelector((state) => state.messages);
  const [newMessage, setNewMessage] = useState('');

  const sendMessage = async () => {
    if (newMessage.trim()) {
      dispatch({ type: 'ADD_MESSAGE', payload: newMessage });
      const aiResponse = await getCompletion(newMessage);
      dispatch({ type: 'ADD_MESSAGE', payload: aiResponse });
      setNewMessage('');
    }
  };

  return (
    <div className="chat-box">
      {messages.map((message, index) => (
        <div key={index} className="message">
          {message}
        </div>
      ))}
      <input
        value={newMessage}
        onChange={(e) => setNewMessage(e.target.value)}
        onKeyDown={(e) => e.key === 'Enter' && sendMessage()}
        placeholder="Type a message..."
      />
    </div>
  );
};

export default ChatBox;

8. 页面开发

在 src/pages 目录下创建各个页面。例如，创建 Home.js 页面。

// src/pages/Home.js
import React from 'react';
import ChatBox from '../components/ChatBox';

const Home = () => {
  return (
    <div className="home">
      <h1>Welcome to the Chat App</h1>
      <ChatBox />
    </div>
  );
};

export default Home;

9. Hook 示例

使用 React 的 Hook 来实现状态管理和生命周期。

import React, { useState, useEffect } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('Component has been mounted');
  }, []);

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default Counter;

10. Tailwind CSS 和 Vant UI

使用 Tailwind CSS 和 Vant UI 来美化界面。

import React from 'react';
import { Button as VanButton } from 'vant';

const Example = () => {
  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
      <VanButton type="primary">Primary Button</VanButton>
    </div>
  );
};

export default Example;

四、总结与展望

1. 总结

通过本文的详细讲解，我们已经学会了如何使用 Vue 和 React 构建全栈应用。以下是关键要点：

  • Vue 全家桶：Vue.js + Vue Router + Vuex + Axios
  • React 基础：React + React Router + Redux + Axios
  • API 集成：OpenAI/Coze API
  • UI 框架：Tailwind CSS + Vant UI
  • 状态管理：TypeScript + Vuex/Redux
  • 页面数量：3-5 个页面

2. 展望

未来，你可以进一步探索以下领域：

  • 服务端渲染（SSR）：结合 Vue 或 React 的 SSR 技术，提升应用的 SEO 友好性和初始加载速度。
  • TypeScript 支持：越来越多的项目开始采用 TypeScript，因此了解如何在 Vue/React 中使用 TypeScript 将变得尤为重要。
  • 微前端架构：探索如何将 Vue/React 与其他框架集成，构建模块化、可扩展的微前端应用。

希望本文能为你提供一个全面的理解 Vue 和 React 全栈开发的视角，并启发你在未来的前端开发中更好地运用这些理念和技术。如果你有任何问题或需要更多具体的示例，请随时告知！

avatar
文章
阅读
粉丝