A simple web desktop based on Vue.js
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
README.md
dev.js
package.json
webpack.config.js

README.md

Desktop-simulation

Demo: http://demo.ruosen.io/desktop-simulation/

Init

npm install

build

npm run build

dev

npm run dev

Add Custom Apps

Write app component code in src/components/apps/, and add desktop icon data to src/data/files.js.

Component (my-app.vue) example:

<style lang="less" rel="stylesheet/less">
    .custom-h1{
        color:red;
    }
</style>
<template>
    <div>
        <h1 class="custom-h1">
            Hello World!
        </h1>
    </div>
</template>

<script>
    module.exports = {
        props:{
            app:true
        },
        data: function () {
            return {}
        },
        methods: {},
        components: {},
        ready: function () {

        }
    }
</script>

Icon data example:

{
    name:"MyApp",
    app:"my-app", // app component's file name
    icon:"", // defined in css .icon
    options:{      // options will be extended to App Class's instance , it can be a function that returns options object
        data:{  
        },
        singleton:true,
        width: function () {  // value can be a function that returns dynamic value; 
            return $(window).width() * 0.8;
        }
    }
}