Vue2-based imitation mobile QQ single page application function (connected Chat Robot) and vue2 Chat Robot

Vue2-based imitation mobile QQ single page application function (connected Chat Robot) and vue2 Chat Robot

Overview

I used Vue2 to create a webapp for imitation mobile QQ. On the ui, I referred to the work of the designer kaokao. The work was developed independently by myself, and detailed comments were made in the source code. As Vue2 is a beginner, note writing is not concise enough. Sorry.

Project address https://github.com/jiangqizheng/vue-MiniQQ

Functions implemented by the Project

• Dialog function-since QQ is always able to communicate with each other, a Turing chatbot is connected to the project and can be used to communicate with every character in the list.
• Slide left to delete -- Slide left to delete related messages.
• Search page-click the search button in the upper-right corner to enter the search page, enter the corresponding words or numbers, and search for friends dynamically.
• The data flow in the project is controlled by vuex

Note: The Flux architecture is like glasses: You will know when to need it. It seems that I understand something.

Features to be implemented or planned

• Registration and login Functions
• Add, delete, and display friends in a friend List Group
• Dialing interface, multi-user chat, QQ Group
• Space, friend talk, thumb up, picture sharing
• Personal settings, switch topic

Note: The above content has been taken into consideration and can be perfectly implemented. Some features are being prepared, because this project is a long-term project, if you are interested in the future progress, you can also pay attention to it. If you have any good ideas, please let me know.

Desktop and mobile testing

• Desktop test: After npm run dev, open the *** developer tool *** F12 and simulate the mobile phone preview Ctrl + Shift + M (Chrome)
• Mobile Terminal Test: After npm run dev, enter ipconfig (win) in the cmd command line to obtain the IP address in the LAN, generate the QR code, and then perform the test (we recommend scanning the QR code)

Animation Preview

Gif images seem to be compressed too much. If you are interested, you can clone them and view them.

Sidebar and personal homepage

Animation effects of the Search Component

Enter dialog box

Dialog Box Information

FirstPage Tab Switch

Update description

• Comments more content in detail, corrected some errors of left-slide deletion, and now the message can be deleted normally, then, the chat queue can be re-generated after the conversation in the friend list (you can delete the information before continuing to talk to the robot). In addition, the width of the delete button is increased by ---- 3.28.

Problem feedback

We recommend that you move to Issues. You are welcome to give feedback on the poor/wrong performance of the project and the problems you encounter during the development process. The author will reply positively.

Thanks

Thank you for your visit. If you have any help, please give a Star! Pai_^

Other Instructions

• Because it is an attitude of writing and learning, there may be some less rigorous points or obvious errors. Please give me feedback on this point. Thank you very much.
• The progress from scratch to the present is simple, but it still takes a lot of time to upload the project, hoping to help some friends who are also learning Vue.
• This is the first independent write of a complete Vue project! Q. o and welcome to the discussion.
• This project will be constantly optimized during the use of my Vue and used to test the addition of some new interesting features.

Technology Stack

• Vue-cli
• Vue2
• Vue-router
• Vuex
• Axios
• Stylus
• Webpack2
• Muse-ui

Directory structure

.
── README. md
── Build // build service and webpack configurations, forward chat robots and ajax to get user data
── Config // configure different environments of the project
── Dist // Project build directory
── Index.html // project entry file
── Package. json // project configuration file
── Mockdata. json // project simulation data
── Src
│ ── Common // common css style
│ ── Components // various components
│ ── Router // folder for storing routes
│ ── Vuex // related to Vuex Storage
│ ── App. Vue // template file Portal
│ ── Main. js // Webpack pre-compilation entry
├ ── Static // css js and image resources
│

Build Setup

A self-developed QQ project based on vue2 family bucket (vue2 + vue-router + vuex), mobile webapp, and continuous updates ·

# Install npm install # run (Port 8888) npm run dev # Release npm run build

The above is a copy of the Vue2-based imitation mobile QQ single page application function (connected to chat robots). I hope it will help you. If you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!