├── .eslintrc
├── .gitignore
├── Makefile
├── README.md
├── app
    ├── app.vue
    ├── index.html
    ├── index.js
    ├── page1
    │   └── index.vue
    ├── page2
    │   └── index.vue
    └── route.js
├── package.json
└── webpack.config.js


/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "ecmaFeatures": {
 3 |    "blockBindings": true,
 4 |    "forOf": true,
 5 |    "modules": true
 6 |   },
 7 |   "globals": {
 8 |     "document": true,
 9 |     "console": true,
10 |     "setInterval": true,
11 |     "require": true,
12 |     "localStorage": true,
13 |     "export": true
14 |   },
15 |   "env": {
16 |     "browser": true,
17 |     "node": true,
18 |     "es6": true
19 |   },
20 |   "rules": {
21 |     "quotes": [2, "single"],
22 |     "semi": [2, "always"],
23 |     "no-console": 0,
24 |     "strict": 0
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | *.swp
2 | .DS_Store
3 | .sass-cache
4 | *.log
5 | bower_components
6 | node_modules
7 | dist
8 | .idea
9 | /index.html


--------------------------------------------------------------------------------
/Makefile:
--------------------------------------------------------------------------------
1 | install:
2 | 	@npm --registry=http://registry.npm.taobao.org install
3 | 	@if [ ! -f "$$(which webpack)" ]; then sudo npm --registry=http://registry.npm.taobao.org install webpack -g; fi
4 | 
5 | deploy: install
6 | 	@npm run deploy
7 | 
8 | dev: install
9 | 	@npm run dev


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-desktop-starter
 2 | A starter for vue-desktop.
 3 | 
 4 | Used plugins:
 5 | - vue-i18n
 6 | - vue-resource
 7 | - vue-router
 8 | 
 9 | # Usage
10 | 
11 | ```Bash
12 | # Run webpack with watch option
13 | make dev
14 | 
15 | # Run webpack in production mode(use UglifyJs)
16 | make build
17 | 
18 | # Run webpack in deploy mode(use UglifyJs and set public-path)
19 | make deploy
20 | ```
21 | 
22 | # LICENSE
23 | MIT.


--------------------------------------------------------------------------------
/app/app.vue:
--------------------------------------------------------------------------------
  1 | <style>
  2 |   html, body {
  3 |     font: 100% Helvetica, sans-serif;
  4 |     color: #293f54;
  5 |     height: 100%;
  6 |     margin: 0;
  7 |     padding: 0;
  8 |   }
  9 | 
 10 |   body {
 11 |     overflow: hidden;
 12 |   }
 13 | 
 14 |   #aside {
 15 |     box-sizing: border-box;
 16 |     box-shadow: inset -2px 0 6px rgba(41,63,84,0.24);
 17 |     width: 200px;
 18 |     height: 100%;
 19 |     float: left;
 20 |     background: #354052;
 21 |     overflow-x: hidden;
 22 |     overflow-y: auto;
 23 |   }
 24 | 
 25 |   #aside p {
 26 |     margin: 0;
 27 |     padding: 18px 8px;
 28 |     color: #8294aa;
 29 |     font-size: 20px;
 30 |     background-color: rgba(0, 0, 0, 0.28);
 31 |     color: rgba(255, 255, 255, 0.75);
 32 |   }
 33 | 
 34 |   #main {
 35 |     position: relative;
 36 |     margin-left: 200px;
 37 |     height: 100%;
 38 |     padding: 12px;
 39 |     box-sizing: border-box;
 40 |     overflow: auto;
 41 |     background-color: #ecf2f6;
 42 |   }
 43 | 
 44 |   .demolist {
 45 |     list-style: none;
 46 |     padding: 0;
 47 |     margin: 0;
 48 |   }
 49 | 
 50 |   .demolist li {
 51 |     padding: 0;
 52 |     cursor: pointer;
 53 |   }
 54 | 
 55 |   .demolist li:hover a {
 56 |     background-color: #2b3647;
 57 |   }
 58 | 
 59 |   .demolist .v-link-active {
 60 |     background-color: #0f141e;
 61 |     font-weight: 400;
 62 |   }
 63 | 
 64 |   .demolist .v-link-active:hover {
 65 |     background-color: #0f141e;
 66 |   }
 67 | 
 68 |   .demolist a {
 69 |     padding: 8px 30px;
 70 |     display: block;
 71 |     color: #c0cad8;
 72 |     text-decoration: none;
 73 |     transition: background-color .3s;
 74 |     font-size: 16px;
 75 |     text-align: left;
 76 |   }
 77 | 
 78 |   #aside .demoheader h3 {
 79 |     color: #8294aa;
 80 |   }
 81 | 
 82 |   #aside .accordion-content {
 83 |     padding: 0;
 84 |   }
 85 | 
 86 |   .container {
 87 |     height: 100%;
 88 |   }
 89 | </style>
 90 | 
 91 | <template>
 92 |   <div class="container">
 93 |     <div id="aside">
 94 |       <p class="title">Starter Page</p>
 95 |       <d-accordion type="transparent">
 96 |         <d-accordion-panel class="demoheader" title="Example" active>
 97 |           <ul class="demolist">
 98 |             <li><a v-link="{ path: '/page1' }">Page1</a></li>
 99 |             <li><a v-link="{ path: '/page2' }">Page2</a></li>
100 |           </ul>
101 |         </d-accordion-panel>
102 |       </d-accordion>
103 |     </div>
104 | 
105 |     <div id="main">
106 |       <router-view></router-view>
107 |     </div>
108 |   </div>
109 | </template>
110 | 
111 | <script type="text/ecmascript-6">
112 |   export default {
113 |     data() {
114 |       return {};
115 |     },
116 | 
117 |     methods: {
118 |     },
119 | 
120 |     ready() {
121 |     }
122 |   }
123 | </script>
124 | 


--------------------------------------------------------------------------------
/app/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <title>Your app title</title>
 6 |   <link href="{%= o.htmlWebpackPlugin.files.chunks.app.css[0] %}" rel="stylesheet">
 7 | </head>
 8 | <body>
 9 | <app></app>
10 | <script src="{%=o.htmlWebpackPlugin.files.chunks.vendor.entry%}"></script>
11 | <script src="{%=o.htmlWebpackPlugin.files.chunks.app.entry%}"></script>
12 | </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/app/index.js:
--------------------------------------------------------------------------------
 1 | var Vue = require('vue');
 2 | var VueRouter = require('vue-router');
 3 | Vue.use(VueRouter);
 4 | Vue.use(require('vue-resource'));
 5 | 
 6 | var router = new VueRouter({
 7 |   hashbang: false,
 8 |   history: true
 9 | });
10 | 
11 | require('vue-desktop');
12 | 
13 | import { default as routes } from './route';
14 | router.map(routes);
15 | 
16 | router.start(Vue.extend({
17 |   components: {
18 |     app: require('./app.vue')
19 |   }
20 | }), 'body');


--------------------------------------------------------------------------------
/app/page1/index.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div>Page1</div>
3 | </template>
4 | 
5 | <style scoped>
6 |   div{
7 |     color: red;
8 |   }
9 | </style>


--------------------------------------------------------------------------------
/app/page2/index.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div>Page2</div>
3 | </template>


--------------------------------------------------------------------------------
/app/route.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   '/page1': {
3 |     component: require('./page1/index.vue')
4 |   },
5 |   '/page2': {
6 |     component: require('./page2/index.vue')
7 |   }
8 | };
9 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-desktop-starter",
 3 |   "version": "0.0.0",
 4 |   "description": "vue-desktop starter project.",
 5 |   "main": "src/index.js",
 6 |   "private": true,
 7 |   "dependencies": {
 8 |     "vue": "^1.0.0",
 9 |     "vue-desktop": "^0.1.21",
10 |     "vue-i18n": "^2.2.0",
11 |     "vue-resource": "^0.1.17",
12 |     "vue-router": "^0.7.5"
13 |   },
14 |   "devDependencies": {
15 |     "babel-loader": "^6.2.1",
16 |     "babel-core": "^6.4.0",
17 |     "babel-plugin-transform-runtime": "^6.4.0",
18 |     "babel-preset-es2015": "^6.3.13",
19 |     "babel-runtime": "^5.8.34",
20 |     "extract-text-webpack-plugin": "^0.9.1",
21 |     "html-webpack-plugin": "^1.7.0",
22 |     "eslint": "^1.10.0",
23 |     "css-loader": "^0.21.0",
24 |     "eslint-loader": "^1.1.1",
25 |     "file-loader": "^0.8.4",
26 |     "html-loader": "^0.3.0",
27 |     "postcss-loader": "^0.8.0",
28 |     "style-loader": "^0.13.0",
29 |     "url-loader": "^0.5.6",
30 |     "vue-hot-reload-api": "^1.2.2",
31 |     "vue-html-loader": "^1.1.0",
32 |     "vue-loader": "^8.0.2",
33 |     "vue-style-loader": "^1.0.0",
34 |     "webpack": "^1.12.2"
35 |   },
36 |   "scripts": {
37 |     "dev": "webpack --progress --hide-modules --watch",
38 |     "build": "NODE_ENV=production webpack --progress --hide-modules",
39 |     "deploy": "NODE_ENV=production webpack --progress --hide-modules --output-public-path /dist/"
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const webpack = require('webpack');
 2 | const ExtractTextPlugin = require('extract-text-webpack-plugin');
 3 | const isProduction = process.env.NODE_ENV === 'production';
 4 | const HtmlWebpackPlugin = require('html-webpack-plugin');
 5 | const CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
 6 | 
 7 | var plugins = [
 8 |   new HtmlWebpackPlugin({
 9 |     filename: './index.html',
10 |     template: './app/index.html'
11 |   })
12 | ];
13 | 
14 | module.exports = {
15 |   entry: {
16 |     vendor: [
17 |       'vue', 'vue-router', 'vue-resource'
18 |     ],
19 |     app: './app/index.js'
20 |   },
21 |   output: {
22 |     path: './dist',
23 |     publicPath: '/dist/',
24 |     filename: isProduction ? '[name].[chunkhash:6].js' : '[name].js'
25 |   },
26 |   stats: {
27 |     children: false
28 |   },
29 |   devServer: {
30 |     stats: 'errors-only'
31 |   },
32 |   vue: {
33 |     loaders: {
34 |       css: ExtractTextPlugin.extract('style', 'css')
35 |     }
36 |   },
37 |   babel: {
38 |     presets: ['es2015']
39 |   },
40 |   module: {
41 |     preLoaders: [
42 |       { test: /\.js$/, exclude: /node_modules/, loader: 'eslint-loader' }
43 |     ],
44 |     loaders: [
45 |       { test: /\.vue$/, loader: 'vue' },
46 |       { test: /\.js$/, exclude: /node_modules\/(?!vue-desktop)/, loader: 'babel' },
47 |       { test: /\.css$/, loader: ExtractTextPlugin.extract('style', 'css') },
48 |       { test: /\.html$/, loader: 'html' },
49 |       { test: /\.(ttf|woff2|woff|eot|jpe?g|png|gif|svg)$/, loader: 'url?limit=20000&name=[path][name].[hash:6].[ext]' }
50 |     ]
51 |   },
52 |   plugins: plugins
53 | };
54 | 
55 | if (isProduction) {
56 |   plugins.push.apply(plugins, [
57 |     new ExtractTextPlugin('[name].[contenthash:6].css'),
58 |     new webpack.DefinePlugin({
59 |       'process.env': {
60 |         NODE_ENV: '"production"'
61 |       }
62 |     }),
63 |     new webpack.optimize.UglifyJsPlugin({
64 |       compress: {
65 |         warnings: false
66 |       },
67 |       sourceMap: false
68 |     }),
69 |     new webpack.optimize.OccurenceOrderPlugin(),
70 |     new CommonsChunkPlugin("vendor", "[name].[hash:6].js")
71 |   ]);
72 | } else {
73 |   plugins.push.apply(plugins, [
74 |     new ExtractTextPlugin('[name].css'),
75 |     new CommonsChunkPlugin("vendor", "[name].js")
76 |   ]);
77 |   module.exports.devtool = '#source-map'
78 | }
79 | 


--------------------------------------------------------------------------------