NW.js入门

最新推荐文章于 2024-08-09 08:11:25 发布

我是全栈架构师

最新推荐文章于 2024-08-09 08:11:25 发布

阅读量1.1k

点赞数

分类专栏： nodejs

本文链接：https://blog.csdn.net/mxj588love/article/details/78932275

版权

nodejs 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

下载官方sdk https://nwjs.io/
解压sdk;
在根目录新建文件夹,myapp, 在myapp中新建index.html

<html>
<head>
<title>shellDemo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.min.css" />
<script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
</head>
<style type="text/css">
    body{
        background-color: #EEEEEE;
    }
    .drag{
        -webkit-app-region:drag;
    }
</style>
<body >
<div style="height:35px; font-size: 25px; line-height: 35px; padding-left: 5px; padding-right: 10px" class="bg-primary drag">
            <img src="logo.png" height="30" /> 
            <span class="caret pull-right" style="margin-top:5px"></span>
</div>
<div class="container" id="vueapp">
    <div class="panel panel-default center-block" style="width: 380px; margin-top: 10%">
        <div class="panel-heading">
            <div class="panel-title">Login</div>
        </div>
        <div class="panel-body">
            <form class="form">
                <div class="form-group">
                    <label>UserName:</label>
                    <input type="text" class="form-control" v-model="user.userName" />
                </div>
                <div class="form-group">
                    <label>Password:</label>
                    <input type="Password" class="form-control" />
                </div>
                <div class="form-group">
                    <label class="checkbox-inline">
                        <input type="checkbox" /> Remenber Me
                    </label>
                </div>
            </form>
        </div>
        <div class="panel-footer">
            <button class="btn btn-default" v-on:click="login()">Login</button>
        </div>
    </div>
</div>
<script type="text/javascript">

    var vue = new Vue({
        el:'#vueapp',
        data:{
            user:{}
        },
        methods:{
            login: function(){
                alert(this.user.userName);
            }
        }
    });
</script>
</body>
</html>

在根目录新建package.json, 内容如下:

{
    "main": "myapp/index.html",
    "name": "demo",
    "description": "demo app of node-webkit",
    "version": "0.1.0",
    "keywords": [ "demo", "node-webkit" ],
    "nodejs": true,
    "window": {
        "title": "node-webkit demo",
        "icon": "link.png",
        "toolbar": true,
        "frame": false,
        "width": 1000,
        "height": 600,
        "position": "center",
        "min_width": 400,
        "min_height": 200,
        //"max_width": 800,
        //"max_height": 600,
        "resizable" :true,
        "show_in_taskbar": true,
        "kiosk": false
    },
    "webkit": {
        "plugin": true
    }
}