An overview of the

👍👍 uses Vue to imitate wechat app and strives to achieve the effect of imitation. Personal development, this project can bring beginners a good entry experience, interested students can clone down to complete their own. The current progress of the project ==30%==, and it will be updated continuously until the completion of the whole project. Strive to achieve 90% similarity with MAC wechat, so that it is closer to the user interaction experience of wechat App.

Fake wechat for MACCopy the code

Preview picture

The project steps

npm install

npm run serve

npm run build

npm run lint

Copy the code

The project address

🥺🥺 project address is here

Preview the address

The preview address is here at 🥺🥺

The project schedule

Personal information
  • Display user profile pictures
Chat list
  • The main page
  • Chat list
  • Chat dialog box
  • Chat data
  • Sending pictures
  • Group chat
  • Public account dialog box
  • Switching user chat
  • Expressions to choose
  • List right click operation
  • Delete add operation
Address book list
  • Communication list
  • Address book jumps to chat list
  • List details
Collect the list
  • Collect the list
  • List details
File list
  • File list
  • List details

Part of the code

<div 
  class="messageList"
  :class="classList[list.megType]"
  v-for="(list, index) in messageList" :key="index">
  <span v-if="list.megType === 2">{{list.megTime}}</span>
  <img :src="list.avator" alt="" v-if="list.megType === 1" class="userAvator" />
  <pre class="messageText" v-if="list.megType ! == 2 && list.textType === 0">
    {{list.megText}}
    <img v-if="list.megType ! == 2 && list.textType === 1" :src="list.megText" alt="">
  </pre>
  <img :src="list.avator" alt="" v-if="list.megType === 0" class="userAvator" />
</div>
Copy the code
sendMes() {
  if(this.onInputValue ! = =' ') {
    const onMesList = {
      avator: 'https://web.lieme.cn/stack/72.jpg'MegText: this.onInputValue, megTime: dateutil.formatDate (), textType: 0, // 0 text 1 picture} this.messagelist.push (onMesList)} this.oninputValue =' '
  this.scollDiv()
},
Copy the code

Front end public account and communication group