.net vue漂亮登录界面_Electron/vue、vuex、element、axios and cordova等接触....

最近公司Android项目这边没太多事情，新版本也暂时没需要做开发。然后公司目前要做一个政府通的项目，给政府或者给内部人员使用。之前考虑的是Windows端，采用winform的形式做开发。一直有招人，也没招到合适的。我之前有接触过这块，当时跟领导说可以辅助。再到后来搬了一个新的办公地点，然后又考虑了下Teambition采用的方案，貌似就是Documentation | Electron这个东东。然后前端人员就看了看，说可以搞，说干就干。

1. 目前大概理解就是Documentation | Electron给html页面包了一层Windows的外壳，这个外壳作为主进程运行着，内部维护了一个渲染(render)进程用来渲染页面，然后主进程可以和渲染进程之间可以进行通讯。主进程可以进行一些托盘，电池、任务栏、省电、放大、缩小等一些事件的处理。如果有需要通知到渲染进程，比如某个页面需要收到系统通知消息，然后弹出提示，就可以托盘收到消息，然后通知给渲染进程，进而实现渲染进程的系统级通知。

2. Electron又配合起步 · electron-vue来做开发，vue作为比较强大的JavaScript MVVM库，给前端开发带来了简单快速的开发方式。另外还可以配合脚手架快速搭建工程环境，快速进行开发、打包。

至于与其他的对比，网上很多说法，主要看公司如何选型。

https://blog.csdn.net/weixin_41879988/article/details/81638474

React、Angular和Vue三种最流行的前端框架哪一个最好？

3. 界面配合The world's most popular Vue UI framework Element可以满足大部分需求

4. 网络配合 axios中文文档|axios中文网 较容易进行网络请求封装处理

5. 状态存储可以配合开始 | Vuex 进行组件状态的管理（比如：登录后我们进行用户信息的存储，然后同时提供getters来获取用户登录token等信息用于进一步用户相关数据的请求；当然也可以配合localstorage做永久存储）

以上就是上周(2019.05.01之前的那周）跟前端开发人员一起搞了下环境的搭建和安装，基本上参考上面几个官方文档就行。有些问题遇到了就网上查了下，最后基本都解决了。一般搭建环境总会遇到一些问题的。小萌新本来只是打算搞Android以及跨平台方面的，比如react-navtive、weex、flutter其中一个的。但领导安排一起搞，那就一起搞搞，说不定后面做跨平台App有所帮助了。

o_o. 这里还有几篇关于移动跨平台框架对比和感受建议的文章:

https://blog.csdn.net/sl_40/article/details/79637320

Flutter将会秒杀RN？行业高手为你细细道来-紫金网

https://blog.csdn.net/makercloud/article/details/81560987

angular、react、vue 三大前端框架适用场景

国内有哪些用angular做的比较好的移动端webapp_百度知道

html + css麻烦熟悉一下，O(∩_∩)O哈哈~

angular - 适合大型项目/PC，移动端据说性能不是很好，第二个版本好像移动优先。不过案例不太多

Vue相对轻，容易上手，需要配合Cordova来与原生交互打包

Weex，阿里的，基于Vue.js来的，相对来讲还得看发展，目前纳入Apache孵化，期待发展

React-navtive，Facebook据说准备重写，文档社区相对完善活跃，目前也是很多公司采用........需要熟悉Js的一些语法呀!

Flutter，闲鱼代表作，Google发展中，或许Fuchsia就是它了...需要学习Dart语言，上手有难度

个人感受，目前实用的话，React-navtive可能好些。未来趋势可能Flutter比较可以，毕竟有Google支持以及新系统的支持...谁知道呢？ Vue目前用来开发桌面，或者一些小型应用貌似也还不错，做了直接转Weex貌似很直接。 angular目前来说移动端暂无考虑！

最后看自己如何考虑....

6. 既然协助前端搞Electron ，就顺便看看Vue如何配合Apache Cordova 进行Android的开发...至于其他细节如果用到该方式就可以抓紧干就完事了！

前面环境都搭建好了，基本上照着如下网友步骤没啥大问题

cordova+vue 项目打包成Android（apk）应用

接下来，就可以尝试进行Vue的开发了哟。html,css要熟悉的呀...不然写页面好慢呀....开发好了就可以打包成Android应用瞅瞅了....

可能路还很长，很长，这里小萌新记录下吧。小萌新也没那么多精力做那么多事情，只是遇到了就留个印象，也对跨平台开发做个了解嘛！

关于Vue小萌新也花了一天做了一个入门练习，html+css相关明天也练习哈吧，(#^.^#)

Vue.js 入门教程 | 菜鸟教程

vueapp.js

Vue.filter('reverses', function (value) {
    return value.split('').reverse().join('')
}),
// 2.0及以后要自己定义过滤器
Vue.filter('uppercase', function (value) {
    if (!value) { return ''}
    value = value.toString()
    return value.toUpperCase()
}),
new Vue({
    el: '#app',
    data: {
        message: '菜鸟呀菜鸟!',
        todos: [
            { text: 'Jsa' },
            { text: 'Jsb' },
            { text: 'JSc' }
        ]
    }
}),
new Vue({
    el: '#app2',
    data: {
        todos: [
            { text: 'JS' },
            { text: 'JS2' },
            { text: 'JS3' }
        ],
        bShow: true
    }
}),
// 接收保存，之后通过test.的方式操作内部变量等属性
test = new Vue({
    el: '#app3',
    data: {
        message3: 'Hello World!'
    }
}),
new Vue({
    el: '#appc',
    data: {
        msg: '你好鸭!',
        url: 'https://cn.bing.com'
    },
    methods: {
        say (msg) {
            alert(msg)
        },
        say2 () {
            alert(this.msg)
        }
    }
})

vueapp.html

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
    <p>{{ message }}</p>
    <p>{{'www.runoob.com' | reverses}}</p>
    <input v-model="message">
    <ul>
        <li v-for="todo in todos">
            {{ todo.text | uppercase }}
        </li>
    </ul>
</div>
<div id="app3">
    <p>{{ message3 }}</p>
    <input v-model="message3">
</div>
<div id="app2">
    <ul>
        <li v-for="todo in todos">
            {{ todo.text }}
        </li>
    </ul>
    <p v-if="2 > 1">2货</p>
    <h1 v-if="bShow">yes</h1>
    <h1 v-else>no</h1>
    <template v-if="bShow">
        <h1>我靠</h1>
    </template>
    <h1 v-show="!bShow" style="background:#000; color:#FFF">你看我</h1>
</div>
<div id="appc">
    <a v-on:click="say('Hi')">点击say</a>
    <a @click="say2">点击say2</a>

    <a href="http://www.baidu.com">百度</a>
    <a href="url">不用指令怎么解析呢？</a>
    <a v-bind:href="url">必应</a>
    <a :href="url">必应2</a>
</div>
<!-- JavaScript 外部单独js文件；代码需要放在尾部（指定的HTML元素之后） -->
<script src="vueapp.js"> 
</script>
<!-- 内置js方式 test接收保存 -->
<!-- <script>
    // var exampleData = {
    //     message3: 'Hello World!'
    // }
    test = new Vue({
        el: '#app3',
        data: {
            message3: 'Hello World!'
        }
    })
</script> -->