Project description

Vue3.0-chatroom is a mobile simulation of wechat chat based on Vue3+Vuex4+ VuUe-Router4 +Vant3.x. It realizes the functions of sending messages +emoj expression, picture/video preview, pull-down refresh, WEBSITE preview, circle of friends and so on. Vue3 + VANT3 +vuex Imitates wechat APP interface for chatting

 

Implementation technology

  • Code + Technology: Vscode + Vue3/Vuex4/ VUE-Router4
  • UI Component library: Vant3.x (Vue3.0 component library for Mobile)
  • Shell component: V3Popup (vuE3 based custom shell component)
  • Iconfont: Ali font icon library
  • Custom top Navbar+ bottom Tabbar components

Project directory

Vue3 Custom frame components

In the project, all the functions of the popbox are realized by vuE3 custom components.

V3popup is a mobile custom popup component based on VUE3.

If you are interested in implementing a custom popup component for VuE3, check out this post.

Vue3 series: vue3.0 custom bounced component V3Popup | vue3. X mobile terminal box components

Vue3 configuration file

Use @vue/cli to create a vue3 project. By default, the vue.config.js file is not available.

You can do some simple environment configuration and path alias alias configuration.

// publicPath: '/', // outputDir: = require('path') module.exports = {// publicPath: '/', // outputDir: = require('path') module.exports = {// publicPath: '/', // outputDir: = require('path') module. 'dist', // assetsDir: '', // devServer: {// host: 'localhost', // port: 8080, // whether to enable HTTPS HTTPS: // proxy: {// '^/ API ': {// target: '<url>', // ws: true, // changeOrigin: True / /}, / / '^ / foo: {/ / target:' < other_url > '/ /} / /}}, / / webpack chainWebpack configuration: Config => {// Configure path alias config.resolve.alias. set('@', path.join(__dirname, 'SRC ')). Set ('@', path.join(__dirname,' SRC ')). 'src/assets')) .set('@components', path.join(__dirname, 'src/components')) .set('@views', path.join(__dirname, 'src/views')) } }Copy the code

Vue3 entry page configuration

You can import vuex and routing configuration, common component/style files in main.js.

Import {createApp} from 'vue' import App from './ app. vue' // Import vuex and route configuration import store from './store' import router From './router' // import js import '@assets/js/fontSize' // import public components import Plugins from './ Plugins' const app = createApp(App) app.use(store) app.use(router) app.use(Plugins) app.mount('#app')Copy the code

Vue3 login interception and form validation

Vue3 uses global routing hooks to implement login state interception.

router.beforeEach((to, from, Next) => {const token = store.state.token if(to.meta.requireauth) {if(token) {next()}else {// V3Popup({content: 'Not authorized! ', position: 'top', popupStyle: 'background:#fa5151; color:#fff; ', time: 2, onEnd: () => { next({ path: '/login' }) } }) } }else { next() } })Copy the code

Use getCurrentInstance to get the context to call the Store or Router methods.

<script> import { reactive, inject, getCurrentInstance } from 'vue' export default { components: {}, setup() { const { ctx } = getCurrentInstance() const v3popup = inject('v3popup') const utils = inject('utils') const formObj = reactive({}) // ... const handleSubmit = () => { if(! Formobj.tel){Snackbar(' Phone number cannot be empty! ') }else if(! Utils.checktel (formobj.tel)){Snackbar(' Phone number format is not correct! ') }else if(! Formobj.pwd){Snackbar(' Password cannot be empty! ') }else{ ctx.$store.commit('SET_TOKEN', utils.setToken()); ctx.$store.commit('SET_USER', formObj.tel); / /... } } return { formObj, handleSubmit } } } </script>Copy the code

Of course, you can also use the following method to manipulate store

import { createStore } from 'vuex'

const store = createStore()
store.commit('SET_TOKEN', utils.setToken())
Copy the code

Vue3 Chat section

The bottom editor of the chat page is implemented as a div editable, separated into a common component call.

To obtain the cursor position, insert emoticon content at the cursor, delete content at the cursor, empty the editor and other functions.

@time Andy by 2021-01 * @about Q: 282310962 wx: xy190310 */ <script> import { ref, reactive, toRefs, watch, nextTick } from 'vue' export default { props: { modelValue: { type: String, default: '' } }, setup(props, { emit }) { const editorRef = ref(null) const data = reactive({ editorText: props.modelValue, isChange: true, lastCursor: null, }) // ... Const getLastCursor = () => {let sel = window.getSelection() if(sel && sel.rangecount > 0) {return Sel.getrangeat (0)}} @param HTML content to be inserted const insertHtmlAtCursor = (HTML) => {let sel, Range if(window.getSelection) {// sel = window.getSelection() Determine the lastCursor position if(data.lastcursor) {sel.removeallranges () sel.addrange (data.lastcursor)} if(sel.getrangeat && sel.rangeCount) { range = sel.getRangeAt(0) let el = document.createElement('div') el.appendChild(html) var frag = document.createDocumentFragment(), node, lastNode while ((node = el.firstChild)) { lastNode = frag.appendChild(node) } range.insertNode(frag) if(lastNode) { range = range.cloneRange() range.setStartAfter(lastNode) range.collapse(true) sel.removeAllRanges() sel.addRange(range) } } } else if(document.selection && document.selection.type ! = 'Control') { // IE < 9 document.selection.createRange().pasteHTML(html) } // ... } return { ... toRefs(data), editorRef, handleInput, handleDel, // ... } } } </script>Copy the code

Well, based on Vue3. X development imitation wechat interface chat example to share here. Thank you for reading ~✍

Finally, share an instance of electron-vue

Electron + vue imitation WeChat chat desktop client instance | electron – vue chat rooms