使用 Electron-Vue 开发的桌面应用 _组件

这是由& Vue.js 编写的，为程序员服务的编程工具
目前提供了四个版块：
项目地址：
地址：
感兴趣的朋友可以关注一下，或者贡献代码；
【使用 Electron-Vue 开发的桌面应用】下面介绍一下我写正则表达式内容，写的不好，望见谅...
-vue
克隆项目，从 -vue 克隆项目，然后开始编写代码；
通过"正则表达式"这个模块，来了解 Vue 组件通信；
-vue 一开始已经为你生成一些文件页面，我们可以按照他的方法创建我们自己的页面；
创建路由：
src///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 ，并且了组件，这个组件要放置在目录下，所以我创建了文件：src///.vue

文章插图
编写组件：
可以通过复制 .vue 组件，将它改成新组件即可：
要实现这个页面，头部两个输入框，输入后都能与下面的内容进行比较处理，得出结论；
这个用组件化 vue 比纯粹用 js的 dom 操作要方便太多了；
通过包裹写成 vue 组件：

Your regular expression://Your test string: {{ regexResult['content'] }}Match Result:Clean Fields{{ cont }}Match Groups:Match Group {{ index + 1 }}:{{ i }}: {{ item }}
{{ regexResult['content'] }}* {}

至于，输入框之间的交互，我使用 vuex 来实现他们之间数据的传递；
使用 Vuex 管理状态：一、创建 store 目录，并创建目录用来管理不同的命名空间的 State, ,创建 src//store//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}

在方法中使用，并定义其他方法来调用这些；
二、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 = axiosVue.config.productionTip = falsenew Vue({components: { App },router,store,template: ''}).$mount('#app')

三、组件中通过或 data 使用 State ，通过触发方法