प्रौद्योगिकी साझेदारी

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

नमस्कारः सर्वेभ्यः, अद्य वयं Vue 3 इत्यस्य उपयोगेन AI conversation page इत्यस्य निर्माणं कथं भवति इति अन्वेषणं करिष्यामः। एषा प्रक्रिया न केवलं Vue 3 इत्यस्य नूतनानि विशेषतानि अवगन्तुं शक्नोति, अपितु अन्तरक्रियाशीलजाल-अनुप्रयोगानाम् निर्माणस्य नूतन-अवगमनं अपि दास्यति । यदि भवान् प्रोग्रामिंग्-विषये नूतनः अस्ति तर्हि चिन्ता मा कुरुत, अहं सुलभ-बोध-भाषायाः उपयोगं करिष्यामि यत् भवान् प्रत्येकं पदं अनुसरणं कर्तुं शक्नोति इति सुनिश्चितं करोमि ।

Step 1: Vue 3 परियोजनां निर्मायताम्

प्रथमं अस्माभिः Vue 3 अभियांत्रिकी वातावरणं स्थापयितुं आवश्यकम् । भवता Node.js तथा npm (Node package manager) संस्थापितम् इति कल्प्यते ।यदि अद्यापि न संस्थापितम् अस्ति तर्हि गच्छन्तुnodejs.org इति इतितत् डाउनलोड् कृत्वा इन्स्टॉल कुर्वन्तु।

स्वस्य आदेशपङ्क्तिसाधनं उद्घाट्य नूतनं Vue 3 परियोजनां निर्मातुं निम्नलिखितम् आदेशं प्रविशतु:

npm install -g @vue/cli vue create my-ai-chat-app

Vue 3 इत्यस्य पूर्वनिर्धारितविकल्पान् चयनं कर्तुं प्रॉम्प्ट्-अनुसरणं कुर्वन्तु तथा च परियोजनायाः निर्माणस्य प्रतीक्षां कुर्वन्तु ।

द्वितीयः चरणः परियोजनासंरचनायाः अवलोकनम्

सृष्टेः समाप्तेः अनन्तरम् ।my-ai-chat-appपरियोजनायाः मूलभूतसंरचना निम्नलिखितरूपेण अस्ति ।

my-ai-chat-app
│   README.md
│   package.json
│
├───node_modules
├───public
└───src
    │   App.vue
    │   main.js
    │
    ├───assets
    ├───components

        │   ChatInput.vue
    ├───router

        │   index.js
    ├───store
    └───views

        │   Chat.vue

Step 3: AI संवाद पृष्ठं लिखन्तु

तदनन्तरं वयं AI वार्तालापपृष्ठस्य मूलसङ्केतं लिखेम ।प्रथमं उद्घाटयामःsrc/App.vuefile, एषा अस्माकं entry component file अस्ति ।

<template>
  <div id="app">
    <router-view />
  </div>
</template>

इदं टेम्पलेट् अतीव सरलम् अस्ति, अस्मिन् केवलं क...router-view, यत् Vue Router इत्यस्य कृते एकः स्थानधारकः अस्ति यस्य उपयोगः मेलमार्गघटकानाम् प्रतिपादनार्थं भवति ।

ChatInput घटकः

अधुना, वयं कChatInput.vue सन्देशप्रेषणार्थं घटकः ।उद्घाटितsrc/components/ChatInput.vueसञ्चिकां कृत्वा निम्नलिखितसङ्केतं योजयन्तु:

<template>
  <div>
    <!-- 消息展示 -->
    <div>{{ message.text }}</div>
    <!-- 输入框 -->
    <input v-model="message.text" placeholder="Type a message">
    <!-- 发送按钮 -->
    <button @click="sendMessage">Send</button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      message: {
        text: ''
      }
    };
  },
  methods: {
    sendMessage() {
      // 这里将添加发送消息的逻辑
      console.log('Sending message:', this.message.text);
      this.message.text = ''; // 清空输入框
    }
  }
};
</script>

अस्मिन् घटके दत्तांशप्रतिरूपं भवतिmessage, contains atext गुणः, निवेशपेटिकायाः ​​बन्धनार्थं प्रयुक्तः ।अद्यापि एकः अस्तिsendMessageविधिः, सन्देशप्रेषणस्य तर्कस्य निबन्धनार्थं प्रयुक्तः ।

main.js विन्यासः

अन्ते अस्माकं आवश्यकता अस्तिsrc/main.jsVue Router तथा Vuex इत्येतयोः परिचयः, उपयोगः च, तथैव अस्माकं...Appघटकाः ।

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
 
createApp(App).use(store).use(router).mount('#app');

अत्र वयं Vue 3 इत्यस्य Composition API इत्यस्य उपयोगं कुर्मः, throughcreateAppfunction इत्येतत् application instance निर्मातुं उपयोगाय चuseविधिना Vue Router तथा Vuex संस्थापितम्।

Step 4: भवतः Vue 3 एप्लिकेशनं कथं चालयितुं शक्यते

इदानीं यदा अस्माकं AI संभाषणपृष्ठं सज्जं जातम् तदा अग्रिमः सोपानः अस्ति यत् तत् कथं चालनीयम् इति ।

1. आदेशपङ्क्तिसाधनं उद्घाट्य स्वस्य परियोजनानिर्देशिकायां गच्छन्तु ।
2. विकाससर्वरं आरभ्य निम्नलिखित आदेशं निष्पादयन्तु ।

npm run serve

आदेशस्य निष्पादनस्य अनन्तरं भवन्तः प्रायः निम्नलिखितम् आउटपुट् पश्यन्ति, यत् भवन्तं पास कर्तुं प्रेरयतिlocalhostभवतः अनुप्रयोगं प्राप्तुं पता:

DONE Compiled successfully in Xms App running at: - Local: http://localhost:8080/ - Network: http://<network-address>:8080/

ब्राउजर् उद्घाट्य भ्रमणं कुर्वन्तुhttp://localhost:8080/, भवन्तः स्वस्य AI वार्तालापपृष्ठं पश्यन्ति।

पूर्णसङ्केतः कथं अनुरोधः करणीयः

यदि भवान् सम्पूर्णस्य परियोजनायाः संरचनां तर्कं च अधिकतया अवगन्तुं सम्पूर्णं कोडं प्राप्तुम् इच्छति तर्हि कृपया पश्यन्तुटिप्पणीक्षेत्रे स्वस्य ईमेलं त्यजन्तु。

निगमन

अद्य वयं सरलं AI वार्तालापपृष्ठं निर्मातुं Vue 3 इत्यस्य उपयोगं कथं कर्तव्यमिति ज्ञातवन्तः।इदं केवलं स्थिरपृष्ठप्रभावस्य परिचयः अस्ति यत् बृहत् मॉडलं कथं प्राप्तुं शक्यते तथा च वास्तविकं AI संवादकार्यं कथं साक्षात्कर्तुं शक्यते इति विषये कृपया मया लिखितं एतत् लेखं पश्यन्तु।शून्यव्ययेन AI संवाद WeChat एप्लेट् कथं निर्मातव्यम् (स्रोतसङ्केतः संलग्नः)