使用Electron-Vue開(kāi)發(fā)的桌面應(yīng)用

這是由 Electron & Vue.js 編寫(xiě)的，為程序員服務(wù)的編程工具

白云ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書(shū)未來(lái)市場(chǎng)廣闊！成為創(chuàng)新互聯(lián)的ssl證書(shū)銷(xiāo)售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18982081108（備注：SSL證書(shū)合作）期待與您的合作！

目前提供了四個(gè)版塊：

正則表達(dá)式
時(shí)間戳轉(zhuǎn)化
顏色盒子
Json 轉(zhuǎn)化
在這幾個(gè)模塊中，可以發(fā)現(xiàn)使用組件化的好處，處理多個(gè)組件之間各種數(shù)據(jù)變化非常方便！

使用 Electron-Vue 開(kāi)發(fā)的桌面應(yīng)用

項(xiàng)目地址：

Github 地址：https://github.com/TsaiKoga/it-tools

感興趣的朋友可以關(guān)注一下，或者貢獻(xiàn)代碼；

下面介紹一下我寫(xiě) 正則表達(dá)式內(nèi)容，寫(xiě)的不好，望見(jiàn)諒...

electron-vue

克隆項(xiàng)目，從 electron-vue 克隆項(xiàng)目，然后開(kāi)始編寫(xiě)代碼；

https://github.com/SimulatedGREG/electron-vue.git
通過(guò)"正則表達(dá)式"這個(gè)模塊，來(lái)了解 Vue 組件通信；

electron-vue 一開(kāi)始已經(jīng)為你生成一些文件頁(yè)面，我們可以按照他的方法創(chuàng)建我們自己的頁(yè)面；

創(chuàng)建路由：
src/renderer/router/index.js 文件中添加路由：

export default new Router({
  routes: [
    {
      path: '/',
      name: 'landing-page',
      component: require('@/components/LandingPage').default
    },
    {
      path: '/regex-page',
      name: 'regex-page',
      component: require('@/components/RegexPage').default
    }
]
});

這里我們的 url 為 /regex-page，并且 require 了 RegexPage 組件，這個(gè)組件要放置在 components 目錄下，所以我創(chuàng)建了文件：src/renderer/components/RegexPage.vue

編寫(xiě)組件：
可以通過(guò)復(fù)制 LandingPage.vue 組件，將它改成新組件即可：

要實(shí)現(xiàn)這個(gè)頁(yè)面，頭部?jī)蓚€(gè)輸入框，輸入后都能與下面的 textarea 內(nèi)容進(jìn)行比較處理，得出結(jié)論；

這個(gè)用組件化 vue 比純粹用 js jquery 的 dom 操作要方便太多了；

通過(guò) template 包裹寫(xiě)成 vue 組件：

<template>
  <div id="regex-page">
　　　　<div class="regex-inner" v-show="currentTab === 'Home'">
        　　　　<div class="regex-top">
          　　　　　　<div class="regex-top-label">
            　　　　　　　　<label>Your regular expression:</label>
          　　　　　　</div>
          　　　　　　<div class="regex-top-fields">
            　　　　　　　　<div class="regex-diagonal">/</div>
            　　　　　　　　<div class="regex-diagnoal-input">
              　　　　　　　　　　<input type="text" name="regex-exp" @input='execRegex' :value='regexExp' />
            　　　　　　　　</div>

 　　　　　　　　<div class="regex-diagonal">/</div>
            　　　　　　　　<div>
              　　　　　　　　　　<input type="text" name="regex-opt" @input="execRegex" :value="regexOpt" />
            　　　　　　　　</div>
          　　　　　　</div>
        　　　　　</div>

 　　　　　<div class="regex-bottom">
          　　　　　　<div class="regex-content">
            　　　　　　　　<label>Your test string: </label>
            　　　　　　　　<textarea class="regex-textarea" name="regex-content" @input="execRegex" :value='regexCont'></textarea>
          　　　　　　</div>

 　　　　　　<div class="result-content result-init" v-if="regexResult['status'] == 0">
            　　　　　　　　{{ regexResult['content'] }}
          　　　　　　</div>

          　　　　　　<div class="result-content result-match" v-if="regexResult['status'] == 1">
            　　　　　　　　<div>
              　　　　　　　　　　<div class="regex-match-btn">
                　　　　　　　　　　　　<label>Match Result:</label>
                　　　　　　　　　　　　<a href="javascript:void(0)" class="clean-fields" @click="cleanAllFields">Clean Fields</a>
              　　　　　　　　　　</div>
              　　　　　　　　　　<div class="result-item">
　　　　　　　　　　　　<span v-for="(cont, indx) in regexResult['matchedContext']" :class="indx%2 !== 0 ? 'match' : null">{{ cont }}</span>
              　　　　　　　　　　</div>
            　　　　　　　　</div>
            　　　　　　　　<ul v-if="regexResult['content'].length > 0">
              　　　　　　　　　　<label>Match Groups:</label>
              　　　　　　　　　　<div class="match-groups">
                　　　　　　　　　　　　<li v-for="(itemGroup, index) in regexResult['content']">
                  　　　　　　　　　　　　　　<div class="group-item">
                    　　　　　　　　　　　　　　<label>Match Group {{ index + 1 }}:</label>
                    　　　　　　　　　　　　　　<ul>
                      　　　　　　　　　　　　　　　　<li v-if="i !== 0" v-for="(item, i) in itemGroup">{{ i }}: {{ item }}</li>
                    　　　　　　　　　　　　　　</ul>
                  　　　　　　　　　　　　　　</div>
                　　　　　　　　　　　　</li>
              　　　　　　　　　　</div>
            　　　　　　　　</ul>
          　　　　　　　　</div>

 　　　　　　　　<div class="result-content result-not-match" v-if="regexResult['status'] == -1">
            　　　　　　　　　　{{ regexResult['content'] }}
          　　　　　　　　</div>
        　　　　　　</div>
      　　　　</div>
</div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  name: 'regex-page',
  computed: {
    ...mapState('Regex', {
      regexExp: state => state.regexExp,
      regexOpt: state => state.regexOpt,
      regexCont: state => state.regexCont,
      regexResult: state => state.regexResult})
  },

    methods: {
    ...mapActions('Regex', [
      'setNav',
      'cleanFields',
      'regexMatch'
    ]),
    cleanAllFields () {
      this.cleanFields()
    },
    execRegex (event) {
      this.regexMatch(event)
    },
    updateNav (title, index) {
      this.setNav({ title: title, index: index })
    }

  }

}
</script>
<style lang="scss" scoped>
 * {

  }
</style>

至于，輸入框之間的交互，我使用 vuex 來(lái)實(shí)現(xiàn)他們之間數(shù)據(jù)的傳遞；

使用 Vuex 管理狀態(tài)：一、創(chuàng)建 store 目錄，并創(chuàng)建 modules 目錄用來(lái)管理不同的命名空間的 State, Actions, Mutations 創(chuàng)建 src/renderer/store/modules/Regex.js 文件：

const state = {
  regexExp: '',
  regexOpt: '',
  regexCont: '',
  regexResult: { status: 0, content: "Here's result." }
}

const mutations = {
  REGEX_MATCH (state, target) {
    if (target.name === 'regex-exp') {
      state.regexExp = target.value
    }
    if (target.name === 'regex-opt') {
      state.regexOpt = target.value
    }
    if (target.name === 'regex-content') {
      state.regexCont = target.value
    }
    ...
}

const actions = {
  cleanFields ({ commit }) {
    commit('CLEAN_FIELDS')
  },
  regexMatch ({ commit }, payload) {
    commit('REGEX_MATCH', payload.target)
  }
}

export default {
  state,
  mutations,
  actions
}

state 給默認(rèn)狀態(tài)；
mutations 更改對(duì)應(yīng) state ；
actions 用于寫(xiě)異步來(lái)改變狀態(tài)或提交 mutations 的更改；
state 的方法被我寫(xiě)在 computed，這樣組件中可以使用；

在 methods 方法中使用 mapActions，并定義其他方法來(lái)調(diào)用這些 action ；

二、main.js 加入 store 容器

import App from './App'
import router from './router'
import store from './store'

if (!process.env.IS_WEB) Vue.use(require('vue-electron'))
Vue.http = Vue.prototype.$http = axios
Vue.config.productionTip = false

new Vue({
  components: { App },
  router,
  store,
  template: '<App/>'
}).$mount('#app')

三、組件中通過(guò) computed 或 data 使用 State，通過(guò) methods 觸發(fā) Actions 方法

import { mapState, mapActions } from 'vuex'

export default {
  name: 'regex-page',
  computed: {
    ...mapState('Regex', {
      regexExp: state => state.regexExp,
      regexOpt: state => state.regexOpt,
      regexCont: state => state.regexCont,
      regexResult: state => state.regexResult})
    },

    methods: {
    ...mapActions('Regex', [
      'setNav',
      'cleanFields',
      'regexMatch'
    ]),
    cleanAllFields () {
      this.cleanFields()
    },
    execRegex (event) {
      this.regexMatch(event)
    },
    updateNav (title, index) {
      this.setNav({ title: title, index: index })
    }

  }
}

在組件文件中引用了

mapState, mapActions 方法，他可以獲取這個(gè) store 里的 state 和 action 方法，

不過(guò)要注意命名空間的使用，此處使用了 Regex 作為命名空間，所以要在 mapState 和 mapActions 中加命名空間；

命名空間定義文件在：src/renderer/store/modules/index.js 文件；

const files = require.context('.', false, /\.js$/)
const modules = {}

files.keys().forEach(key => {
  if (key === './index.js') return
  modules[key.replace(/(\.\/|\.js)/g, '')] = files(key).default
  modules[key.replace(/(\.\/|\.js)/g, '')]['namespaced'] = true
})

export default modules

但是直接 (‘ Regex ’, [regexExp: state => state.regexExp]) 是無(wú)法使用的，必須在 module 中聲明 namespaced: true 才可以；

… mapActions() 是將里面的對(duì)象扁平化到外面的對(duì)象中；

直接 mapActions 只是打開(kāi)了方法，還未執(zhí)行：

刪除 createSharedMutations() 的方法后，action 生效；

綁定到組件上

<input type="text" name="regex-exp" @input='execRegex' value='regexExp' />

生成桌面應(yīng)用

運(yùn)行命令：

npm run build:mas # 生成 mac 應(yīng)用
npm run build:linux # 生成 linux 應(yīng)用
npm run build:win32 # 生成 windows 應(yīng)用

可以在 /build 目錄中看到生成的應(yīng)用目錄

文章題目：使用Electron-Vue開(kāi)發(fā)的桌面應(yīng)用
本文URL：http://aaarwkj.com/article32/gjoisc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、微信公眾號(hào)、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、響應(yīng)式網(wǎng)站、網(wǎng)站策劃、面包屑導(dǎo)航

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区