{"id":272491,"date":"2021-01-11T08:09:15","date_gmt":"2021-01-11T00:09:15","guid":{"rendered":"http:\/\/4563.org\/?p=272491"},"modified":"2021-01-12T16:11:58","modified_gmt":"2021-01-12T08:11:58","slug":"vue3-0-%e9%ab%98%e4%bb%bf%e5%be%ae%e4%bf%a1-app-%e7%95%8c%e9%9d%a2%e8%81%8a%e5%a4%a9%e5%ae%9e%e4%be%8bvue3-%e8%81%8a%e5%a4%a9%e5%ae%a4","status":"publish","type":"post","link":"http:\/\/4563.org\/?p=272491","title":{"rendered":"vue3.0 \u9ad8\u4eff\u5fae\u4fe1 app \u754c\u9762\u804a\u5929\u5b9e\u4f8b|vue3 \u804a\u5929\u5ba4"},"content":{"rendered":"
\n
\n
\n

vue3.0 \u9ad8\u4eff\u5fae\u4fe1 app \u754c\u9762\u804a\u5929\u5b9e\u4f8b|vue3 \u804a\u5929\u5ba4 <\/h1>\n

<\/p>\n

\n
\u8cc7\u6df1\u5927\u4f6c : xiaoyan2017 <\/span> <\/i> 0<\/span> <\/div>\n
<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n
<\/p>\n

\u9879\u76ee\u7b80\u4ecb<\/h2>\n

Vue3Chatroom \u804a\u5929 \u57fa\u4e8e vue3.x+vuex4+vue-router+vant3+v3popup \u7b49\u6280\u672f\u5f00\u53d1\u5b9e\u73b0\u7684\u4eff\u5fae\u4fe1 app \u754c\u9762\u804a\u5929\u5b9e\u6218\u9879\u76ee\u3002\u5b9e\u73b0\u4e86\u53d1\u9001\u6d88\u606f \/emoj \u8868\u60c5\u3001\u56fe\u7247 \/\u89c6\u9891\u9884\u89c8\u3001\u7f51\u5740\u67e5\u770b\u3001\u4e0b\u62c9\u5237\u65b0\u3001\u7ea2\u5305 \/\u670b\u53cb\u5708\u7b49\u529f\u80fd\u3002<\/p>\n

\"vue3.0<\/p>\n

\u6280\u672f\u6808<\/h2>\n
    \n
  • \u7f16\u7801+\u6846\u67b6\uff1aVscode + Vue3.0\/Vuex4\/Vue-Router4<\/li>\n
  • UI \u7ec4\u4ef6\u5e93\uff1avant-ui3.x (\u6709\u8d5e\u79fb\u52a8\u7aef vue3.0 \u7ec4\u4ef6\u5e93)<\/li>\n
  • \u5f39\u5c42\u7ec4\u4ef6\uff1aV3Popup \uff08\u57fa\u4e8e vue3 \u5f39\u5c42\u7ec4\u4ef6\uff09<\/li>\n
  • \u5b57\u4f53\u56fe\u6807\uff1a\u963f\u91cc iconfont \u5b57\u4f53\u56fe\u6807\u5e93<\/li>\n
  • \u81ea\u5b9a\u4e49\u9876\u90e8 Navbar+\u5e95\u90e8 Tabbar<\/li>\n<\/ul>\n

    \"vue3.0 \"vue3.0<\/p>\n

    \u9879\u76ee\u76ee\u5f55\u7ed3\u6784<\/h2>\n

    \"vue3.0<\/p>\n

    \u9879\u76ee\u4e2d\u6240\u6709\u7684\u9875\u9762\u53ca\u903b\u8f91\u5747\u662f\u91c7\u7528\u6700\u65b0\u7684 Vue3 \u8bed\u6cd5\u5b9e\u73b0\u3002<\/p>\n

    \"vue3.0<\/p>\n

    \"vue3.0<\/p>\n

    \"vue3.0<\/p>\n

    \"vue3.0<\/p>\n

    \"vue3.0<\/p>\n

    \"vue3.0<\/p>\n

    \"vue3.0<\/p>\n

    \"vue3.0<\/p>\n

    \"vue3.0<\/p>\n

    \"vue3.0<\/p>\n

    \"vue3.0<\/p>\n

    \"vue3.0<\/p>\n

    \"vue3.0<\/p>\n

    \"vue3.0<\/p>\n

    vue3.0 \u81ea\u5b9a\u4e49\u9876\u90e8\u6761+\u5e95\u90e8 Tab \u7ec4\u4ef6<\/h2>\n

    \u9879\u76ee\u4e2d\u7684\u9876\u90e8\u5bfc\u822a\u548c\u5e95\u90e8 tabbar \u7ec4\u4ef6\u5747\u662f\u5728\u4e4b\u524d\u7684 vue2 \u6f14\u53d8\u800c\u6765\u3002<\/p>\n

    \"vue3.0<\/p>\n

    \u4e4b\u524d\u6709\u8fc7\u4e00\u7bc7\u5206\u4eab\u6587\u7ae0\uff0c\u5927\u5bb6\u611f\u5174\u8da3\u7684\u53ef\u4ee5\u53bb\u770b\u770b\u3002<\/p>\n

    vue.js \u5b9e\u6218\u9876\u90e8 topbar+tabbar \u7ec4\u4ef6<\/p>\n

    vue3.0 \u81ea\u5b9a\u4e49 mobile \u5f39\u6846\u7ec4\u4ef6<\/h2>\n

    \u9879\u76ee\u4e2d\u4f7f\u7528\u7684\u6240\u6709\u5f39\u6846\u5747\u662f\u57fa\u4e8e vue3 \u81ea\u5b9a\u4e49\u5f39\u6846 v3popup \u5b9e\u73b0\u3002<\/p>\n

    \"vue3.0<\/p>\n

    v3popup \u4e00\u6b3e\u96c6\u5408\u4e86 vant3 \u4e2d msg|alert|dialog|popup|actionsheet|toast \u7b49\u591a\u79cd\u529f\u80fd\u7684\u79fb\u52a8\u7aef Vue3 \u81ea\u5b9a\u4e49\u5f39\u6846\u7ec4\u4ef6\u3002<\/p>\n

    vue3.x \u81ea\u5b9a\u4e49 mobile \u5f39\u6846\u7ec4\u4ef6<\/p>\n

    vue3.0 \u9879\u76ee\u914d\u7f6e<\/h2>\n

    \u5982\u679c\u521b\u5efa vue3 \u9879\u76ee\u65f6\uff0c\u6ca1\u6709 vue.config.js \uff0c\u9700\u8981\u624b\u52a8\u521b\u5efa\u3002<\/p>\n

    \u7528\u6765\u8fdb\u884c\u4e00\u4e9b vue \u5f00\u53d1\u7684\u5e38\u7528\u914d\u7f6e\u3002<\/p>\n

    const path = require('path')  module.exports = {     \/\/ \u57fa\u672c\u8def\u5f84     \/\/ publicPath: '\/',      \/\/ \u8f93\u51fa\u6587\u4ef6\u76ee\u5f55     \/\/ outputDir: 'dist',      \/\/ assetsDir: '',      \/\/ \u73af\u5883\u914d\u7f6e     devServer: {         \/\/ host: 'localhost',         \/\/ port: 8080,         \/\/ \u662f\u5426\u5f00\u542f https         https: false,         \/\/ \u7f16\u8bd1\u5b8c\u662f\u5426\u6253\u5f00\u7f51\u9875         open: false,                  \/\/ \u4ee3\u7406\u914d\u7f6e         \/\/ proxy: {         \/\/     '^\/api': {         \/\/         target: '<url>',         \/\/         ws: true,         \/\/         changeOrigin: true         \/\/     },         \/\/     '^\/foo': {         \/\/         target: '<other_url>'         \/\/     }         \/\/ }     },      \/\/ webpack \u914d\u7f6e     chainWebpack: config => {         \/\/ \u914d\u7f6e\u8def\u5f84\u522b\u540d         config.resolve.alias             .set('@', path.join(__dirname, 'src'))             .set('@assets', path.join(__dirname, 'src\/assets'))             .set('@components', path.join(__dirname, 'src\/components'))             .set('@views', path.join(__dirname, 'src\/views'))     } } <\/code><\/pre>\n
    vue3.0 \u4e3b\u5165\u53e3 main.js \u914d\u7f6e<\/h2>\n
    \u5f15\u5165\u4e00\u4e9b\u516c\u5171\u7ec4\u4ef6 \/\u6837\u5f0f\uff0c\u72b6\u6001\u7ba1\u7406\u53ca\u8def\u7531\u3002<\/p>\n
    import { createApp } from 'vue' import App from '.\/App.vue'  \/\/ \u5f15\u5165 vuex \u548c\u8def\u7531\u914d\u7f6e import store from '.\/store' import router from '.\/router'  \/\/ \u5f15\u5165 js import '@assets\/js\/fontSize'  \/\/ \u5f15\u5165\u516c\u5171\u7ec4\u4ef6 import Plugins from '.\/plugins'  const app = createApp(App)  app.use(store) app.use(router) app.use(Plugins)  app.mount('#app') <\/code><\/pre>\n
    vue3.0 \u5b9e\u73b0\u8868\u5355\u9a8c\u8bc1<\/h2>\n
    vue \u4e2d\u64cd\u4f5c ref \u3001reactive \u7b49\u54cd\u5e94\u51fd\u6570\u3002<\/p>\n
    <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('\u624b\u673a\u53f7\u4e0d\u80fd\u4e3a\u7a7a\uff01')             }else if(!utils.checkTel(formObj.tel)){                 Snackbar('\u624b\u673a\u53f7\u683c\u5f0f\u4e0d\u6b63\u786e\uff01')             }else if(!formObj.pwd){                 Snackbar('\u5bc6\u7801\u4e0d\u80fd\u4e3a\u7a7a\uff01')             }else{                 ctx.$store.commit('SET_TOKEN', utils.setToken());                 ctx.$store.commit('SET_USER', formObj.tel);                  \/\/ ...             }         }          return {             formObj,             handleSubmit         }     } } <\/script> <\/code><\/pre>\n
    vue3.0 \u804a\u5929\u7f16\u8f91\u5668<\/h2>\n
    \u9879\u76ee\u4e2d\u804a\u5929\u7f16\u8f91\u6846\u90e8\u5206\uff0c\u62bd\u79bb\u4e86\u4e00\u4e2a\u516c\u5171 chatEditor \u7ec4\u4ef6\u3002<\/p>\n
    \u652f\u6301\u5728\u5149\u6807\u5904\u63d2\u5165 emoj \u8868\u60c5\u3001\u591a\u884c\u6587\u672c\u6362\u884c\u3001\u5220\u9664\u5149\u6807\u5904\u5185\u5bb9\u7b49\u529f\u80fd\u3002<\/p>\n
    \"vue3.0<\/p>\n
    \/**  * @Desc     Vue3.0 \u5b9e\u73b0\u6587\u5b57+emoj \u8868\u60c5\u6df7\u6392  * @Time     andy by 2021-01  * @About    Q\uff1a282310962  wx\uff1axy190310  *\/ <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,             })              \/\/ ...              \/\/ \u83b7\u53d6\u5149\u6807\u6700\u540e\u4f4d\u7f6e             const getLastCursor = () => {                 let sel = window.getSelection()                 if(sel && sel.rangeCount > 0) {                     return sel.getRangeAt(0)                 }             }               \/\/ \u5149\u6807\u5904\u63d2\u5165\u5185\u5bb9 @param html \u9700\u8981\u63d2\u5165\u7684\u5185\u5bb9             const insertHtmlAtCursor = (html) => {                 let sel, range                 if(window.getSelection) {                     \/\/ IE9 \u53ca\u5176\u5b83\u6d4f\u89c8\u5668                     sel = window.getSelection()                      \/\/ ##\u6ce8\u610f\uff1a\u5224\u65ad\u6700\u540e\u5149\u6807\u4f4d\u7f6e                     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> <\/code><\/pre>\n
    ok\uff0c\u4ee5\u4e0a\u5c31\u662f\u57fa\u4e8e vue3 \u5f00\u53d1\u804a\u5929\u5b9e\u4f8b\u7684\u4ecb\u7ecd\uff0c\u5e0c\u671b\u5927\u5bb6\u80fd\u559c\u6b22~~<\/p>\n
    uni-app \u76f4\u64ad\u5b9e\u4f8b|uniapp+vue \u4eff\u6296\u97f3\u5c0f\u89c6\u9891<\/p>\n
    \"vue3.0<\/p>\n<\/p><\/div>\n
     \u5927\u4f6c\u6709\u8a71\u8aaa<\/b> (19<\/span>)        <\/div>\n
     <\/div>\n<\/p><\/div>\n<\/p><\/div>\n
      \n
    • \n
      \n
      \n
       \u8cc7\u6df1\u5927\u4f6c : kaka6 <\/span>  <\/div>\n
       <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                   \u5927\u5bb6\uff0c\u4f18\u79c0                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
    • \n
      \n
      \n
       \u8cc7\u6df1\u5927\u4f6c : ggabc <\/span>  <\/div>\n
       <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                   \u6295\u5165\u5e94\u7528\u53d1\u6325\u6700\u5927\u4ef7\u503c                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
    • \n
      \n
      \n
       \u8cc7\u6df1\u5927\u4f6c : HeyXiao <\/span>  <\/div>\n
       <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                   \u8bf7\u95ee\u6709 git \u5417                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
    • \n
      \n
      \n
       \u8cc7\u6df1\u5927\u4f6c : fpure <\/span>  <\/div>\n
       <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                   GitHub \u94fe\u63a5\uff1f                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
    • \n
      \n
      \n
       \u8cc7\u6df1\u5927\u4f6c : Lemeng <\/span>  <\/div>\n
       <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                   \u6709 github \u5417\uff0c\u6211\u8981 fork\u2018\uff0c\u54c8\u54c8                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
    • \n
      \n
      \n
       \u8cc7\u6df1\u5927\u4f6c : itdog888 <\/span>  <\/div>\n
       <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                   \u6c92\u6e90\u78bc\uff1f                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
    • \n
      \n
      \n
       \u8cc7\u6df1\u5927\u4f6c : dengshen <\/span>  <\/div>\n
       <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                   \u4f18\u79c0\u3002\u6e90\u7801\u6709\u5417\uff1f                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
    • \n
      \n
      \n
       \u8cc7\u6df1\u5927\u4f6c : yazoox <\/span>  <\/div>\n
       <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                   \u725b x\uff0c\u53ef\u60dc\uff0c\u6ca1\u6709 github \u5730\u5740                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
    • \n
      \n
      \n
       \u8cc7\u6df1\u5927\u4f6c : sanchez0623 <\/span>  <\/div>\n
       <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                   \u4f18\u79c0\u554a\uff0c\u6211\u4e5f\u5728\u5b66 vue                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
    • \n
      \n
      \n
       \u8cc7\u6df1\u5927\u4f6c : sam014 <\/span>  <\/div>\n
       <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                   \u4f18\u79c0                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
    • \n
      \n
      \n
       \u8cc7\u6df1\u5927\u4f6c : mepwang <\/span>  <\/div>\n
       <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                   \u6ca1 github\uff0c\u4e00\u4e0b\u5b50\u4ece\u6280\u672f\u5206\u4eab\u6ca6\u4e3a\u5e7f\u544a                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
    • \n
      \n
      \n
       \u8cc7\u6df1\u5927\u4f6c : JustinDeng <\/span>  <\/div>\n
       <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                   \u5f88\u4f18\u79c0~ \u4f46\u662f\u4e0d\u653e\u6e90\u7801 \u4ece\u6280\u672f\u5171\u4eab\u53d8\u6210\u5e7f\u544a\u4e86~                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
    • \n
      \n
      \n
       \u8cc7\u6df1\u5927\u4f6c : efsg <\/span>  <\/div>\n
       <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                   \u4e00\u773c\u4ee5\u4e3a\u662f QQ                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
    • \n
      \n
      \n
       \u8cc7\u6df1\u5927\u4f6c : sanmuisme <\/span>  <\/div>\n
       <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                   qq \u5427 \u600e\u4e48\u662f\u5fae\u4fe1                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
    • \n
      \n
      \n
       \u8cc7\u6df1\u5927\u4f6c : ditel <\/span>  <\/div>\n
       <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                   \u8fd9\u754c\u9762\u989c\u8272\uff0c\u4e0d\u662f qq \u5417                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
    • \n
      \n
      \n
       \u8cc7\u6df1\u5927\u4f6c : milukun <\/span>  <\/div>\n
       <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                   \u54c8\u54c8 \u7b2c\u4e00\u611f\u89c9\u662f qq                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
    • \n
      \n
      \n
       \u8cc7\u6df1\u5927\u4f6c : beginor <\/span>  <\/div>\n
       <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                   \u540c\u6c42\u6e90\u7801\uff0c\u51c6\u5907\u5b66\u4e60 vue3                                                             <\/div>\n<\/p><\/div>\n<\/li>\n
    • \n
      \n
      \n
       \u8cc7\u6df1\u5927\u4f6c : musi <\/span>  <\/div>\n
       <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                   \u4f60\u662f\u4e0d\u662f\u5bf9\u9ad8\u4eff\u6709\u4ec0\u4e48\u8bef\u89e3\uff1f\u8fd9\u54ea\u91cc\u50cf\u5fae\u4fe1\u4e86\uff1f                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
    • \n
      \n
      \n
       \u8cc7\u6df1\u5927\u4f6c : telami <\/span>  <\/div>\n
       <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                   \u591a\u5c11\u94b1\uff0c\u600e\u4e48\u8054\u7cfb                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
    • \n","protected":false},"excerpt":{"rendered":"
      vue3.0 \u9ad8\u4eff\u5fae\u4fe1 app \u754c…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[],"tags":[],"_links":{"self":[{"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/posts\/272491"}],"collection":[{"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=272491"}],"version-history":[{"count":1,"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/posts\/272491\/revisions"}],"predecessor-version":[{"id":272495,"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/posts\/272491\/revisions\/272495"}],"wp:attachment":[{"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=272491"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=272491"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=272491"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}