├── my-project2
    ├── static
    │   └── .gitkeep
    ├── config
    │   ├── prod.env.js
    │   ├── dev.env.js
    │   └── index.js
    ├── build
    │   ├── logo.png
    │   ├── vue-loader.conf.js
    │   ├── build.js
    │   ├── check-versions.js
    │   ├── webpack.base.conf.js
    │   ├── utils.js
    │   ├── webpack.dev.conf.js
    │   └── webpack.prod.conf.js
    ├── src
    │   ├── assets
    │   │   └── logo.png
    │   ├── components
    │   │   ├── FirstPage.vue
    │   │   ├── History.vue
    │   │   └── Task.vue
    │   ├── main.js
    │   ├── api
    │   │   └── getTask.js
    │   ├── router
    │   │   └── index.js
    │   └── App.vue
    ├── .editorconfig
    ├── .gitignore
    ├── .babelrc
    ├── .postcssrc.js
    ├── index.html
    ├── README.md
    └── package.json
├── my-project
    ├── vue.config.js
    ├── public
    │   ├── favicon.ico
    │   └── index.html
    ├── src
    │   ├── assets
    │   │   └── logo.png
    │   ├── main.js
    │   ├── components
    │   │   ├── TaskMenu.vue
    │   │   ├── TaskList.vue
    │   │   └── TaskItem.vue
    │   └── App.vue
    ├── .gitignore
    └── package.json
├── lucky
    ├── css
    │   └── common.css
    ├── index.html
    └── js
    │   └── firework.js
├── README.md
├── LICENSE
├── .gitignore
└── task
    ├── index.html
    └── index2.html


/my-project2/static/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/my-project/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   lintOnSave: false
3 | }


--------------------------------------------------------------------------------
/lucky/css/common.css:
--------------------------------------------------------------------------------
1 | .modal-content-x {
2 |   background-color: #fff0;
3 |   color: #ffff;
4 | }


--------------------------------------------------------------------------------
/my-project2/config/prod.env.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | module.exports = {
3 |   NODE_ENV: '"production"'
4 | }
5 | 


--------------------------------------------------------------------------------
/my-project2/build/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xugy0926/learn-vue-sample/HEAD/my-project2/build/logo.png


--------------------------------------------------------------------------------
/my-project/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xugy0926/learn-vue-sample/HEAD/my-project/public/favicon.ico


--------------------------------------------------------------------------------
/my-project/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xugy0926/learn-vue-sample/HEAD/my-project/src/assets/logo.png


--------------------------------------------------------------------------------
/my-project2/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xugy0926/learn-vue-sample/HEAD/my-project2/src/assets/logo.png


--------------------------------------------------------------------------------
/my-project/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App.vue'
3 | 
4 | Vue.config.productionTip = false
5 | 
6 | new Vue({
7 |   render: h => h(App)
8 | }).$mount('#app')
9 | 


--------------------------------------------------------------------------------
/my-project2/config/dev.env.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | const merge = require('webpack-merge')
3 | const prodEnv = require('./prod.env')
4 | 
5 | module.exports = merge(prodEnv, {
6 |   NODE_ENV: '"development"'
7 | })
8 | 


--------------------------------------------------------------------------------
/my-project2/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 


--------------------------------------------------------------------------------
/my-project2/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules/
 3 | /dist/
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | 
 8 | # Editor directories and files
 9 | .idea
10 | .vscode
11 | *.suo
12 | *.ntvs*
13 | *.njsproj
14 | *.sln
15 | 


--------------------------------------------------------------------------------
/my-project2/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     ["env", {
 4 |       "modules": false,
 5 |       "targets": {
 6 |         "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
 7 |       }
 8 |     }],
 9 |     "stage-2"
10 |   ],
11 |   "plugins": ["transform-vue-jsx", "transform-runtime"]
12 | }
13 | 


--------------------------------------------------------------------------------
/my-project2/src/components/FirstPage.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <router-link to="/task">Welcome</router-link>
 3 | </template>
 4 | 
 5 | <script>
 6 | import { Button } from 'mint-ui';
 7 | 
 8 | export default {
 9 |   name: 'FirstPage',
10 |   components: {
11 |     Button
12 |   }
13 | }
14 | </script>
15 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | #learn-vue-sample
 2 | 
 3 | #### lucky
 4 | 
 5 | 一个抽奖页面
 6 | 
 7 | 快速部署
 8 | ```
 9 | docker run --name lucky-project -v /some/content:/usr/share/nginx/html:ro -d -p 3001:80 nginx
10 | ```
11 | 
12 | - /some/content 是你 lucky 项目的绝对路径
13 | - 如果部署到服务器，可以把3001改成80。即：-p 80:80。这样可以通过服务器的 ip 地址直接访问，而不需要额外输入端口号。
14 | 


--------------------------------------------------------------------------------
/my-project2/.postcssrc.js:
--------------------------------------------------------------------------------
 1 | // https://github.com/michael-ciniawsky/postcss-load-config
 2 | 
 3 | module.exports = {
 4 |   "plugins": {
 5 |     "postcss-import": {},
 6 |     "postcss-url": {},
 7 |     // to edit target browsers: use "browserslist" field in package.json
 8 |     "autoprefixer": {}
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/my-project/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | 


--------------------------------------------------------------------------------
/my-project2/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 6 |     <title>my-project2</title>
 7 |   </head>
 8 |   <body>
 9 |     <div id="app"></div>
10 |     <!-- built files will be auto injected -->
11 |   </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/my-project2/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import MintUI from 'mint-ui'
 3 | import 'mint-ui/lib/style.css'
 4 | import App from './App'
 5 | import router from './router'
 6 | 
 7 | Vue.config.productionTip = false
 8 | Vue.use(MintUI)
 9 | 
10 | /* eslint-disable no-new */
11 | new Vue({
12 |   el: '#app',
13 |   router,
14 |   render: h => h(App)
15 | })
16 | 


--------------------------------------------------------------------------------
/my-project2/src/api/getTask.js:
--------------------------------------------------------------------------------
 1 | import * as axios from 'axios'
 2 | import * as R from 'ramda'
 3 | 
 4 | export const getTask = function (isCompeleted) {
 5 |   return axios
 6 |   .get('https://api.myjson.com/bins/oufit')
 7 |   .then(response => response.data)
 8 |   .then(data => {
 9 |     var fun = (n) => n.completed === isCompeleted;
10 |     return R.filter(fun, data)
11 |   })
12 | }


--------------------------------------------------------------------------------
/my-project2/src/components/History.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <mt-cell :title="item.title" v-for="item in items" :key="item.id"></mt-cell>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import { Cell } from 'mint-ui'
 9 | import { getTask } from '../api/getTask'
10 | 
11 | export default {
12 |   name: 'History',
13 |   data () {
14 |     return {
15 |       items: []
16 |     }
17 |   },
18 |   components: {
19 |     Cell
20 |   },
21 |   created () {
22 |     getTask(true).then(data => this.items = data)
23 |   },
24 | }
25 | </script>
26 | 


--------------------------------------------------------------------------------
/my-project2/src/components/Task.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <mt-cell :title="item.title" v-for="item in items" :key="item.id"></mt-cell>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import { Cell } from 'mint-ui'
 9 | import { getTask } from '../api/getTask'
10 | 
11 | 
12 | export default {
13 |   name: 'Task',
14 |   data () {
15 |     return {
16 |       items: []
17 |     }
18 |   },
19 |   components: {
20 |     Cell
21 |   },
22 |   created () {
23 |     getTask(false).then(data => this.items = data)
24 |   },
25 | }
26 | </script>
27 | 


--------------------------------------------------------------------------------
/my-project2/README.md:
--------------------------------------------------------------------------------
 1 | # my-project2
 2 | 
 3 | > task project
 4 | 
 5 | ## Build Setup
 6 | 
 7 | ``` bash
 8 | # install dependencies
 9 | npm install
10 | 
11 | # serve with hot reload at localhost:8080
12 | npm run dev
13 | 
14 | # build for production with minification
15 | npm run build
16 | 
17 | # build for production and view the bundle analyzer report
18 | npm run build --report
19 | ```
20 | 
21 | For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
22 | 


--------------------------------------------------------------------------------
/my-project/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="shortcut icon" href="<%= webpackConfig.output.publicPath %>favicon.ico">
 8 |     <link href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
 9 |     <title>my-project</title>
10 |   </head>
11 |   <body>
12 |     <div id="app"></div>
13 |     <!-- built files will be auto injected -->
14 |   </body>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/my-project/src/components/TaskMenu.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="col-md-1">
 3 |       <div class="btn-group-vertical" role="group" aria-label="Button group with nested dropdown">
 4 |         <button type="button" class="btn btn-secondary" v-on:click="onSelected(item.tag)" v-for="item in items">{{ item.text }}</button>
 5 |       </div>
 6 |     </div>
 7 | </template>
 8 | 
 9 | <script>
10 | export default {
11 |   name: 'TaskMenu',
12 |   props: {
13 |     items: Array
14 |   },
15 |   methods: {
16 |     onSelected(tag) {
17 |       this.$emit('click-select', tag);
18 |     }
19 |   }
20 | }
21 | </script>
22 | 


--------------------------------------------------------------------------------
/my-project2/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | import Task from '@/components/Task'
 4 | import History from '@/components/History'
 5 | import FirstPage from '@/components/FirstPage'
 6 | 
 7 | Vue.use(Router)
 8 | 
 9 | export default new Router({
10 |   routes: [
11 |     {
12 |       path: '/',
13 |       name: 'FirstPage',
14 |       component: FirstPage
15 |     },
16 |     {
17 |       path: '/task',
18 |       name: 'Task',
19 |       component: Task
20 |     },
21 |     {
22 |       path: '/history',
23 |       name: 'History',
24 |       component: History
25 |     },
26 |   ]
27 | })
28 | 


--------------------------------------------------------------------------------
/my-project/src/components/TaskList.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="col-md-6">
 3 |       <div class="list-group">
 4 |         <TaskItem v-bind:item="item" v-on:click-complete="onCompleted" v-bind:tag="tag" v-for="item in items"></TaskItem>
 5 |       </div>
 6 |     </div>
 7 | </template>
 8 | 
 9 | <script>
10 | import TaskItem from './TaskItem.vue';
11 | 
12 | export default {
13 |   name: 'TaskList',
14 |   props: {
15 |     items: Array,
16 |     tag: Boolean
17 |   },
18 |   components: {
19 |     TaskItem
20 |   },
21 |   methods: {
22 |     onCompleted(id) {
23 |       this.$emit('click-complete', id);
24 |     }
25 |   }
26 | }
27 | </script>
28 | 


--------------------------------------------------------------------------------
/my-project2/build/vue-loader.conf.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | const utils = require('./utils')
 3 | const config = require('../config')
 4 | const isProduction = process.env.NODE_ENV === 'production'
 5 | const sourceMapEnabled = isProduction
 6 |   ? config.build.productionSourceMap
 7 |   : config.dev.cssSourceMap
 8 | 
 9 | module.exports = {
10 |   loaders: utils.cssLoaders({
11 |     sourceMap: sourceMapEnabled,
12 |     extract: isProduction
13 |   }),
14 |   cssSourceMap: sourceMapEnabled,
15 |   cacheBusting: config.dev.cacheBusting,
16 |   transformToRequire: {
17 |     video: ['src', 'poster'],
18 |     source: 'src',
19 |     img: 'src',
20 |     image: 'xlink:href'
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/my-project/src/components/TaskItem.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <a href="#" class="list-group-item list-group-item-action flex-column align-items-start" v-if="item.completed === tag">
 3 |     <div class="d-flex w-100 justify-content-between">
 4 |       <h5 class="mb-1">{{ item.title }}</h5>
 5 |       <small>{{ item.createAt }}</small>
 6 |     </div>
 7 |     <p class="mb-1">{{ item.content }}</p>
 8 |     <small v-if="item.completed">已完成</small>
 9 |     <div class="float-right" v-else>
10 |       <button class="btn btn-primary btn-sm" v-on:click="onCompleted(item.id)">完成</button>
11 |     </div>
12 |   </a>
13 | </template>
14 | 
15 | <script>
16 | export default {
17 |   name: 'TaskItem',
18 |   props: {
19 |     item: Object, 
20 |     tag: Boolean
21 |   },
22 |   methods: {
23 |     onCompleted(id) {
24 |       this.$emit('click-complete', id);
25 |     }
26 |   }
27 | }
28 | </script>
29 | 


--------------------------------------------------------------------------------
/my-project2/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <router-view/>
 4 | 
 5 |     
 6 |     <mt-tabbar v-model="selected">
 7 |       <mt-tab-item id="task">
 8 |         <img slot="icon" src="http://placeholder.qiniudn.com/100x100">
 9 |         任务
10 |       </mt-tab-item>
11 |       <mt-tab-item id="history">
12 |         <img slot="icon" src="http://placeholder.qiniudn.com/100x100">
13 |         历史
14 |       </mt-tab-item>
15 |     </mt-tabbar>    
16 |   </div>
17 | </template>
18 | 
19 | <script>
20 | import { Tabbar, TabItem } from 'mint-ui'
21 | import router from './router'
22 | 
23 | export default {
24 |   name: 'App',
25 |   components: {
26 |     Tabbar,
27 |     TabItem
28 |   },
29 |   data () {
30 |     return {
31 |       selected: 'task',
32 |       showNav: false
33 |     }
34 |   },
35 |   watch: {
36 |     selected (newValue, oldValue) {
37 |       router.push(newValue)
38 |     }
39 |   }
40 | }
41 | </script>
42 | 


--------------------------------------------------------------------------------
/my-project/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "my-project",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve --open",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "axios": "^0.17.1",
12 |     "ramda": "^0.25.0",
13 |     "vue": "^2.5.13"
14 |   },
15 |   "devDependencies": {
16 |     "@vue/cli-plugin-babel": "^3.0.0-alpha.10",
17 |     "@vue/cli-plugin-eslint": "^3.0.0-alpha.10",
18 |     "@vue/cli-service": "^3.0.0-alpha.10",
19 |     "vue-template-compiler": "^2.5.13"
20 |   },
21 |   "babel": {
22 |     "presets": [
23 |       "@vue/app"
24 |     ]
25 |   },
26 |   "eslintConfig": {
27 |     "extends": [
28 |       "plugin:vue/essential",
29 |       "eslint:recommended"
30 |     ]
31 |   },
32 |   "postcss": {
33 |     "plugins": {
34 |       "autoprefixer": {}
35 |     }
36 |   },
37 |   "browserslist": [
38 |     "> 1%",
39 |     "last 2 versions",
40 |     "not ie <= 8"
41 |   ]
42 | }
43 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 xugaoyang
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | 
 8 | # Runtime data
 9 | pids
10 | *.pid
11 | *.seed
12 | *.pid.lock
13 | 
14 | # Directory for instrumented libs generated by jscoverage/JSCover
15 | lib-cov
16 | 
17 | # Coverage directory used by tools like istanbul
18 | coverage
19 | 
20 | # nyc test coverage
21 | .nyc_output
22 | 
23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24 | .grunt
25 | 
26 | # Bower dependency directory (https://bower.io/)
27 | bower_components
28 | 
29 | # node-waf configuration
30 | .lock-wscript
31 | 
32 | # Compiled binary addons (http://nodejs.org/api/addons.html)
33 | build/Release
34 | 
35 | # Dependency directories
36 | node_modules/
37 | jspm_packages/
38 | 
39 | # Typescript v1 declaration files
40 | typings/
41 | 
42 | # Optional npm cache directory
43 | .npm
44 | 
45 | # Optional eslint cache
46 | .eslintcache
47 | 
48 | # Optional REPL history
49 | .node_repl_history
50 | 
51 | # Output of 'npm pack'
52 | *.tgz
53 | 
54 | # Yarn Integrity file
55 | .yarn-integrity
56 | 
57 | # dotenv environment variables file
58 | .env
59 | 
60 | 


--------------------------------------------------------------------------------
/my-project2/build/build.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | require('./check-versions')()
 3 | 
 4 | process.env.NODE_ENV = 'production'
 5 | 
 6 | const ora = require('ora')
 7 | const rm = require('rimraf')
 8 | const path = require('path')
 9 | const chalk = require('chalk')
10 | const webpack = require('webpack')
11 | const config = require('../config')
12 | const webpackConfig = require('./webpack.prod.conf')
13 | 
14 | const spinner = ora('building for production...')
15 | spinner.start()
16 | 
17 | rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
18 |   if (err) throw err
19 |   webpack(webpackConfig, (err, stats) => {
20 |     spinner.stop()
21 |     if (err) throw err
22 |     process.stdout.write(stats.toString({
23 |       colors: true,
24 |       modules: false,
25 |       children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
26 |       chunks: false,
27 |       chunkModules: false
28 |     }) + '\n\n')
29 | 
30 |     if (stats.hasErrors()) {
31 |       console.log(chalk.red('  Build failed with errors.\n'))
32 |       process.exit(1)
33 |     }
34 | 
35 |     console.log(chalk.cyan('  Build complete.\n'))
36 |     console.log(chalk.yellow(
37 |       '  Tip: built files are meant to be served over an HTTP server.\n' +
38 |       '  Opening index.html over file:// won\'t work.\n'
39 |     ))
40 |   })
41 | })
42 | 


--------------------------------------------------------------------------------
/my-project2/build/check-versions.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | const chalk = require('chalk')
 3 | const semver = require('semver')
 4 | const packageConfig = require('../package.json')
 5 | const shell = require('shelljs')
 6 | 
 7 | function exec (cmd) {
 8 |   return require('child_process').execSync(cmd).toString().trim()
 9 | }
10 | 
11 | const versionRequirements = [
12 |   {
13 |     name: 'node',
14 |     currentVersion: semver.clean(process.version),
15 |     versionRequirement: packageConfig.engines.node
16 |   }
17 | ]
18 | 
19 | if (shell.which('npm')) {
20 |   versionRequirements.push({
21 |     name: 'npm',
22 |     currentVersion: exec('npm --version'),
23 |     versionRequirement: packageConfig.engines.npm
24 |   })
25 | }
26 | 
27 | module.exports = function () {
28 |   const warnings = []
29 | 
30 |   for (let i = 0; i < versionRequirements.length; i++) {
31 |     const mod = versionRequirements[i]
32 | 
33 |     if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
34 |       warnings.push(mod.name + ': ' +
35 |         chalk.red(mod.currentVersion) + ' should be ' +
36 |         chalk.green(mod.versionRequirement)
37 |       )
38 |     }
39 |   }
40 | 
41 |   if (warnings.length) {
42 |     console.log('')
43 |     console.log(chalk.yellow('To use this template, you must update following to modules:'))
44 |     console.log()
45 | 
46 |     for (let i = 0; i < warnings.length; i++) {
47 |       const warning = warnings[i]
48 |       console.log('  ' + warning)
49 |     }
50 | 
51 |     console.log()
52 |     process.exit(1)
53 |   }
54 | }
55 | 


--------------------------------------------------------------------------------
/my-project/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app" class="container mt-5">
 3 |     <div class="row justify-content-md-center">
 4 |     <TaskMenu v-on:click-select="onSelected" v-bind:items="menus" />
 5 |     <TaskList  v-bind:tag="currentMenuStatus" v-on:click-complete="onCompleted" v-bind:items="tasks" />
 6 |     </div>
 7 |   </div>
 8 | </template>
 9 | 
10 | <script>
11 | import TaskMenu from './components/TaskMenu.vue';
12 | import TaskList from './components/TaskList.vue';
13 | import axios from 'axios';
14 | import * as R from 'ramda';
15 | 
16 | export default {
17 |   name: 'app',
18 |   components: {
19 |     TaskMenu,
20 |     TaskList
21 |   },
22 |   data() {
23 |     return {
24 |       menus: [
25 |         {
26 |           tag: false,
27 |           text: '未完成'
28 |         },
29 |         {
30 |           tag: true,
31 |           text: '完成'
32 |         }
33 |       ],
34 |       currentMenuStatus: false,
35 |       tasks: [] // [{id, title, content, completed, createAt, completeAt }]Î
36 |     };
37 |   },
38 |   beforeCreate() {
39 |     axios
40 |       .get('https://api.myjson.com/bins/oufit')
41 |       .then(response => response.data)
42 |       .then(data => (this.tasks = data))
43 |       .catch(console.log);
44 |   },
45 |   methods: {
46 |     onSelected(tag) {
47 |       this.currentMenuStatus = tag;
48 |     },
49 |     onCompleted(id) {
50 |       var index = R.findIndex(R.propEq('id', id))(this.tasks);
51 |       this.tasks[index].completed = true;
52 |       this.save();
53 |     },
54 |     save() {
55 |       axios
56 |         .put('https://api.myjson.com/bins/oufit', this.tasks)
57 |         .then(response => response.data)
58 |         .then(data => alert('更新成功'))
59 |         .catch(console.log);
60 |     }
61 |   }
62 | };
63 | </script>
64 | 


--------------------------------------------------------------------------------
/my-project2/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "my-project2",
 3 |   "version": "1.0.0",
 4 |   "description": "task project",
 5 |   "author": "xugaoyang <i@xugaoyang.com>",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
 9 |     "start": "npm run dev",
10 |     "build": "node build/build.js"
11 |   },
12 |   "dependencies": {
13 |     "axios": "^0.18.0",
14 |     "mint-ui": "^2.2.13",
15 |     "ramda": "^0.25.0",
16 |     "vue": "^2.5.2",
17 |     "vue-router": "^3.0.1"
18 |   },
19 |   "devDependencies": {
20 |     "autoprefixer": "^7.1.2",
21 |     "babel-core": "^6.22.1",
22 |     "babel-helper-vue-jsx-merge-props": "^2.0.3",
23 |     "babel-loader": "^7.1.1",
24 |     "babel-plugin-syntax-jsx": "^6.18.0",
25 |     "babel-plugin-transform-runtime": "^6.22.0",
26 |     "babel-plugin-transform-vue-jsx": "^3.5.0",
27 |     "babel-preset-env": "^1.3.2",
28 |     "babel-preset-stage-2": "^6.22.0",
29 |     "chalk": "^2.0.1",
30 |     "copy-webpack-plugin": "^4.0.1",
31 |     "css-loader": "^0.28.0",
32 |     "extract-text-webpack-plugin": "^3.0.0",
33 |     "file-loader": "^1.1.4",
34 |     "friendly-errors-webpack-plugin": "^1.6.1",
35 |     "html-webpack-plugin": "^2.30.1",
36 |     "node-notifier": "^5.1.2",
37 |     "optimize-css-assets-webpack-plugin": "^3.2.0",
38 |     "ora": "^1.2.0",
39 |     "portfinder": "^1.0.13",
40 |     "postcss-import": "^11.0.0",
41 |     "postcss-loader": "^2.0.8",
42 |     "postcss-url": "^7.2.1",
43 |     "rimraf": "^2.6.0",
44 |     "semver": "^5.3.0",
45 |     "shelljs": "^0.7.6",
46 |     "uglifyjs-webpack-plugin": "^1.1.1",
47 |     "url-loader": "^0.5.8",
48 |     "vue-loader": "^13.3.0",
49 |     "vue-style-loader": "^3.0.1",
50 |     "vue-template-compiler": "^2.5.2",
51 |     "webpack": "^3.6.0",
52 |     "webpack-bundle-analyzer": "^2.9.0",
53 |     "webpack-dev-server": "^2.9.1",
54 |     "webpack-merge": "^4.1.0"
55 |   },
56 |   "engines": {
57 |     "node": ">= 6.0.0",
58 |     "npm": ">= 3.0.0"
59 |   },
60 |   "browserslist": [
61 |     "> 1%",
62 |     "last 2 versions",
63 |     "not ie <= 8"
64 |   ]
65 | }
66 | 


--------------------------------------------------------------------------------
/my-project2/config/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | // Template version: 1.3.1
 3 | // see http://vuejs-templates.github.io/webpack for documentation.
 4 | 
 5 | const path = require('path')
 6 | 
 7 | module.exports = {
 8 |   dev: {
 9 | 
10 |     // Paths
11 |     assetsSubDirectory: 'static',
12 |     assetsPublicPath: '/',
13 |     proxyTable: {},
14 | 
15 |     // Various Dev Server settings
16 |     host: 'localhost', // can be overwritten by process.env.HOST
17 |     port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
18 |     autoOpenBrowser: false,
19 |     errorOverlay: true,
20 |     notifyOnErrors: true,
21 |     poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
22 | 
23 |     
24 |     /**
25 |      * Source Maps
26 |      */
27 | 
28 |     // https://webpack.js.org/configuration/devtool/#development
29 |     devtool: 'cheap-module-eval-source-map',
30 | 
31 |     // If you have problems debugging vue-files in devtools,
32 |     // set this to false - it *may* help
33 |     // https://vue-loader.vuejs.org/en/options.html#cachebusting
34 |     cacheBusting: true,
35 | 
36 |     cssSourceMap: true
37 |   },
38 | 
39 |   build: {
40 |     // Template for index.html
41 |     index: path.resolve(__dirname, '../dist/index.html'),
42 | 
43 |     // Paths
44 |     assetsRoot: path.resolve(__dirname, '../dist'),
45 |     assetsSubDirectory: 'static',
46 |     assetsPublicPath: '/',
47 | 
48 |     /**
49 |      * Source Maps
50 |      */
51 | 
52 |     productionSourceMap: true,
53 |     // https://webpack.js.org/configuration/devtool/#production
54 |     devtool: '#source-map',
55 | 
56 |     // Gzip off by default as many popular static hosts such as
57 |     // Surge or Netlify already gzip all static assets for you.
58 |     // Before setting to `true`, make sure to:
59 |     // npm install --save-dev compression-webpack-plugin
60 |     productionGzip: false,
61 |     productionGzipExtensions: ['js', 'css'],
62 | 
63 |     // Run the build command with an extra argument to
64 |     // View the bundle analyzer report after build finishes:
65 |     // `npm run build --report`
66 |     // Set to `true` or `false` to always turn it on or off
67 |     bundleAnalyzerReport: process.env.npm_config_report
68 |   }
69 | }
70 | 


--------------------------------------------------------------------------------
/my-project2/build/webpack.base.conf.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | const path = require('path')
 3 | const utils = require('./utils')
 4 | const config = require('../config')
 5 | const vueLoaderConfig = require('./vue-loader.conf')
 6 | 
 7 | function resolve (dir) {
 8 |   return path.join(__dirname, '..', dir)
 9 | }
10 | 
11 | 
12 | 
13 | module.exports = {
14 |   context: path.resolve(__dirname, '../'),
15 |   entry: {
16 |     app: './src/main.js'
17 |   },
18 |   output: {
19 |     path: config.build.assetsRoot,
20 |     filename: '[name].js',
21 |     publicPath: process.env.NODE_ENV === 'production'
22 |       ? config.build.assetsPublicPath
23 |       : config.dev.assetsPublicPath
24 |   },
25 |   resolve: {
26 |     extensions: ['.js', '.vue', '.json'],
27 |     alias: {
28 |       '@': resolve('src'),
29 |     }
30 |   },
31 |   module: {
32 |     rules: [
33 |       {
34 |         test: /\.vue$/,
35 |         loader: 'vue-loader',
36 |         options: vueLoaderConfig
37 |       },
38 |       {
39 |         test: /\.js$/,
40 |         loader: 'babel-loader',
41 |         include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
42 |       },
43 |       {
44 |         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
45 |         loader: 'url-loader',
46 |         options: {
47 |           limit: 10000,
48 |           name: utils.assetsPath('img/[name].[hash:7].[ext]')
49 |         }
50 |       },
51 |       {
52 |         test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
53 |         loader: 'url-loader',
54 |         options: {
55 |           limit: 10000,
56 |           name: utils.assetsPath('media/[name].[hash:7].[ext]')
57 |         }
58 |       },
59 |       {
60 |         test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
61 |         loader: 'url-loader',
62 |         options: {
63 |           limit: 10000,
64 |           name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
65 |         }
66 |       }
67 |     ]
68 |   },
69 |   node: {
70 |     // prevent webpack from injecting useless setImmediate polyfill because Vue
71 |     // source contains it (although only uses it if it's native).
72 |     setImmediate: false,
73 |     // prevent webpack from injecting mocks to Node native modules
74 |     // that does not make sense for the client
75 |     dgram: 'empty',
76 |     fs: 'empty',
77 |     net: 'empty',
78 |     tls: 'empty',
79 |     child_process: 'empty'
80 |   }
81 | }
82 | 


--------------------------------------------------------------------------------
/my-project2/build/utils.js:
--------------------------------------------------------------------------------
  1 | 'use strict'
  2 | const path = require('path')
  3 | const config = require('../config')
  4 | const ExtractTextPlugin = require('extract-text-webpack-plugin')
  5 | const packageConfig = require('../package.json')
  6 | 
  7 | exports.assetsPath = function (_path) {
  8 |   const assetsSubDirectory = process.env.NODE_ENV === 'production'
  9 |     ? config.build.assetsSubDirectory
 10 |     : config.dev.assetsSubDirectory
 11 | 
 12 |   return path.posix.join(assetsSubDirectory, _path)
 13 | }
 14 | 
 15 | exports.cssLoaders = function (options) {
 16 |   options = options || {}
 17 | 
 18 |   const cssLoader = {
 19 |     loader: 'css-loader',
 20 |     options: {
 21 |       sourceMap: options.sourceMap
 22 |     }
 23 |   }
 24 | 
 25 |   const postcssLoader = {
 26 |     loader: 'postcss-loader',
 27 |     options: {
 28 |       sourceMap: options.sourceMap
 29 |     }
 30 |   }
 31 | 
 32 |   // generate loader string to be used with extract text plugin
 33 |   function generateLoaders (loader, loaderOptions) {
 34 |     const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
 35 | 
 36 |     if (loader) {
 37 |       loaders.push({
 38 |         loader: loader + '-loader',
 39 |         options: Object.assign({}, loaderOptions, {
 40 |           sourceMap: options.sourceMap
 41 |         })
 42 |       })
 43 |     }
 44 | 
 45 |     // Extract CSS when that option is specified
 46 |     // (which is the case during production build)
 47 |     if (options.extract) {
 48 |       return ExtractTextPlugin.extract({
 49 |         use: loaders,
 50 |         fallback: 'vue-style-loader'
 51 |       })
 52 |     } else {
 53 |       return ['vue-style-loader'].concat(loaders)
 54 |     }
 55 |   }
 56 | 
 57 |   // https://vue-loader.vuejs.org/en/configurations/extract-css.html
 58 |   return {
 59 |     css: generateLoaders(),
 60 |     postcss: generateLoaders(),
 61 |     less: generateLoaders('less'),
 62 |     sass: generateLoaders('sass', { indentedSyntax: true }),
 63 |     scss: generateLoaders('sass'),
 64 |     stylus: generateLoaders('stylus'),
 65 |     styl: generateLoaders('stylus')
 66 |   }
 67 | }
 68 | 
 69 | // Generate loaders for standalone style files (outside of .vue)
 70 | exports.styleLoaders = function (options) {
 71 |   const output = []
 72 |   const loaders = exports.cssLoaders(options)
 73 | 
 74 |   for (const extension in loaders) {
 75 |     const loader = loaders[extension]
 76 |     output.push({
 77 |       test: new RegExp('\\.' + extension + '$'),
 78 |       use: loader
 79 |     })
 80 |   }
 81 | 
 82 |   return output
 83 | }
 84 | 
 85 | exports.createNotifierCallback = () => {
 86 |   const notifier = require('node-notifier')
 87 | 
 88 |   return (severity, errors) => {
 89 |     if (severity !== 'error') return
 90 | 
 91 |     const error = errors[0]
 92 |     const filename = error.file && error.file.split('!').pop()
 93 | 
 94 |     notifier.notify({
 95 |       title: packageConfig.name,
 96 |       message: severity + ': ' + error.name,
 97 |       subtitle: filename || '',
 98 |       icon: path.join(__dirname, 'logo.png')
 99 |     })
100 |   }
101 | }
102 | 


--------------------------------------------------------------------------------
/my-project2/build/webpack.dev.conf.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | const utils = require('./utils')
 3 | const webpack = require('webpack')
 4 | const config = require('../config')
 5 | const merge = require('webpack-merge')
 6 | const path = require('path')
 7 | const baseWebpackConfig = require('./webpack.base.conf')
 8 | const CopyWebpackPlugin = require('copy-webpack-plugin')
 9 | const HtmlWebpackPlugin = require('html-webpack-plugin')
10 | const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
11 | const portfinder = require('portfinder')
12 | 
13 | const HOST = process.env.HOST
14 | const PORT = process.env.PORT && Number(process.env.PORT)
15 | 
16 | const devWebpackConfig = merge(baseWebpackConfig, {
17 |   module: {
18 |     rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
19 |   },
20 |   // cheap-module-eval-source-map is faster for development
21 |   devtool: config.dev.devtool,
22 | 
23 |   // these devServer options should be customized in /config/index.js
24 |   devServer: {
25 |     clientLogLevel: 'warning',
26 |     historyApiFallback: {
27 |       rewrites: [
28 |         { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
29 |       ],
30 |     },
31 |     hot: true,
32 |     contentBase: false, // since we use CopyWebpackPlugin.
33 |     compress: true,
34 |     host: HOST || config.dev.host,
35 |     port: PORT || config.dev.port,
36 |     open: config.dev.autoOpenBrowser,
37 |     overlay: config.dev.errorOverlay
38 |       ? { warnings: false, errors: true }
39 |       : false,
40 |     publicPath: config.dev.assetsPublicPath,
41 |     proxy: config.dev.proxyTable,
42 |     quiet: true, // necessary for FriendlyErrorsPlugin
43 |     watchOptions: {
44 |       poll: config.dev.poll,
45 |     }
46 |   },
47 |   plugins: [
48 |     new webpack.DefinePlugin({
49 |       'process.env': require('../config/dev.env')
50 |     }),
51 |     new webpack.HotModuleReplacementPlugin(),
52 |     new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
53 |     new webpack.NoEmitOnErrorsPlugin(),
54 |     // https://github.com/ampedandwired/html-webpack-plugin
55 |     new HtmlWebpackPlugin({
56 |       filename: 'index.html',
57 |       template: 'index.html',
58 |       inject: true
59 |     }),
60 |     // copy custom static assets
61 |     new CopyWebpackPlugin([
62 |       {
63 |         from: path.resolve(__dirname, '../static'),
64 |         to: config.dev.assetsSubDirectory,
65 |         ignore: ['.*']
66 |       }
67 |     ])
68 |   ]
69 | })
70 | 
71 | module.exports = new Promise((resolve, reject) => {
72 |   portfinder.basePort = process.env.PORT || config.dev.port
73 |   portfinder.getPort((err, port) => {
74 |     if (err) {
75 |       reject(err)
76 |     } else {
77 |       // publish the new Port, necessary for e2e tests
78 |       process.env.PORT = port
79 |       // add port to devServer config
80 |       devWebpackConfig.devServer.port = port
81 | 
82 |       // Add FriendlyErrorsPlugin
83 |       devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
84 |         compilationSuccessInfo: {
85 |           messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
86 |         },
87 |         onErrors: config.dev.notifyOnErrors
88 |         ? utils.createNotifierCallback()
89 |         : undefined
90 |       }))
91 | 
92 |       resolve(devWebpackConfig)
93 |     }
94 |   })
95 | })
96 | 


--------------------------------------------------------------------------------
/task/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <link href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
  6 |   <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  7 |   <script src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
  8 |   <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  9 |   <script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>
 10 | </head>
 11 | 
 12 | <body>
 13 |   <div id="app" class="container">
 14 |     <div class="row justify-content-md-center mt-5">
 15 |       <!-- TODO: 如何把 menu 抽离成 组件 -->
 16 |       <div class="col-md-1">
 17 |         <div class="btn-group-vertical" role="group" aria-label="Button group with nested dropdown">
 18 |           <button type="button" class="btn btn-secondary" v-on:click="onSelected(item.tag)" v-for="item in menus">{{ item.text}}</button>
 19 |         </div>
 20 |       </div>
 21 | 
 22 |       <!-- TODO: 如何把这部分抽离成一个 task-list 组件 -->
 23 |       <div class="col-md-6" v-if="currentMenuTag === 'working'">
 24 |         <div class="list-group">
 25 |           <task-item v-bind:item="item" v-bind:tag="'working'" v-for="item in tasks"></task-item>
 26 |         </div>
 27 |       </div>
 28 | 
 29 |       <div class="col-md-6" v-else>
 30 |         <div class="list-group">
 31 |           <task-item v-bind:item="item" v-bind:tag="'completed'" v-for="item in tasks"></task-item>
 32 |         </div>
 33 |       </div>
 34 |     </div>
 35 |   </div>
 36 | </body>
 37 | 
 38 | </html>
 39 | <script>
 40 |   Vue.component('task-item', {
 41 |     props: ['item', 'tag'],
 42 |     template: `
 43 |       <a href="#" class="list-group-item list-group-item-action flex-column align-items-start" v-if="item.tag === tag">
 44 |         <div class="d-flex w-100 justify-content-between">
 45 |           <h5 class="mb-1">{{ item.title }}</h5>
 46 |           <small>{{ item.createAt }}</small>
 47 |         </div>
 48 |         <p class="mb-1">{{ item.content }}</p>
 49 |         <small v-if="item.completed">已完成</small>
 50 |         <div class="float-right" v-else>
 51 |           <button class="btn btn-primary btn-sm" v-on:click="onCompleted">完成</button>
 52 |         </div>
 53 |       </a>
 54 |     `,
 55 |     methods: {
 56 |       onCompleted() {
 57 |         console.log('task-item onCompleted');
 58 |         // TODO: 如何把点击事件传递给父层
 59 |       }
 60 |     }
 61 |   })
 62 | 
 63 |   var tasks = function () {
 64 |     let tasks = [];
 65 |     for (let i = 0; i < 10; i++) {
 66 |       tasks.push({
 67 |         title: 'task' + (i + 1),
 68 |         content: 'content' + (i + 1),
 69 |         tag: 'working',
 70 |         completed: false,
 71 |         createAt: (new Date()).toString()
 72 |       })
 73 |     }
 74 | 
 75 |     return tasks;
 76 |   }();
 77 | 
 78 |   var app = new Vue({
 79 |     el: '#app',
 80 |     data: {
 81 |       menus: [{
 82 |           tag: 'working',
 83 |           text: '未完成'
 84 |         },
 85 |         {
 86 |           tag: 'completed',
 87 |           text: '完成'
 88 |         },
 89 |       ],
 90 |       currentMenuTag: '',
 91 |       tasks: tasks
 92 |     },
 93 |     methods: {
 94 |       onSelected(tag) {
 95 |         this.currentMenuTag = tag;
 96 |       },
 97 |       onCompleted() {
 98 | 
 99 |       }
100 |     }
101 |   });
102 | 
103 |   app.currentMenuTag = app.menus[0].tag;
104 | </script>


--------------------------------------------------------------------------------
/task/index2.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <link href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
  6 |   <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  7 |   <script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>
  8 |   <script src="https://cdn.bootcss.com/node-uuid/1.4.8/uuid.min.js"></script>
  9 |   <script src="https://cdn.bootcss.com/date-fns/2.0.0-alpha0/date_fns.min.js"></script>
 10 |   <script src="https://cdn.bootcss.com/ramda/0.25.0/ramda.min.js"></script>
 11 |   <script src="https://cdn.bootcss.com/vue/2.5.13/vue.js"></script>
 12 |   <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
 13 | </head>
 14 | 
 15 | <body>
 16 |   <div id="app" class="container">
 17 |     <div class="row justify-content-md-center mt-5">
 18 |       <task-menu v-on:click-select="onSelected" v-bind:items="menus"></task-menu>
 19 |       <task-list v-bind:tag="currentMenuStatus" v-on:click-complete="onCompleted" v-bind:items="tasks"></task-list>
 20 |     </div>
 21 |   </div>
 22 | </body>
 23 | 
 24 | </html>
 25 | <script>
 26 |   Vue.component('task-menu', {
 27 |     props: ['items'],
 28 |     template: `
 29 |       <div class="col-md-1">
 30 |         <div class="btn-group-vertical" role="group" aria-label="Button group with nested dropdown">
 31 |           <button type="button" class="btn btn-secondary" v-on:click="onSelected(item.tag)" v-for="item in items">{{ item.text}}</button>
 32 |         </div>
 33 |       </div>
 34 |     `,
 35 |     methods: {
 36 |       onSelected(tag) {
 37 |         this.$emit('click-select', tag);
 38 |       }
 39 |     }
 40 |   });
 41 | 
 42 |   Vue.component('task-item', {
 43 |     props: ['item', 'tag'],
 44 |     template: `
 45 |       <a href="#" class="list-group-item list-group-item-action flex-column align-items-start" v-if="item.completed === tag">
 46 |         <div class="d-flex w-100 justify-content-between">
 47 |           <h5 class="mb-1">{{ item.title }}</h5>
 48 |           <small>{{ item.createAt }}</small>
 49 |         </div>
 50 |         <p class="mb-1">{{ item.content }}</p>
 51 |         <small v-if="item.completed">已完成</small>
 52 |         <div class="float-right" v-else>
 53 |           <button class="btn btn-primary btn-sm" v-on:click="onCompleted(item.id)">完成</button>
 54 |         </div>
 55 |       </a>
 56 |     `,
 57 |     methods: {
 58 |       onCompleted(id) {
 59 |         this.$emit('click-complete', id);
 60 |       }
 61 |     }
 62 |   });
 63 | 
 64 |   Vue.component('task-list', {
 65 |     props: ['items', 'tag'],
 66 |     template: `
 67 |       <div class="col-md-6">
 68 |         <div class="list-group">
 69 |           <task-item v-bind:item="item" v-on:click-complete="onCompleted" v-bind:tag="tag" v-for="item in items"></task-item>
 70 |         </div>
 71 |       </div>
 72 |     `,
 73 |     methods: {
 74 |       onCompleted(id) {
 75 |         this.$emit('click-complete', id);
 76 |       }
 77 |     }
 78 |   });
 79 | 
 80 |   var app = new Vue({
 81 |     el: '#app',
 82 |     data: {
 83 |       menus: [{
 84 |           tag: false,
 85 |           text: '未完成'
 86 |         },
 87 |         {
 88 |           tag: true,
 89 |           text: '完成'
 90 |         },
 91 |       ],
 92 |       currentMenuStatus: false,
 93 |       tasks: [] // [{id, title, content, completed, createAt, completeAt }]
 94 |     },
 95 |     beforeCreate() {
 96 |       axios.get('https://api.myjson.com/bins/oufit')
 97 |         .then(response => response.data)
 98 |         .then(data => (this.tasks = data))
 99 |         .catch(console.log);
100 |     },
101 |     methods: {
102 |       onSelected(tag) {
103 |         this.currentMenuStatus = tag;
104 |       },
105 |       onCompleted(id) {
106 |         var index = R.findIndex(R.propEq('id', id))(this.tasks);
107 |         this.tasks[index].completed = true;
108 |         this.save();
109 |       },
110 |       save() {
111 |         axios.put('https://api.myjson.com/bins/oufit', this.tasks)
112 |           .then(response => response.data)
113 |           .then(data => alert('更新成功'))
114 |           .catch(console.log);
115 |       }
116 |     }
117 |   });
118 | 
119 |   app.currentMenuStatus = app.menus[0].tag;
120 | </script>


--------------------------------------------------------------------------------
/my-project2/build/webpack.prod.conf.js:
--------------------------------------------------------------------------------
  1 | 'use strict'
  2 | const path = require('path')
  3 | const utils = require('./utils')
  4 | const webpack = require('webpack')
  5 | const config = require('../config')
  6 | const merge = require('webpack-merge')
  7 | const baseWebpackConfig = require('./webpack.base.conf')
  8 | const CopyWebpackPlugin = require('copy-webpack-plugin')
  9 | const HtmlWebpackPlugin = require('html-webpack-plugin')
 10 | const ExtractTextPlugin = require('extract-text-webpack-plugin')
 11 | const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
 12 | const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
 13 | 
 14 | const env = require('../config/prod.env')
 15 | 
 16 | const webpackConfig = merge(baseWebpackConfig, {
 17 |   module: {
 18 |     rules: utils.styleLoaders({
 19 |       sourceMap: config.build.productionSourceMap,
 20 |       extract: true,
 21 |       usePostCSS: true
 22 |     })
 23 |   },
 24 |   devtool: config.build.productionSourceMap ? config.build.devtool : false,
 25 |   output: {
 26 |     path: config.build.assetsRoot,
 27 |     filename: utils.assetsPath('js/[name].[chunkhash].js'),
 28 |     chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
 29 |   },
 30 |   plugins: [
 31 |     // http://vuejs.github.io/vue-loader/en/workflow/production.html
 32 |     new webpack.DefinePlugin({
 33 |       'process.env': env
 34 |     }),
 35 |     new UglifyJsPlugin({
 36 |       uglifyOptions: {
 37 |         compress: {
 38 |           warnings: false
 39 |         }
 40 |       },
 41 |       sourceMap: config.build.productionSourceMap,
 42 |       parallel: true
 43 |     }),
 44 |     // extract css into its own file
 45 |     new ExtractTextPlugin({
 46 |       filename: utils.assetsPath('css/[name].[contenthash].css'),
 47 |       // Setting the following option to `false` will not extract CSS from codesplit chunks.
 48 |       // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
 49 |       // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`, 
 50 |       // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
 51 |       allChunks: true,
 52 |     }),
 53 |     // Compress extracted CSS. We are using this plugin so that possible
 54 |     // duplicated CSS from different components can be deduped.
 55 |     new OptimizeCSSPlugin({
 56 |       cssProcessorOptions: config.build.productionSourceMap
 57 |         ? { safe: true, map: { inline: false } }
 58 |         : { safe: true }
 59 |     }),
 60 |     // generate dist index.html with correct asset hash for caching.
 61 |     // you can customize output by editing /index.html
 62 |     // see https://github.com/ampedandwired/html-webpack-plugin
 63 |     new HtmlWebpackPlugin({
 64 |       filename: config.build.index,
 65 |       template: 'index.html',
 66 |       inject: true,
 67 |       minify: {
 68 |         removeComments: true,
 69 |         collapseWhitespace: true,
 70 |         removeAttributeQuotes: true
 71 |         // more options:
 72 |         // https://github.com/kangax/html-minifier#options-quick-reference
 73 |       },
 74 |       // necessary to consistently work with multiple chunks via CommonsChunkPlugin
 75 |       chunksSortMode: 'dependency'
 76 |     }),
 77 |     // keep module.id stable when vendor modules does not change
 78 |     new webpack.HashedModuleIdsPlugin(),
 79 |     // enable scope hoisting
 80 |     new webpack.optimize.ModuleConcatenationPlugin(),
 81 |     // split vendor js into its own file
 82 |     new webpack.optimize.CommonsChunkPlugin({
 83 |       name: 'vendor',
 84 |       minChunks (module) {
 85 |         // any required modules inside node_modules are extracted to vendor
 86 |         return (
 87 |           module.resource &&
 88 |           /\.js$/.test(module.resource) &&
 89 |           module.resource.indexOf(
 90 |             path.join(__dirname, '../node_modules')
 91 |           ) === 0
 92 |         )
 93 |       }
 94 |     }),
 95 |     // extract webpack runtime and module manifest to its own file in order to
 96 |     // prevent vendor hash from being updated whenever app bundle is updated
 97 |     new webpack.optimize.CommonsChunkPlugin({
 98 |       name: 'manifest',
 99 |       minChunks: Infinity
100 |     }),
101 |     // This instance extracts shared chunks from code splitted chunks and bundles them
102 |     // in a separate chunk, similar to the vendor chunk
103 |     // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
104 |     new webpack.optimize.CommonsChunkPlugin({
105 |       name: 'app',
106 |       async: 'vendor-async',
107 |       children: true,
108 |       minChunks: 3
109 |     }),
110 | 
111 |     // copy custom static assets
112 |     new CopyWebpackPlugin([
113 |       {
114 |         from: path.resolve(__dirname, '../static'),
115 |         to: config.build.assetsSubDirectory,
116 |         ignore: ['.*']
117 |       }
118 |     ])
119 |   ]
120 | })
121 | 
122 | if (config.build.productionGzip) {
123 |   const CompressionWebpackPlugin = require('compression-webpack-plugin')
124 | 
125 |   webpackConfig.plugins.push(
126 |     new CompressionWebpackPlugin({
127 |       asset: '[path].gz[query]',
128 |       algorithm: 'gzip',
129 |       test: new RegExp(
130 |         '\\.(' +
131 |         config.build.productionGzipExtensions.join('|') +
132 |         ')$'
133 |       ),
134 |       threshold: 10240,
135 |       minRatio: 0.8
136 |     })
137 |   )
138 | }
139 | 
140 | if (config.build.bundleAnalyzerReport) {
141 |   const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
142 |   webpackConfig.plugins.push(new BundleAnalyzerPlugin())
143 | }
144 | 
145 | module.exports = webpackConfig
146 | 


--------------------------------------------------------------------------------
/lucky/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |   <link href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
  5 |   <link href="./css/common.css" rel="stylesheet">
  6 | 
  7 |   <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  8 |   <script src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
  9 |   <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
 10 |   <script type="text/javascript" src="./js/firework.js"></script>
 11 | </head>
 12 | 
 13 | <body>
 14 |   <div id="app" class="container">
 15 |     <div class="jumbotron">
 16 |       <h1 class="display-4">抽奖活动</h1>
 17 |       <p class="lead">为庆祝我们公司在2017年取得骄人的成绩,感谢各位的支持和信任。本公司特推出年会抽奖, 欢度新的一年到来。</p>
 18 |       <hr class="my-4">
 19 |       <p>本着公正公平原则，抽奖源码放在 github 供大家分析。</p>
 20 | 
 21 |       <div class="form-row align-items-center">
 22 |         <div class="col-auto">
 23 |           <div class="input-group mb-2">
 24 |             <div class="input-group-prepend">
 25 |               <div class="input-group-text">人数</div>
 26 |             </div>
 27 |             <input type="number" class="form-control" v-bind:placeholder="luckyNumbers" v-model="luckyNumbers">
 28 |             <div class="col-auto">
 29 |               <button type="button" class="btn btn-primary" v-if="!isRunning" v-on:click="start" data-toggle="modal" data-target="#lucky-dialog">开始</button>
 30 |             </div>
 31 |           </div>
 32 |         </div>
 33 |       </div>
 34 |     </div>
 35 |     <div class="card">
 36 |       <div class="card-header">
 37 |         中奖名单
 38 |       </div>
 39 |       <div class="card-body">
 40 |         <ol>
 41 |           <user-info v-for="user in luckyUsers" v-bind:user="user" v-bind:key="user.id">
 42 |           </user-info>
 43 |         </ol>
 44 |       </div>
 45 |     </div>
 46 |     <h4></h4>
 47 |     <div class="card">
 48 |       <div class="card-header">
 49 |         参与用户
 50 |       </div>
 51 |       <div class="card-body">
 52 |         <ol>
 53 |           <user-info v-for="user in users" v-bind:user="user" v-bind:key="user.id">
 54 |           </user-info>
 55 |         </ol>
 56 |       </div>
 57 |     </div>
 58 |     <div id="lucky-dialog" class="modal" tabindex="-1" role="dialog">
 59 |       <div class="modal-dialog" role="document">
 60 |         <div class="modal-content">
 61 |           <div class="modal-header">
 62 |             <h5 class="modal-title">抽奖啦~~</h5>
 63 |             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 64 |               <span aria-hidden="true">&times;</span>
 65 |             </button>
 66 |           </div>
 67 |           <div class="modal-body">
 68 |             <div>
 69 |               <img class="img-thumbnail" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1516456058052&di=56bd7dabfb44bf6e2e47195e7b6dbab4&imgtype=0&src=http%3A%2F%2Fcms-bucket.nosdn.127.net%2F7395682b52b144a49fd71e10794f4a3020170703091454.gif">
 70 |             </div>
 71 |           </div>
 72 |           <div class="modal-footer">
 73 |             <button type="button" class="btn btn-primary" v-on:click="lucky">抽奖</button>
 74 |             <button type="button" class="btn btn-secondary" data-dismiss="modal" v-on:click="stop">中止</button>
 75 |           </div>
 76 |         </div>
 77 |       </div>
 78 |     </div>
 79 |     <div id="lucky-users-dialog" class="modal" tabindex="-1" role="dialog">
 80 |       <div class="modal-dialog" role="document">
 81 |         <div class="modal-content modal-content-x">
 82 |           <div class="modal-header">
 83 |             <h5 class="modal-title">中奖名单</h5>
 84 |           </div>
 85 |           <div class="modal-body">
 86 |             <div>
 87 |               <ol>
 88 |                 <user-info v-for="user in luckyUsers" v-bind:user="user" v-bind:key="user.id">
 89 |                 </user-info>
 90 |               </ol>
 91 |             </div>
 92 |           </div>
 93 |           <div class="modal-footer">
 94 |             <a class="btn btn-secondary" href="javascript:location.reload();">确认</a>
 95 |           </div>
 96 |         </div>
 97 |       </div>
 98 |     </div>
 99 |   </div>
100 | </body>
101 | 
102 | </html>
103 | <script>
104 |   // 构建参与用户名单
105 |   const users = function () {
106 |     let users = [];
107 |     for (let i = 0; i < 100; i++) {
108 |       users.push({ id: i + 1, name: 'name' + (i + 1) });
109 |     }
110 | 
111 |     return users;
112 |   }();
113 | 
114 |   // 构建显示用户的信息
115 |   Vue.component('user-info', {
116 |     props: ['user'],
117 |     template: '<li>{{user.name}}</li>'
118 |   });
119 | 
120 |   var app = new Vue({
121 |     el: '#app',
122 |     data: {
123 |       users: users,    // 总用户
124 |       index: 1,        // 当前抽取到的幸运用户的 index
125 |       luckyNumbers: 1, // 人数
126 |       luckyUsers: [],  // 幸运用户
127 |       isRunning: false // 转盘标志
128 |     },
129 |     methods: {
130 |       start() {
131 |         this.isRunning = true;
132 |         this.luckyUsers = [];
133 |         this.run();
134 |       },
135 |       lucky() {
136 |         if (!this.isRunning) {
137 |           alert('请重新开始');
138 |           return;
139 |         }
140 | 
141 |         // 可能是幸运的用户
142 |         let mayBeLuckyUser = this.users[this.index];
143 | 
144 |         // 对当前的幸运用户进行排重，如果已经是了，就丢掉。在额外抽取一次幸运用户
145 |         let repeat = false;
146 |         this.luckyUsers.forEach(function (item) {
147 |           if (item.id === mayBeLuckyUser.id) {
148 |             repeat = true;
149 |           }
150 |         });
151 | 
152 |         if (repeat) {
153 |           setTimeout(this.lucky, 1);
154 |           return;
155 |         }
156 | 
157 |         this.luckyUsers.push(this.users[this.index]);
158 | 
159 |         if (this.luckyUsers.length >= parseInt(this.luckyNumbers, 10)) {
160 |           this.isRunning = false;
161 |           $('#lucky-dialog').modal('hide');
162 | 
163 |           $("#app").fireworks({
164 |             width: "100%",
165 |             height: "100%"
166 |           });
167 | 
168 |           setTimeout(this.showLuckyUsers, 1000);
169 |         }
170 |       },
171 |       stop() {
172 |         this.isRunning = false;
173 |       },
174 |       run() {
175 |         if (!this.isRunning) {
176 |           return;
177 |         }
178 | 
179 |         this.index++;
180 | 
181 |         if (this.index >= users.length) {
182 |           this.index = 1;
183 |         }
184 | 
185 |         setTimeout(this.run, 1);
186 |       },
187 |       showLuckyUsers() {
188 |         $('#lucky-users-dialog').modal('show')
189 |       }
190 |     }
191 |   });
192 | </script>
193 | 


--------------------------------------------------------------------------------
/lucky/js/firework.js:
--------------------------------------------------------------------------------
  1 | (function ($) {
  2 | 	$.fn.fireworks = function(options){
  3 | 		options = options || {};
  4 | 		options.width = options.width || $(this).width();
  5 | 		options.height = options.height || $(this).height();
  6 | 		var fireworksField = this,
  7 | 			SCREEN_WIDTH = options.width,
  8 | 			SCREEN_HEIGHT = options.height,
  9 | 			rockets = [],
 10 | 			particles = [];
 11 | 		var	canvas = document.createElement("canvas");
 12 | 		canvas.style.width = SCREEN_WIDTH + 'px';
 13 | 		canvas.style.height = SCREEN_HEIGHT + 'px';
 14 | 		canvas.width = SCREEN_WIDTH;
 15 | 		canvas.height = SCREEN_HEIGHT;
 16 | 		canvas.style.position = 'absolute';
 17 | 		canvas.style.top = '0px';
 18 | 		canvas.style.left = '0px';
 19 | 		var context = canvas.getContext('2d');
 20 | 		var mousePos = {};
 21 | 		var gravity = 0.05;
 22 | 		var raf;
 23 | 
 24 | 		$(fireworksField).append(canvas);
 25 | 		document.onmousemove = mouseMove;
 26 | 		setInterval(launch, 2000);
 27 | 		//setInterval(loop, 20);
 28 | 		raf = window.requestAnimationFrame(loop);
 29 | 
 30 | 		function mouseMove(ev){
 31 | 			ev = ev || window.event;
 32 | 			mousePos = mousePosition(ev);
 33 | 		}
 34 | 		function mousePosition(ev){
 35 | 			if(ev.pageX || ev.pageY){
 36 | 				return {x:ev.pageX, y:ev.pageY};
 37 | 			}
 38 | 			return {
 39 | 				x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
 40 | 				y:ev.clientY + document.body.scrollTop - document.body.clientTop
 41 | 			};
 42 | 		}
 43 | 		function launch() {
 44 | 			if (rockets.length < 10) {
 45 | 				var rocket = new Rocket(SCREEN_WIDTH/2);
 46 | 				rocket.v.x = Math.random() * 6 - 3;
 47 | 				rocket.v.y = Math.random() * -30 -4;
 48 | 				rocket.color = Math.floor(Math.random() * 360 / 10) * 10;
 49 | 				rockets.push(rocket);
 50 | 			}
 51 | 		}
 52 | 		function loop () {
 53 | 			var existRockets = [];
 54 | 			var existParticles = [];
 55 | 			if (SCREEN_WIDTH != window.innerWidth) {
 56 | 				canvas.width = SCREEN_WIDTH = window.innerWidth;
 57 | 			}
 58 | 			if (SCREEN_HEIGHT != window.innerHeight) {
 59 | 				canvas.height = SCREEN_HEIGHT = window.innerHeight;
 60 | 			}
 61 | 			context.fillStyle = "rgba(0,0,0,0.05)";
 62 | 			context.fillRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
 63 | 			//context.save();
 64 | 			for (var i = 0; i < rockets.length; i ++) {
 65 | 				rockets[i].update();
 66 | 				rockets[i].render(context);
 67 | 				//explosion rules
 68 | 				//1.above the 4/5 screen
 69 | 				//2.close to the mouse
 70 | 				//3.1% random chance above the 1/2 screen
 71 | 				var distance = Math.sqrt(Math.pow(mousePos.x - rockets[i].pos.x, 2) + Math.pow(mousePos.y - rockets[i].pos.y, 2));
 72 | 				var randomChance = (rockets[i].pos.y < SCREEN_HEIGHT/2)? (Math.random() * 100 <= 1) : false;
 73 | 				if (rockets[i].pos.y < SCREEN_HEIGHT/5  || distance <= 50 || randomChance) {
 74 | 					rockets[i].explode();
 75 | 				}else{
 76 | 					existRockets.push(rockets[i]);
 77 | 				}
 78 | 			}
 79 | 			rockets = existRockets;
 80 | 			for (var i = 0; i < particles.length; i ++) {
 81 | 				particles[i].update();
 82 | 				if (particles[i].exist()) {
 83 | 					particles[i].render(context);
 84 | 					existParticles.push(particles[i]);
 85 | 				}
 86 | 			}
 87 | 			particles = existParticles;
 88 | 			//context.restore();
 89 | 			raf = window.requestAnimationFrame(loop);
 90 | 		}
 91 | 		//the particles object
 92 | 		function Particle (pos) {
 93 | 			this.pos = {
 94 | 				x : pos? pos.x:0,
 95 | 				y : pos? pos.y:0
 96 | 			};
 97 | 			this.v = {
 98 | 				x : 0,
 99 | 				y : 0
100 | 			};
101 | 			this.resistance = 0.005;
102 | 			this.size = 5;
103 | 			this.shrink = 0.99;
104 | 			this.alpha = 1;
105 | 			this.fade = 0.97;
106 | 			this.color = "";
107 | 		}
108 | 		Particle.prototype.update = function () {
109 | 			this.v.x += this.resistance;
110 | 			this.v.y -= this.resistance;
111 | 			//gravity
112 | 			this.v.y += gravity;
113 | 			this.pos.x += this.v.x;
114 | 			this.pos.y += this.v.y;
115 | 			this.size *= this.shrink;
116 | 			this.alpha *= this.fade;
117 | 		}
118 | 		Particle.prototype.render = function () {
119 | 			var x = this.pos.x,
120 | 				y = this.pos.y,
121 | 				r = this.size/2;
122 | 			var gradient = context.createRadialGradient(x, y, 0.1, x, y, r);
123 | 			gradient.addColorStop(0, "rgba(255, 255, 255, "+ this.alpha +")");
124 | 			gradient.addColorStop(0.9, "hsla(" + this.color + ", 100%, 50%, 1)");
125 | 			gradient.addColorStop(1, "rgba(0, 0, 0, 1)");
126 | 			context.fillStyle = gradient;
127 | 			context.beginPath();
128 | 			context.arc(x, y, r, 0, 2 * Math.PI, true);
129 | 			context.closePath();
130 | 			context.fill();
131 | 		}
132 | 		Particle.prototype.exist = function () {
133 | 			if (this.alpha >= 0.02 && this.size > 0.8) {
134 | 				return true;
135 | 			}else{
136 | 				return false;
137 | 			}
138 | 		}
139 | 		//the rocket object
140 | 		function Rocket (x) {
141 | 			Particle.apply(this, [{
142 | 				x : x,
143 | 				y : SCREEN_HEIGHT
144 | 			}]);
145 | 		}
146 | 		(function () {
147 | 			var Super = function () {};
148 | 			Super.prototype = Particle.prototype;
149 | 			Rocket.prototype = new Super();
150 | 		})();
151 | 		Rocket.prototype.constructor = Rocket;
152 | 		Rocket.prototype.update = function () {
153 | 			this.pos.x += this.v.x;
154 | 			this.pos.y += this.v.y;
155 | 		}
156 | 		Rocket.prototype.render = function (context) {
157 | 			var x = this.pos.x,
158 | 				y = this.pos.y,
159 | 				r = this.size/2;
160 | 			var gradient = context.createRadialGradient(x, y, 0.1, x, y, r);
161 | 			gradient.addColorStop(0, "#ffff00");
162 | 			gradient.addColorStop(1, "rgba(0, 0, 0, 1)");
163 | 			context.fillStyle = gradient;
164 | 			context.beginPath();
165 | 			context.arc(x, y, r, 0, 2 * Math.PI, true);
166 | 			context.closePath();
167 | 			context.fill();
168 | 		}
169 | 		Rocket.prototype.explode = function () {
170 | 			var count = getGaussianDistributionNumber(240, 20);
171 | 			for (var i = 0; i <= count; i++) {
172 | 				var particle = new Particle(this.pos);
173 | 				var angle = Math.random() * Math.PI * 2;
174 | 				var speed =  getGaussianDistributionNumber(2.5, 0.3);
175 | 				particle.size = 3;
176 |            		particle.v.x = Math.cos(angle) * speed;
177 |             	particle.v.y = Math.sin(angle) * speed;
178 |             	particle.color = this.color;
179 |             	particles.push(particle);
180 | 			}
181 | 		}
182 | 		function getGaussianDistributionNumber (mean, std_dev) {
183 | 			var U1 = -Math.random() + 1;
184 | 			var U2 = -Math.random() + 1;
185 | 			var R = Math.sqrt(-2 * Math.log(U2));
186 | 			var a = 2 * Math.PI * U1;
187 | 			var Z = R * Math.cos(a);
188 | 			return mean + (Z * std_dev);
189 | 		}
190 | 	}
191 | }(jQuery));


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