[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_11":-5},"routes/user.$name.topics",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":16},"topics",[34],"user",{"_20":21,"_13":14,"_22":23,"_24":14,"_25":26,"_27":28,"_29":16,"_30":31,"_32":33},"loginname","TsaiKoga","page",1,"limit",20,"total","id","24566","avatar_url","https://avatars1.githubusercontent.com/u/5005072?v=4","githubUsername","create_at","2016-09-04 02:59:13.202","score",25,"topic_count","reply_count",4,"is_star",false,{"_20":35,"_36":21,"_37":38,"_39":40,"_41":42,"_43":44,"_45":33,"_46":33,"_30":47,"_48":49,"_25":50,"_51":52},"40153","author_id","tab","share","content","这是由 Electron & Vue.js 编写的，为程序员服务的编程工具\r\n\r\n目前提供了四个版块：\r\n\r\n- 正则表达式\r\n- 时间戳转化\r\n- 颜色盒子\r\n- Json 转化\r\n\r\n在这几个模块中，可以发现使用组件化的好处，处理多个组件之间各种数据变化非常方便。\r\n当然这里面很多转化都是自己造轮子。。。\r\n![IT Tools](https://github.com/TsaiKoga/it-tools/raw/master/src/renderer/assets/IT-Tools-preview.gif)\r\n\r\n## 项目地址：\r\nGithub 地址：[https://github.com/TsaiKoga/it-tools](https://github.com/TsaiKoga/it-tools)\r\n\r\n## 求 Star\r\n感兴趣的朋友可以 star 或 fork，或是给我你的宝贵意见，互相学习一下\r\n\r\n下面介绍一下我写正则表达式内容，写的不好，望见谅...\r\n\r\n### 下载 electron-vue\r\n克隆项目，从 electron-vue 克隆项目，然后开始编写代码；\r\n```\r\ngit clone https://github.com/SimulatedGREG/electron-vue.git\r\n```\r\n通过\"正则表达式\"这个模块，来了解 Vue 组件通信；\r\n\r\nelectron-vue 一开始已经为你生成一些文件页面，我们可以按照他的方法创建我们自己的页面；\r\n\r\n### 创建路由：\r\nsrc/renderer/router/index.js 文件中添加路由：\r\n\r\n```js\r\nexport default new Router({\r\n routes: [\r\n {\r\n path: '/',\r\n name: 'landing-page',\r\n component: require('@/components/LandingPage').default\r\n },\r\n {\r\n path: '/regex-page',\r\n name: 'regex-page',\r\n component: require('@/components/RegexPage').default\r\n }\r\n]\r\n});\r\n```\r\n\r\n这里我们的 url 为 /regex-page，并且 require 了 RegexPage 组件，这个组件要放置在 components 目录下，所以我创建了文件：src/renderer/components/RegexPage.vue\r\n\r\n#### 编写组件：\r\n可以通过复制 LandingPage.vue 组件，将它改成新组件即可： \r\n\r\n要实现这个页面，头部两个输入框，输入后都能与下面的 textarea 内容进行比较处理，得出结论；\r\n\r\n这个用组件化 vue 比纯粹用 js jquery 的 dom 操作要方便太多了；\r\n\r\n通过 template 包裹写成 vue 组件：\r\n```\r\n\r\n\r\n\r\n\r\n```\r\n\r\n至于，输入框之间的交互，我使用 vuex 来实现他们之间数据的传递；\r\n\r\n### 使用 Vuex 管理状态：\r\n**一、创建 store 目录，并创建 modules 目录用来管理不同的命名空间的 State, Actions, Mutations 创建 src/renderer/store/modules/Regex.js 文件**：\r\n\r\n```\r\nconst state = {\r\n regexExp: '',\r\n regexOpt: '',\r\n regexCont: '',\r\n regexResult: { status: 0, content: \"Here's result.\" }\r\n}\r\n\r\nconst mutations = {\r\n REGEX_MATCH (state, target) {\r\n if (target.name === 'regex-exp') {\r\n state.regexExp = target.value\r\n }\r\n if (target.name === 'regex-opt') {\r\n state.regexOpt = target.value\r\n }\r\n if (target.name === 'regex-content') {\r\n state.regexCont = target.value\r\n }\r\n ...\r\n}\r\n\r\n\r\nconst actions = {\r\n cleanFields ({ commit }) {\r\n commit('CLEAN_FIELDS')\r\n },\r\n regexMatch ({ commit }, payload) {\r\n commit('REGEX_MATCH', payload.target)\r\n }\r\n}\r\n\r\n\r\nexport default {\r\n state,\r\n mutations,\r\n actions\r\n}\r\n```\r\nstate 给默认状态；\r\n\r\nmutations 更改对应 state ；\r\n\r\nactions 用于写异步来改变状态或提交 mutations 的更改；\r\n\r\nstate 的方法被我写在 computed，这样组件中可以使用；\r\n\r\n在 methods 方法中使用 mapActions，并定义其他方法来调用这些 action ；\r\n\r\n**二、main.js 加入 store 容器**\r\n``` js\r\nimport App from './App'\r\nimport router from './router'\r\nimport store from './store'\r\n\r\nif (!process.env.IS_WEB) Vue.use(require('vue-electron'))\r\nVue.http = Vue.prototype.$http = axios\r\nVue.config.productionTip = false\r\n\r\nnew Vue({\r\n components: { App },\r\n router,\r\n store,\r\n template: ''\r\n}).$mount('#app')\r\n```\r\n\r\n**三、组件中通过 computed 或 data 使用 State，通过 methods 触发 Actions 方法**\r\n``` js\r\nimport { mapState, mapActions } from 'vuex'\r\n\r\nexport default {\r\n name: 'regex-page',\r\n computed: {\r\n ...mapState('Regex', {\r\n regexExp: state => state.regexExp,\r\n regexOpt: state => state.regexOpt,\r\n regexCont: state => state.regexCont,\r\n regexResult: state => state.regexResult})\r\n },\r\n\r\n methods: {\r\n ...mapActions('Regex', [\r\n 'setNav',\r\n 'cleanFields',\r\n 'regexMatch'\r\n ]),\r\n cleanAllFields () {\r\n this.cleanFields()\r\n },\r\n execRegex (event) {\r\n this.regexMatch(event)\r\n },\r\n updateNav (title, index) {\r\n this.setNav({ title: title, index: index })\r\n }\r\n\r\n }\r\n}\r\n```\r\n在组件文件中引用了\r\n\r\nmapState, mapActions 方法，他可以获取这个 store 里的 state 和 action 方法，\r\n\r\n不过要注意命名空间的使用，此处使用了 Regex 作为命名空间，所以要在 mapState 和 mapActions 中加命名空间；\r\n\r\n命名空间定义文件在：src/renderer/store/modules/index.js 文件；\r\n``` js\r\nconst files = require.context('.', false, /\\.js$/)\r\nconst modules = {}\r\n\r\nfiles.keys().forEach(key => {\r\n if (key === './index.js') return\r\n modules[key.replace(/(\\.\\/|\\.js)/g, '')] = files(key).default\r\n modules[key.replace(/(\\.\\/|\\.js)/g, '')]['namespaced'] = true\r\n})\r\n\r\nexport default modules\r\n```\r\n\r\n但是直接 (‘ Regex ’, [regexExp: state => state.regexExp]) 是无法使用的，必须在 module 中声明 namespaced: true 才可以；\r\n\r\n… mapActions() 是将里面的对象扁平化到外面的对象中；\r\n\r\n直接 mapActions 只是打开了方法，还未执行：\r\n\r\n删除 createSharedMutations() 的方法后，action 生效；\r\n\r\n**绑定到组件上**\r\n```\r\n\r\n```\r\n\r\n### 生成桌面应用\r\n运行命令：\r\n``` sh\r\nnpm run build:mas # 生成 mac 应用\r\nnpm run build:linux # 生成 linux 应用\r\nnpm run build:win32 # 生成 windows 应用\r\n```\r\n可以在 /build 目录中看到生成的应用目录","title","使用 Electron-Vue 开发的协助程序员的开发工具 IT-Tools","last_reply_at","2019-04-09 06:10:30.846","good","top",2,"visit_count",3447,"2019-03-27 03:36:10.182","author",{"_13":14,"_22":23}]