大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这是由 Electron & Vue.js 编写的,为程序员服务的编程工具
白云ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景,ssl证书未来市场广阔!成为创新互联的ssl证书销售渠道,可以享受市场价格4-6折优惠!如果有意向欢迎电话联系或者加微信:18982081108(备注:SSL证书合作)期待与您的合作!
目前提供了四个版块:
Github 地址:https://github.com/TsaiKoga/it-tools
感兴趣的朋友可以关注一下,或者贡献代码;
下面介绍一下我写 正则表达式内容,写的不好,望见谅...
克隆项目,从 electron-vue 克隆项目,然后开始编写代码;
https://github.com/SimulatedGREG/electron-vue.git
通过"正则表达式"这个模块,来了解 Vue 组件通信;
electron-vue 一开始已经为你生成一些文件页面,我们可以按照他的方法创建我们自己的页面;
创建路由:
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 组件,这个组件要放置在 components 目录下,所以我创建了文件:src/renderer/components/RegexPage.vue
编写组件:
可以通过复制 LandingPage.vue 组件,将它改成新组件即可:
要实现这个页面,头部两个输入框,输入后都能与下面的 textarea 内容进行比较处理,得出结论;
这个用 组件化 vue 比纯粹用 js jquery 的 dom 操作要方便太多了;
通过 template 包裹写成 vue 组件:
/
/
{{ regexResult['content'] }}
{{ cont }}
-
- {{ i }}: {{ item }}
{{ regexResult['content'] }}
至于,输入框之间的交互,我使用 vuex 来实现他们之间数据的传递;
使用 Vuex 管理状态: 一、创建 store 目录,并创建 modules 目录用来管理不同的命名空间的 State, Actions, Mutations 创建 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 给默认状态;
mutations 更改对应 state ;
actions 用于写异步来改变状态或提交 mutations 的更改;
在 methods 方法中使用 mapActions,并定义其他方法来调用这些 action ;
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: ' '
}).$mount('#app')
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 方法,他可以获取这个 store 里的 state 和 action 方法,
不过要注意命名空间的使用,此处使用了 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]) 是无法使用的,必须在 module 中声明 namespaced: true 才可以;
… mapActions() 是将里面的对象 扁平化 到 外面的对象中;
直接 mapActions 只是打开了方法,还未执行:
删除 createSharedMutations() 的方法后,action 生效;
绑定到组件上
运行命令:
npm run build:mas # 生成 mac 应用
npm run build:linux # 生成 linux 应用
npm run build:win32 # 生成 windows 应用
可以在 /build 目录中看到生成的应用目录