├── .gitignore ├── README.md ├── demos ├── demo01.html ├── demo02.html ├── demo03.html ├── demo04.html ├── demo05.html ├── demo201702212210.html ├── images │ ├── lifecycle-hooks.png │ └── lifecycle.png └── lib │ ├── vue.js │ └── vue.min.js ├── nginx.conf ├── vue-iview ├── README.md ├── index.html ├── package.json ├── src │ ├── app.vue │ ├── components │ │ ├── layout │ │ │ ├── console-sidebar.vue │ │ │ └── console-topbar.vue │ │ └── main-container │ │ │ ├── select.vue │ │ │ └── table.vue │ ├── config │ │ ├── config.js │ │ └── env.js │ ├── directives │ │ └── time.js │ ├── filters │ │ └── number-separator.js │ ├── images │ │ ├── favicon.ico │ │ └── logo.png │ ├── libs │ │ └── util.js │ ├── main.js │ ├── router.js │ ├── styles │ │ └── common.css │ ├── template │ │ └── index.ejs │ └── views │ │ ├── area.vue │ │ ├── blue.vue │ │ ├── channel.vue │ │ ├── data.vue │ │ ├── member.vue │ │ ├── order.vue │ │ ├── shop.vue │ │ ├── shop │ │ ├── article.vue │ │ ├── comment.vue │ │ ├── left.vue │ │ ├── lost.vue │ │ └── shop-navbar.vue │ │ ├── staff.vue │ │ ├── tab1.vue │ │ └── tab2.vue ├── webpack.base.config.js ├── webpack.dev.config.js └── webpack.prod.config.js ├── vue-strap ├── .babelrc ├── .editorconfig ├── .eslintrc ├── .yo-rc.json ├── README.md ├── build │ ├── 448c34a56d699c29117adc64c43affeb.woff2 │ ├── 89889688147bd7575d6327160d64e760.svg │ ├── bundle.js │ ├── e18bbf611f2a2e43afc071aa2f4e1512.ttf │ ├── f4769f9bdb7466be65088239c12046d1.eot │ └── fa2772327f55d8198301fdb8bcfc8158.woff ├── index.html ├── package.json ├── src │ ├── app.js │ ├── app.vue │ ├── assets │ │ ├── 150x150.png │ │ ├── card-350x150.png │ │ ├── carousel-one.png │ │ ├── carousel-three.png │ │ ├── carousel-two.png │ │ ├── favicon.ico │ │ ├── icons.min.svg │ │ ├── icons.svg │ │ ├── media.png │ │ ├── responsive.png │ │ └── vuestrap-logo.svg │ ├── components │ │ ├── jieneng.vue │ │ ├── layout │ │ │ ├── right-nav.vue │ │ │ └── top-layout.vue │ │ ├── qianbao.vue │ │ ├── qianbao │ │ │ ├── interestFree201691.vue │ │ │ ├── newActivities201699.vue │ │ │ └── receiveCash201699.vue │ │ ├── xkh-shop.vue │ │ └── xkh-user.vue │ ├── routers │ │ └── router.js │ └── styles.css ├── webpack.config.js └── webpack.production.js ├── vue-wap ├── .babelrc ├── .editorconfig ├── .eslintrc ├── .gitignore ├── MP_verify_J3Y2Klo3KReMMkjM.txt ├── README.md ├── assets │ ├── css │ │ ├── LArea.css │ │ ├── font.css │ │ ├── styles.css │ │ └── wch.picker.min.css │ ├── images │ │ ├── 100x100.png │ │ ├── app-logo.png │ │ ├── close-icon.png │ │ ├── login-bg.png │ │ ├── login-logo.png │ │ └── select-icon.png │ └── js │ │ ├── LArea.js │ │ ├── LArea.min.js │ │ ├── LAreaData1.js │ │ ├── LAreaData2.js │ │ ├── fastclick.js │ │ ├── iscroll-probe.js │ │ ├── iscroll.js │ │ ├── wch.picker.js │ │ └── wch.picker.min.js ├── build │ ├── app.min.css │ ├── bd1b5aed3b8519d90be72e4fbd9edaef.png │ └── bundle.js ├── components │ ├── authent.vue │ ├── credit.vue │ ├── js.vue │ ├── js │ │ └── toast.vue │ ├── layout │ │ ├── download-nav.vue │ │ └── footer-layout.vue │ ├── login.vue │ └── my.vue ├── entry │ ├── app.js │ └── app.vue ├── index.html ├── package.json ├── routers │ └── router.js ├── screen_icon.png ├── utils │ └── util.js ├── vuex │ ├── actions.js │ ├── getters.js │ ├── modules │ │ ├── app.js │ │ └── film.js │ ├── mutation-type.js │ └── store.js ├── webpack.config.js └── webpack.production.js ├── vue-webpack-examples1.0 ├── .babelrc ├── .editorconfig ├── .eslintignore ├── .gitignore ├── README.md ├── build │ ├── build.js │ ├── dev-client.js │ ├── dev-server.js │ ├── utils.js │ ├── webpack.base.conf.js │ ├── webpack.dev.conf.js │ └── webpack.prod.conf.js ├── config │ ├── dev.env.js │ ├── index.js │ ├── prod.env.js │ └── test.env.js ├── index.html ├── package.json ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ └── Hello.vue │ └── main.js └── static │ └── .gitkeep ├── vue-webpack-examples2.0 ├── .babelrc ├── .editorconfig ├── .gitignore ├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── dev-client.js │ ├── dev-server.js │ ├── utils.js │ ├── webpack.base.conf.js │ ├── webpack.dev.conf.js │ └── webpack.prod.conf.js ├── config │ ├── dev.env.js │ ├── index.js │ └── prod.env.js ├── index.html ├── package.json ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ └── Hello.vue │ └── main.js └── static │ └── .gitkeep ├── vue1.png ├── vue2-wap ├── .babelrc ├── .editorconfig ├── .eslintrc.js ├── .gitignore ├── README.md ├── build │ ├── build.js │ ├── dev-client.js │ ├── dev-server.js │ ├── utils.js │ ├── webpack.base.conf.js │ ├── webpack.dev.conf.js │ └── webpack.prod.conf.js ├── config │ ├── dev.env.js │ ├── index.js │ ├── prod.env.js │ └── test.env.js ├── index.html ├── package.json ├── src │ ├── App.vue │ ├── assets │ │ ├── css │ │ │ └── reset.css │ │ └── images │ │ │ ├── common │ │ │ ├── ic-bluecard-selected.png │ │ │ ├── ic-bluecard.png │ │ │ ├── ic-life-selected.png │ │ │ ├── ic-life.png │ │ │ ├── ic-my-selected.png │ │ │ ├── ic-my.png │ │ │ ├── ic-xkh-selected.png │ │ │ └── ic-xkh.png │ │ │ └── logo.png │ ├── components │ │ └── footer-nav.vue │ ├── main.js │ ├── routers.js │ └── views │ │ ├── blueCard │ │ └── index.vue │ │ ├── life │ │ └── index.vue │ │ ├── my │ │ └── index.vue │ │ └── schoolCost │ │ └── index.vue └── static │ └── .gitkeep └── vue2.png /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | .idea/ 3 | .DS_Store 4 | ../.DS_Store 5 | node_modules/ 6 | .project 7 | dist 8 | dist/* 9 | -------------------------------------------------------------------------------- /demos/demo01.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 该示例主要对Vue.js做一个大致的介绍 7 | 12 | 13 | 14 | 15 |
16 | {{message}} 17 |
18 |
19 | 20 | 使用v-bind绑定进行绑定 21 | 22 |
23 |
24 |

使用v-if条件指令进行绑定DOM结构到数据

25 |
26 |
27 |

使用v-for循环指令进行绑定数据到数据来渲染列表

28 | 33 |
34 |
35 |

{{message}}

36 | 37 |
38 |
39 |

{{message}}

40 | 41 |
42 |
43 | 47 |
48 | 49 | 145 | 146 | 147 | 148 | -------------------------------------------------------------------------------- /demos/demo02.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 该示例主要对Vue实例做一个大致的介绍 7 | 12 | 13 | 14 | 15 |

该示例主要对Vue.js实例做一个大致的介绍

16 | 17 | 57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /demos/demo03.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 该示例主要对Vue模板语法做一个大致的介绍 7 | 12 | 13 | 14 | 15 |

该示例主要对Vue模板语法做一个大致的介绍

16 |
This will never change: {{ msg }}
17 |
18 | 19 |
20 |

{{number + 1}}{{ok ? 'yes' : 'no'}} {{ message.split('').reverse().join('') }}

21 |

22 |
23 |
24 | {{message | capitalize}} 25 |
26 |
27 | 28 | 百度 29 | 30 | 百度 31 |
32 | 33 | 100 | 101 | 102 | 103 | -------------------------------------------------------------------------------- /demos/demo04.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 该示例主要对Vue计算属性做一个大致的介绍 7 | 12 | 13 | 14 | 15 |
16 |

Original message: "{{message}}"

17 |

Computed reversed message: "{{reversedMessage}}"

18 |
19 |
20 |

Reversed message: "{{reversedMessage()}}"

21 |
22 |
23 | {{fullName}} 24 |
25 |
26 | {{fullName}} 27 |
28 |
29 |

{{firstName}}

30 |

{{lastName}}

31 |
32 | 33 | 116 | 117 | 118 | 119 | -------------------------------------------------------------------------------- /demos/demo05.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 该示例主要对Vue的Class 与 Style 绑定做一个大致的介绍 7 | 12 | 13 | 14 | 15 | 16 | 17 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /demos/demo201702212210.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Vue.js双向绑定的实现原理 7 | 12 | 13 | 14 | 15 |

Vue.js双向绑定的实现原理

16 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /demos/images/lifecycle-hooks.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiubug/learn-vue/17166caf4f397cb70ef7e70fe6a056407f45d3da/demos/images/lifecycle-hooks.png -------------------------------------------------------------------------------- /demos/images/lifecycle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiubug/learn-vue/17166caf4f397cb70ef7e70fe6a056407f45d3da/demos/images/lifecycle.png -------------------------------------------------------------------------------- /nginx.conf: -------------------------------------------------------------------------------- 1 | #user sosout; 2 | worker_processes 2; 3 | 4 | error_log /mnt/logs/nginx/error.log error; 5 | 6 | #error_log logs/error.log notice; 7 | #error_log logs/error.log info; 8 | 9 | #pid /var/run/nginx.pid; 10 | 11 | 12 | events { 13 | use epoll; 14 | multi_accept on; 15 | worker_connections 5120; 16 | } 17 | 18 | 19 | http { 20 | include /etc/nginx/mime.types; 21 | default_type application/octet-stream; 22 | 23 | sendfile on; 24 | keepalive_timeout 65; 25 | 26 | #gzip on; 27 | 28 | fastcgi_intercept_errors on; 29 | 30 | client_max_body_size 6M; 31 | client_body_buffer_size 1M; 32 | log_format main '$remote_addr - $remote_user [$time_local] "$request" ' 33 | '$status $body_bytes_sent "$http_referer" ' 34 | '"$http_user_agent" "$http_x_forwarded_for"'; 35 | 36 | server { 37 | listen 80; 38 | server_name www.sosout.com; 39 | root /mnt/html; 40 | index index.jsp index.htm index.html; 41 | location ~ ^/favicon\.ico$ { 42 | root /mnt/html; 43 | } 44 | if ($host ~* "^(.*?)\.sosout\.com$") { 45 | set $domain $1; 46 | } 47 | location /blog { 48 | if ($domain = "blog.sosout.com") { 49 | return 404; #防止有人访问www.sosout.com/blog 看到blog二级域名的页面，只允许访问blog.sosout.com查看 50 | } 51 | } 52 | location /iview { 53 | if ($domain = "iview.sosout.com") { 54 | return 404; #防止有人访问www.sosout.com/iview 看到iview二级域名的页面，只允许访问iview.sosout.com查看 55 | } 56 | } 57 | location /strap { 58 | if ($domain = "strap.sosout.com") { 59 | return 404; #防止有人访问www.sosout.com/strap 看到iview二级域名的页面，只允许访问iview.sosout.com查看 60 | } 61 | } 62 | location /vue { 63 | if ($domain = "vue.sosout.com") { 64 | return 404; #防止有人访问www.sosout.com/vue 看到vue二级域名的页面，只允许访问vue.sosout.com查看 65 | } 66 | } 67 | location /vue2 { 68 | if ($domain = "vue2.sosout.com") { 69 | return 404; #防止有人访问www.sosout.com/vue2 看到vue2二级域名的页面，只允许访问vue2.sosout.com查看 70 | } 71 | } 72 | location /admin { 73 | if ($domain = "admin.sosout.com") { 74 | return 404; #防止有人访问www.sosout.com/admin 看到admin二级域名的页面，只允许访问admin.sosout.com查看 75 | } 76 | } 77 | 78 | error_page 404 /404.html; 79 | 80 | # redirect server error pages to the static page /50x.html 81 | # 82 | # error_page 500 502 503 504 /50x.html; 83 | # location = /50x.html { 84 | # root html; 85 | # } 86 | 87 | # proxy the PHP scripts to Apache listening on 127.0.0.1:80 88 | # 89 | #location ~ \.php$ { 90 | # proxy_pass http://127.0.0.1; 91 | #} 92 | 93 | # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000 94 | # 95 | #location ~ \.php$ { 96 | # root html; 97 | # fastcgi_pass 127.0.0.1:9000; 98 | # fastcgi_index index.php; 99 | # fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name; 100 | # include fastcgi_params; 101 | #} 102 | 103 | # deny access to .htaccess files, if Apache's document root 104 | # concurs with nginx's one 105 | # 106 | #location ~ /\.ht { 107 | # deny all; 108 | #} 109 | } 110 | 111 | server { 112 | listen 80; 113 | server_name *.sosout.com; 114 | 115 | if ($host ~* "^(.*?)\.sosout\.com$") { 116 | set $domain $1; 117 | } 118 | 119 | location / { 120 | if ($domain ~* "blog") { 121 | root /mnt/html/blog; 122 | } 123 | if ($domain ~* "iview") { 124 | root /mnt/html/vueIview; 125 | } 126 | if ($domain ~* "strap") { 127 | root /mnt/html/vueStrap; 128 | } 129 | if ($domain ~* "vue") { 130 | root /mnt/html/vueWap1; 131 | } 132 | if ($domain ~* "vue2") { 133 | root /mnt/html/vueWap2; 134 | } 135 | if ($domain ~* "admin") { 136 | root /mnt/html/admin; 137 | } 138 | proxy_set_header Host $host; 139 | proxy_set_header X-Real-IP $remote_addr; 140 | proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 141 | proxy_set_header X-Forwarded-Proto $scheme; 142 | } 143 | access_log /mnt/logs/nginx/access.log main; 144 | } 145 | 146 | #tcp_nopush on; 147 | 148 | include /etc/nginx/conf.d/*.conf; 149 | } 150 | -------------------------------------------------------------------------------- /vue-iview/README.md: -------------------------------------------------------------------------------- 1 | # vue-iview管理系统简单demo 2 | ## 前言 3 | > 本工程适用于基于 Vue.js1.0 + vue-router + webpack + iView 的项目，已经配置完成，只需要按步骤初始化即可。贵在vue全家桶的搭建。 4 | 5 | > 如果觉得不错的话，请star一下吧 😊 6 | 7 | 8 | ## 演示 9 | [demo](http://iview.sosout.com/) 10 | 11 | ## 安装 12 | ```bush 13 | // 安装前请先确保已安装node和npm 14 | // 需要提前在全局安装webpack和webpack-dev-server,如果已安装请忽略 15 | npm install webpack -g 16 | npm install webpack-dev-server -g 17 | 18 | // 安装成功后,再安装依赖 19 | npm install 20 | ``` 21 | ## 运行 22 | ### 开发环境 23 | ```bush 24 | // 注意首次使用需要执行下面的init命令来生成入口html文件,以后不用再执行 25 | npm run init 26 | npm run dev 27 | ``` 28 | ### 生产环境(打包) 29 | ```bush 30 | npm run build 31 | ``` 32 | ### 访问 33 | 在浏览器地址栏输入[http://127.0.0.1:8888](http://127.0.0.1:8888) 34 | -------------------------------------------------------------------------------- /vue-iview/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | vue-iview管理系统简单demo 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /vue-iview/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-iview", 3 | "version": "1.0.0", 4 | "description": "A base project using Vue.js1.0、Vue-Router、webpack and with iView.", 5 | "main": "index.js", 6 | "scripts": { 7 | "init": "webpack --progress --config webpack.dev.config.js", 8 | "dev": "webpack-dev-server --inline --hot --port 8888 --compress --history-api-fallback --config webpack.dev.config.js", 9 | "build": "webpack --progress --hide-modules --config webpack.prod.config.js" 10 | }, 11 | "dependencies": { 12 | "iview": "^0.9.9", 13 | "vue": "^1.0.26", 14 | "vue-router": "^0.7.13" 15 | }, 16 | "devDependencies": { 17 | "autoprefixer-loader": "^2.0.0", 18 | "babel": "^6.3.13", 19 | "babel-core": "^6.3.21", 20 | "babel-loader": "^6.2.0", 21 | "babel-plugin-transform-runtime": "^6.3.13", 22 | "babel-preset-es2015": "^6.3.13", 23 | "babel-runtime": "^5.8.34", 24 | "css-loader": "^0.23.1", 25 | "extract-text-webpack-plugin": "^1.0.1", 26 | "file-loader": "^0.8.5", 27 | "html-loader": "^0.3.0", 28 | "html-webpack-plugin": "^2.22.0", 29 | "less": "^2.7.1", 30 | "less-loader": "^2.2.3", 31 | "node-sass": "^3.10.1", 32 | "sass-loader": "^4.0.2", 33 | "style-loader": "^0.13.1", 34 | "url-loader": "^0.5.7", 35 | "vue-hot-reload-api": "^1.2.0", 36 | "vue-html-loader": "^1.2.0", 37 | "vue-loader": "^7.2.0", 38 | "vue-resource": "^1.0.3", 39 | "vue-style-loader": "^1.0.0", 40 | "webpack": "^1.14.0" 41 | }, 42 | "author": "wch", 43 | "license": "ISC" 44 | } 45 | -------------------------------------------------------------------------------- /vue-iview/src/app.vue: -------------------------------------------------------------------------------- 1 | 12 | 19 | 42 | -------------------------------------------------------------------------------- /vue-iview/src/components/layout/console-sidebar.vue: -------------------------------------------------------------------------------- 1 | 70 | 97 | -------------------------------------------------------------------------------- /vue-iview/src/components/layout/console-topbar.vue: -------------------------------------------------------------------------------- 1 | 84 | 107 | -------------------------------------------------------------------------------- /vue-iview/src/components/main-container/select.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /vue-iview/src/config/config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by aresn on 16/7/18. 3 | */ 4 | import Env from './env'; 5 | 6 | let config = { 7 | env: Env 8 | }; 9 | export default config; -------------------------------------------------------------------------------- /vue-iview/src/config/env.js: -------------------------------------------------------------------------------- 1 | export default "development"; -------------------------------------------------------------------------------- /vue-iview/src/directives/time.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by aresn on 16/7/18. 3 | */ 4 | export default { 5 | bind () { 6 | 7 | }, 8 | update () { 9 | this.el.innerHTML = new Date(); 10 | this.timeout = setInterval(() => { 11 | this.el.innerHTML = new Date(); 12 | }) 13 | }, 14 | unbind () { 15 | clearInterval(this.timeout); 16 | } 17 | }; -------------------------------------------------------------------------------- /vue-iview/src/filters/number-separator.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by aresn on 16/7/4. 3 | */ 4 | /** 5 | * 千位分隔符 6 | * */ 7 | export default function (value) { 8 | return value.toString().replace(/\B(?=(\d{3})+$)/g,','); 9 | } -------------------------------------------------------------------------------- /vue-iview/src/images/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiubug/learn-vue/17166caf4f397cb70ef7e70fe6a056407f45d3da/vue-iview/src/images/favicon.ico -------------------------------------------------------------------------------- /vue-iview/src/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiubug/learn-vue/17166caf4f397cb70ef7e70fe6a056407f45d3da/vue-iview/src/images/logo.png -------------------------------------------------------------------------------- /vue-iview/src/libs/util.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by aresn on 16/7/18. 3 | */ 4 | let util = { 5 | 6 | }; 7 | util.alert = function(content) { 8 | window.alert(content); 9 | }; 10 | 11 | export default util; -------------------------------------------------------------------------------- /vue-iview/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import VueRouter from 'vue-router'; 3 | import VueResource from 'vue-resource'; 4 | import App from './app.vue'; // 路由挂载 5 | import Routers from './router'; // 路由列表 6 | import Env from './config/env'; 7 | import iView from 'iview'; 8 | import 'iview/dist/styles/iview.css'; // 使用css 9 | 10 | Vue.use(VueRouter); 11 | Vue.use(VueResource); 12 | Vue.use(iView); 13 | 14 | // 开启debug模式 15 | Vue.config.debug = true; 16 | 17 | // 路由配置 18 | let router = new VueRouter({ 19 | // 是否开启History模式的路由,默认开发环境开启,生产环境不开启。如果生产环境的服务端没有进行相关配置,请慎用 20 | history: Env != 'production' 21 | }); 22 | 23 | router.map(Routers); 24 | 25 | router.beforeEach(() => { 26 | window.scrollTo(0, 0); 27 | }); 28 | 29 | router.afterEach(() => { 30 | 31 | }); 32 | 33 | router.redirect({ 34 | '*': '' 35 | }); 36 | router.start(App, '#app'); 37 | -------------------------------------------------------------------------------- /vue-iview/src/router.js: -------------------------------------------------------------------------------- 1 | const routers = { 2 | // 首页路由 3 | '': { 4 | component(resolve) { 5 | require(['./views/area.vue'], resolve); 6 | } 7 | }, 8 | // 商户管理 9 | '/shop': { 10 | component(resolve) { 11 | require(['./views/shop.vue'], resolve); 12 | }, 13 | subRoutes: { 14 | '': { 15 | component(resolve) { 16 | require(['./views/shop/article.vue'], resolve); 17 | } 18 | }, 19 | '/comment': { 20 | component(resolve) { 21 | require(['./views/shop/comment.vue'], resolve); 22 | } 23 | }, 24 | '/left': { 25 | component(resolve) { 26 | require(['./views/shop/left.vue'], resolve); 27 | } 28 | }, 29 | '/lost': { 30 | component(resolve) { 31 | require(['./views/shop/lost.vue'], resolve); 32 | } 33 | } 34 | 35 | } 36 | }, 37 | // 蓝卡管理 38 | '/blue': { 39 | component(resolve) { 40 | require(['./views/blue.vue'], resolve); 41 | } 42 | }, 43 | // 订单管理 44 | '/order': { 45 | component(resolve) { 46 | require(['./views/order.vue'], resolve); 47 | } 48 | }, 49 | // 渠道管理 50 | '/channel': { 51 | component(resolve) { 52 | require(['./views/channel.vue'], resolve); 53 | } 54 | }, 55 | // 数据管理 56 | '/data': { 57 | component(resolve) { 58 | require(['./views/data.vue'], resolve); 59 | } 60 | }, 61 | // 会员管理 62 | '/member': { 63 | component(resolve) { 64 | require(['./views/member.vue'], resolve); 65 | } 66 | }, 67 | '/area': { 68 | component(resolve) { 69 | require(['./views/area.vue'], resolve); 70 | } 71 | }, 72 | '/staff': { 73 | component(resolve) { 74 | require(['./views/staff.vue'], resolve); 75 | }, 76 | // 定义子路由 77 | subRoutes: { 78 | '/news': { 79 | component(resolve) { 80 | require(['./views/tab1.vue'], resolve); 81 | } 82 | }, 83 | '/message': { 84 | component(resolve) { 85 | require(['./views/tab2.vue'], resolve); 86 | } 87 | } 88 | } 89 | } 90 | }; 91 | 92 | export default routers; 93 | -------------------------------------------------------------------------------- /vue-iview/src/styles/common.css: -------------------------------------------------------------------------------- 1 | .console-product { 2 | width: auto; 3 | position: absolute; 4 | top: 0px; 5 | left: 0px; 6 | bottom: 0px; 7 | right: 0px; 8 | overflow: hidden; 9 | background: #FFF; 10 | } 11 | 12 | .console-product-body { 13 | position: absolute; 14 | width: auto; 15 | top: 0px; 16 | bottom: 0px; 17 | left: 0px; 18 | right: 0px; 19 | overflow: hidden; 20 | overflow-y: auto; 21 | -o-transition: all 0.2s ease; 22 | -ms-transition: all 0.2s ease; 23 | -moz-transition: all 0.2s ease; 24 | -webkit-transition: all 0.2s ease; 25 | padding: 0 15px; 26 | } 27 | 28 | .console-sidebar-full .console-product, 29 | .console-sidebar-full .console-product-body { 30 | left: 180px; 31 | } 32 | 33 | 34 | /* 第三级菜单导航 start */ 35 | 36 | .console-navbar { 37 | position: absolute; 38 | width: 0px; 39 | float: left; 40 | top: 0px; 41 | bottom: 0px; 42 | z-index: 2; 43 | overflow: hidden; 44 | -o-transition: all 0.2s ease; 45 | -ms-transition: all 0.2s ease; 46 | -moz-transition: all 0.2s ease; 47 | -webkit-transition: all 0.2s ease; 48 | background-color: #EAEDF1; 49 | width: 180px; 50 | } 51 | 52 | .console-navbar .navbar-full { 53 | width: 180px; 54 | } 55 | 56 | .console-navbar .product-nav-stage { 57 | width: 180px; 58 | overflow: hidden; 59 | position: absolute; 60 | top: 0px; 61 | bottom: 0px; 62 | right: 0px; 63 | left: 0; 64 | } 65 | 66 | .console-navbar .product-nav-stage .ivu-menu { 67 | width: 200px !important; 68 | height: 100%; 69 | overflow-x: hidden; 70 | overflow-y: auto; 71 | } 72 | 73 | .console-navbar .product-nav-stage .ivu-menu.ivu-menu-light { 74 | background: #EAEDF1; 75 | } 76 | 77 | .console-navbar .product-nav-stage .ivu-menu-item-group-title { 78 | width: 180px; 79 | height: 76px; 80 | line-height: 76px; 81 | background: #D9DEE4; 82 | overflow: hidden; 83 | text-overflow: ellipsis; 84 | white-space: nowrap; 85 | font-size: 12px; 86 | font-weight: bold; 87 | color: #333; 88 | } 89 | 90 | .console-navbar .product-nav-stage .ivu-menu-item { 91 | font-size: 12px; 92 | padding: 12px 24px; 93 | text-indent: 6px; 94 | } 95 | 96 | .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) { 97 | background: #fff; 98 | margin-right: 20px; 99 | width: 180px; 100 | } 101 | 102 | .ivu-menu-vertical .ivu-menu-item-group-title { 103 | padding-left: 0 !important; 104 | text-indent: 20px; 105 | } 106 | 107 | 108 | /* 第三级菜单导航 end */ 109 | -------------------------------------------------------------------------------- /vue-iview/src/template/index.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | vue-iview管理系统简单demo 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /vue-iview/src/views/area.vue: -------------------------------------------------------------------------------- 1 | 36 | 55 | 74 | -------------------------------------------------------------------------------- /vue-iview/src/views/blue.vue: -------------------------------------------------------------------------------- 1 | 4 | 7 | -------------------------------------------------------------------------------- /vue-iview/src/views/channel.vue: -------------------------------------------------------------------------------- 1 | 4 | 7 | -------------------------------------------------------------------------------- /vue-iview/src/views/data.vue: -------------------------------------------------------------------------------- 1 | 4 | 7 | -------------------------------------------------------------------------------- /vue-iview/src/views/member.vue: -------------------------------------------------------------------------------- 1 | 4 | 7 | -------------------------------------------------------------------------------- /vue-iview/src/views/order.vue: -------------------------------------------------------------------------------- 1 | 4 | 7 | -------------------------------------------------------------------------------- /vue-iview/src/views/shop.vue: -------------------------------------------------------------------------------- 1 | 4 | 12 | 30 | -------------------------------------------------------------------------------- /vue-iview/src/views/shop/article.vue: -------------------------------------------------------------------------------- 1 | 4 | 7 | -------------------------------------------------------------------------------- /vue-iview/src/views/shop/comment.vue: -------------------------------------------------------------------------------- 1 | 4 | 7 | -------------------------------------------------------------------------------- /vue-iview/src/views/shop/left.vue: -------------------------------------------------------------------------------- 1 | 4 | 7 | -------------------------------------------------------------------------------- /vue-iview/src/views/shop/lost.vue: -------------------------------------------------------------------------------- 1 | 4 | 7 | -------------------------------------------------------------------------------- /vue-iview/src/views/shop/shop-navbar.vue: -------------------------------------------------------------------------------- 1 | 4 | 26 | 27 | -------------------------------------------------------------------------------- /vue-iview/src/views/staff.vue: -------------------------------------------------------------------------------- 1 | 43 | 58 | 74 | -------------------------------------------------------------------------------- /vue-iview/src/views/tab1.vue: -------------------------------------------------------------------------------- 1 | 27 | 32 | 43 | -------------------------------------------------------------------------------- /vue-iview/src/views/tab2.vue: -------------------------------------------------------------------------------- 1 | 3 | 15 | 33 | -------------------------------------------------------------------------------- /vue-iview/webpack.base.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 开发和生产环境通用的配置 3 | */ 4 | 5 | var path = require('path'); 6 | var webpack = require('webpack'); 7 | 8 | module.exports = { 9 | /* 10 | * entry是入口的配置项 11 | */ 12 | entry: { 13 | main: './src/main', 14 | vendors: ['vue', 'vue-router'] 15 | }, 16 | // 输出 17 | output: { 18 | path: path.join(__dirname, './dist') 19 | }, 20 | // 加载器 21 | module: { 22 | loaders: [ 23 | { test: /\.vue$/, loader: 'vue' }, 24 | { test: /\.js$/, loader: 'babel', exclude: /node_modules/ }, 25 | { test: /\.css$/, loader: 'style!css!autoprefixer'}, 26 | { test: /\.scss$/, loader: 'style!css!sass?sourceMap'}, 27 | { test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/, loader: 'url-loader?limit=8192'}, 28 | { test: /\.(html|tpl)$/, loader: 'html-loader' } 29 | ] 30 | }, 31 | // 转es5 32 | babel: { 33 | presets: ['es2015'], 34 | plugins: ['transform-runtime'] 35 | }, 36 | resolve: { 37 | // require时省略的扩展名，如：require('module') 不需要module.js 38 | extensions: ['', '.js', '.vue'], 39 | // 别名，可以直接使用别名来代表设定的路径以及其他 40 | alias: { 41 | filter: path.join(__dirname, './src/filters'), 42 | components: path.join(__dirname, './src/components') 43 | } 44 | }, 45 | plugins: [ 46 | 47 | ] 48 | }; -------------------------------------------------------------------------------- /vue-iview/webpack.dev.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 开发环境配置 3 | */ 4 | 5 | var webpack = require('webpack'); 6 | var config = require('./webpack.base.config'); 7 | var HtmlWebpackPlugin = require('html-webpack-plugin'); 8 | var ExtractTextPlugin = require('extract-text-webpack-plugin'); 9 | var fs = require('fs'); 10 | 11 | config.devtool = '#source-map'; // source-map 12 | config.output.publicPath = '/dist/'; // 资源路径 13 | config.output.filename = '[name].js'; // 入口js命名 14 | config.output.chunkFilename = '[name].chunk.js'; // 路由js命名 15 | 16 | config.vue = { 17 | loaders: { 18 | css: ExtractTextPlugin.extract( 19 | "style-loader", 20 | "css-loader?sourceMap", 21 | { 22 | publicPath: "/dist/" 23 | } 24 | ), 25 | less: ExtractTextPlugin.extract( 26 | 'vue-style-loader', 27 | 'css-loader!less-loader' 28 | ), 29 | sass: ExtractTextPlugin.extract( 30 | 'vue-style-loader', 31 | 'css-loader!sass-loader' 32 | ) 33 | } 34 | }; 35 | 36 | config.plugins = (config.plugins || []).concat([ 37 | new ExtractTextPlugin("[name].css",{ allChunks : true,resolve : ['modules'] }), // 提取CSS 38 | new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js'), // 提取第三方库 39 | new HtmlWebpackPlugin({ // 构建html文件 40 | filename: '../index.html', 41 | template: './src/template/index.ejs', 42 | inject: false 43 | }) 44 | ]); 45 | 46 | // 写入环境变量 47 | fs.open('./src/config/env.js', 'w', function (err, fd) { 48 | var buf = 'export default "development";'; 49 | fs.write(fd,buf,0,buf.length,0,function(err,written,buffer){}); 50 | }); 51 | 52 | module.exports = config; -------------------------------------------------------------------------------- /vue-iview/webpack.prod.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 生产环境配置 3 | */ 4 | var webpack = require('webpack'); 5 | var config = require('./webpack.base.config'); 6 | var HtmlWebpackPlugin = require('html-webpack-plugin'); 7 | var ExtractTextPlugin = require('extract-text-webpack-plugin'); 8 | var fs = require('fs'); 9 | 10 | config.output.publicPath = './dist/'; // 资源路径,根据需要可改为cdn地址 11 | config.output.filename = '[name].[hash].js'; // 带hash值的入口js名称 12 | config.output.chunkFilename = '[name].[hash].chunk.js'; // 带hash值的路由js名称 13 | 14 | config.vue = { 15 | loaders: { 16 | css: ExtractTextPlugin.extract( 17 | "style-loader", 18 | "css-loader", 19 | { 20 | publicPath: "../dist/" 21 | // 特别提醒,如果这里的publicPath是以http://xxx.xxx这样以http://开头的,要写成 22 | // publicPath: "http:\\xxx.xxx",否则会编译为"http:/xxx.xxx" 23 | } 24 | ), 25 | less: ExtractTextPlugin.extract( 26 | 'vue-style-loader', 27 | 'css-loader!less-loader' 28 | ), 29 | sass: ExtractTextPlugin.extract( 30 | 'vue-style-loader', 31 | 'css-loader!sass-loader' 32 | ) 33 | } 34 | }; 35 | 36 | config.plugins = (config.plugins || []).concat([ 37 | new ExtractTextPlugin("[name].[hash].css",{ allChunks : true,resolve : ['modules'] }), // 提取带hash值的css名称 38 | new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.[hash].js'), // 提取带hash值的第三方库名称 39 | new webpack.DefinePlugin({ 40 | 'process.env': { 41 | NODE_ENV: '"production"' 42 | } 43 | }), 44 | new webpack.optimize.UglifyJsPlugin({ // 压缩文件 45 | compress: { 46 | warnings: false 47 | } 48 | }), 49 | new HtmlWebpackPlugin({ // 构建html文件 50 | filename: '../index.html', 51 | template: './src/template/index.ejs', 52 | inject: false 53 | }) 54 | ]); 55 | 56 | // 写入环境变量 57 | fs.open('./src/config/env.js', 'w', function (err, fd) { 58 | var buf = 'export default "production";'; 59 | fs.write(fd,buf,0,buf.length,0,function(err,written,buffer){}); 60 | }); 61 | 62 | module.exports = config; -------------------------------------------------------------------------------- /vue-strap/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | presets: ['es2015'], 3 | plugins: ['transform-runtime'] 4 | } -------------------------------------------------------------------------------- /vue-strap/.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false 13 | -------------------------------------------------------------------------------- /vue-strap/.yo-rc.json: -------------------------------------------------------------------------------- 1 | { 2 | "generator-vuejs": { 3 | "includeRouter": true, 4 | "includeVuestrap": true 5 | } 6 | } -------------------------------------------------------------------------------- /vue-strap/README.md: -------------------------------------------------------------------------------- 1 | # vue-iview管理系统简单demo 2 | 3 | ## 前言 4 | > 本工程适用于基于 Vue.js1.0 + vue-router + webpack + vue-strap 的项目，已经配置完成，只需要按步骤初始化即可。贵在vue全家桶的搭建。 5 | 6 | > 如果觉得不错的话，请star一下吧 😊 7 | 8 | 9 | ## 演示 10 | [demo](http://strap.sosout.com/) 11 | 12 | ## 安装 13 | ```bush 14 | // 安装前请先确保已安装node和npm 15 | // 需要提前在全局安装webpack和webpack-dev-server,如果已安装请忽略 16 | npm install webpack -g 17 | npm install webpack-dev-server -g 18 | 19 | // 安装成功后,再安装依赖 20 | npm install 21 | ``` 22 | ## 运行 23 | ### 开发环境 24 | ```bush 25 | // 注意首次使用需要执行下面的init命令来生成入口html文件,以后不用再执行 26 | npm run init 27 | npm run dev 28 | ``` 29 | ### 生产环境(打包) 30 | ```bush 31 | npm run build 32 | ``` 33 | ### 访问 34 | 在浏览器地址栏输入[http://127.0.0.1:8888](http://127.0.0.1:8888) 35 | -------------------------------------------------------------------------------- /vue-strap/build/448c34a56d699c29117adc64c43affeb.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiubug/learn-vue/17166caf4f397cb70ef7e70fe6a056407f45d3da/vue-strap/build/448c34a56d699c29117adc64c43affeb.woff2 -------------------------------------------------------------------------------- /vue-strap/build/e18bbf611f2a2e43afc071aa2f4e1512.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiubug/learn-vue/17166caf4f397cb70ef7e70fe6a056407f45d3da/vue-strap/build/e18bbf611f2a2e43afc071aa2f4e1512.ttf -------------------------------------------------------------------------------- /vue-strap/build/f4769f9bdb7466be65088239c12046d1.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiubug/learn-vue/17166caf4f397cb70ef7e70fe6a056407f45d3da/vue-strap/build/f4769f9bdb7466be65088239c12046d1.eot -------------------------------------------------------------------------------- /vue-strap/build/fa2772327f55d8198301fdb8bcfc8158.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiubug/learn-vue/17166caf4f397cb70ef7e70fe6a056407f45d3da/vue-strap/build/fa2772327f55d8198301fdb8bcfc8158.woff -------------------------------------------------------------------------------- /vue-strap/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | vue-strap文档简单demo 7 | 8 | 9 | 14 | 15 | 16 | 17 | 20 |
21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /vue-strap/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-strap", 3 | "version": "0.0.1", 4 | "description": "A base project using Vue.js1.0、Vue-Router、webpack and with vueStrap.", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "webpack-dev-server --inline --hot --port 8888 --quiet", 8 | "build": "rd/s/q build && webpack --progress --hide-modules --config webpack.production.js" 9 | }, 10 | "dependencies": { 11 | "vue-router": "^0.7.6", 12 | "vue-strap": "^1.0.2", 13 | "vue": "^1.0.8" 14 | }, 15 | "devDependencies": { 16 | "autoprefixer-loader": "^3.2.0", 17 | "babel-core": "^6.1.21", 18 | "babel-loader": "^6.1.0", 19 | "babel-plugin-transform-runtime": "^6.1.18", 20 | "babel-preset-es2015": "^6.1.18", 21 | "babel-runtime": "^5.8.0", 22 | "css-loader": "^0.21.0", 23 | "extract-text-webpack-plugin": "^0.9.1", 24 | "file-loader": "^0.8.5", 25 | "less": "^2.7.1", 26 | "less-loader": "^2.2.3", 27 | "style-loader": "^0.13.0", 28 | "url-loader": "^0.5.7", 29 | "vue-hot-reload-api": "^1.2.0", 30 | "vue-html-loader": "^1.0.0", 31 | "vue-loader": "^7.0.3", 32 | "webpack": "^1.12.2", 33 | "webpack-dev-server": "^1.12.1" 34 | }, 35 | "peerDependencies": { 36 | "bootstrap": "^3.3.5" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /vue-strap/src/app.js: -------------------------------------------------------------------------------- 1 | // 引入静态资源 2 | import 'bootstrap/dist/css/bootstrap.css'; 3 | import './styles.css'; 4 | 5 | import app from './app.vue'; 6 | 7 | import routerMap from './routers/router.js'; 8 | 9 | // 引入vue 10 | import Vue from 'vue'; 11 | // 引入vue-router 12 | import VueRouter from 'vue-router'; 13 | 14 | 15 | 16 | Vue.config.debug = process.env.NODE_ENV !== 'production'; 17 | 18 | Vue.use(VueRouter); 19 | 20 | const router = new VueRouter({ 21 | hashbang: false 22 | }); 23 | routerMap(router); 24 | 25 | // 路由器需要一个根组件 26 | const App = Vue.extend(app); 27 | 28 | router.start(App, '#app'); 29 | -------------------------------------------------------------------------------- /vue-strap/src/app.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 35 | -------------------------------------------------------------------------------- /vue-strap/src/assets/150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiubug/learn-vue/17166caf4f397cb70ef7e70fe6a056407f45d3da/vue-strap/src/assets/150x150.png -------------------------------------------------------------------------------- /vue-strap/src/assets/card-350x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiubug/learn-vue/17166caf4f397cb70ef7e70fe6a056407f45d3da/vue-strap/src/assets/card-350x150.png -------------------------------------------------------------------------------- /vue-strap/src/assets/carousel-one.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiubug/learn-vue/17166caf4f397cb70ef7e70fe6a056407f45d3da/vue-strap/src/assets/carousel-one.png -------------------------------------------------------------------------------- /vue-strap/src/assets/carousel-three.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiubug/learn-vue/17166caf4f397cb70ef7e70fe6a056407f45d3da/vue-strap/src/assets/carousel-three.png -------------------------------------------------------------------------------- /vue-strap/src/assets/carousel-two.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiubug/learn-vue/17166caf4f397cb70ef7e70fe6a056407f45d3da/vue-strap/src/assets/carousel-two.png -------------------------------------------------------------------------------- /vue-strap/src/assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiubug/learn-vue/17166caf4f397cb70ef7e70fe6a056407f45d3da/vue-strap/src/assets/favicon.ico -------------------------------------------------------------------------------- /vue-strap/src/assets/media.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiubug/learn-vue/17166caf4f397cb70ef7e70fe6a056407f45d3da/vue-strap/src/assets/media.png -------------------------------------------------------------------------------- /vue-strap/src/assets/responsive.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiubug/learn-vue/17166caf4f397cb70ef7e70fe6a056407f45d3da/vue-strap/src/assets/responsive.png -------------------------------------------------------------------------------- /vue-strap/src/components/jieneng.vue: -------------------------------------------------------------------------------- 1 | 24 | 44 | -------------------------------------------------------------------------------- /vue-strap/src/components/layout/right-nav.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 32 | -------------------------------------------------------------------------------- /vue-strap/src/components/layout/top-layout.vue: -------------------------------------------------------------------------------- 1 | 11 | -------------------------------------------------------------------------------- /vue-strap/src/components/qianbao.vue: -------------------------------------------------------------------------------- 1 | 27 | 52 | -------------------------------------------------------------------------------- /vue-strap/src/components/qianbao/newActivities201699.vue: -------------------------------------------------------------------------------- 1 | 88 | -------------------------------------------------------------------------------- /vue-strap/src/components/xkh-shop.vue: -------------------------------------------------------------------------------- 1 | 30 | 50 | -------------------------------------------------------------------------------- /vue-strap/src/components/xkh-user.vue: -------------------------------------------------------------------------------- 1 | 33 | 53 | -------------------------------------------------------------------------------- /vue-strap/src/routers/router.js: -------------------------------------------------------------------------------- 1 | import qianbao from '../components/qianbao.vue'; 2 | import jieneng from '../components/jieneng.vue'; 3 | import xkhShop from '../components/xkh-shop.vue'; 4 | import xkhUser from '../components/xkh-user.vue'; 5 | 6 | // 路由 7 | export default function(router) { 8 | // 定义路由映射 9 | router.map({ 10 | '*': { 11 | name: 'qianbao', 12 | component: qianbao, 13 | params: { 14 | userId: 123 15 | } 16 | }, 17 | '/qianbao': { 18 | // 定义路由的名字，方便使用 19 | name: 'qianbao', 20 | // 引用的组件名称，对应上面使用‘import’导入的组件 21 | component: qianbao 22 | // component: require('../components/com.vue') 还可以直接使用这样的方式也是没问题的。不过没有import集中引入那么直观 23 | }, 24 | '/jieneng': { 25 | name: 'jieneng', 26 | component: jieneng 27 | }, 28 | '/xkhshop': { 29 | name: 'xkhshop', 30 | component: xkhShop 31 | }, 32 | '/xkhuser': { 33 | name: 'xkhuser', 34 | component: xkhUser 35 | } 36 | }); 37 | //定义全局的重定向规则。全局的重定向会在匹配当前路径之前执行。 38 | router.redirect({ 39 | '*': '/qianbao' //重定向任意未匹配路径到/com 40 | }); 41 | 42 | router.beforeEach(({to, from, next}) => { 43 | document.documentElement.style.overflowY='scroll'; 44 | let toPath = to.path; 45 | let fromPath = from.path; 46 | if(toPath == '/qianbao') { 47 | document.title = '正蓝钱包'; 48 | } else if(toPath == '/jieneng') { 49 | document.title = '正蓝节能'; 50 | } else if(toPath == '/xkhshop') { 51 | document.title = '校开花用户版'; 52 | } else if(toPath == '/xkhuser') { 53 | document.title = '校开花商户版'; 54 | } 55 | next() 56 | }) 57 | 58 | router.afterEach(function ({to}) { 59 | console.log(`成功浏览到: ${to.path}`) 60 | }) 61 | } -------------------------------------------------------------------------------- /vue-strap/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | entry: { 3 | app: './src/app.js' 4 | }, 5 | output: { 6 | path: './build', 7 | publicPath: '/build/', 8 | filename: 'bundle.js' 9 | }, 10 | module: { 11 | loaders: [ 12 | { test: /\.vue$/, loader: 'vue' }, 13 | { test: /\.js$/, exclude: /node_modules/, loader: 'babel'}, 14 | { test: /\.(png|jpg)$/, loader: 'file' }, 15 | { test: /\.(png|jpg)$/, loader: 'url?limit=10000'}, 16 | { test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff' }, 17 | { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream' }, 18 | { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file' }, 19 | { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml' }, 20 | { test: /\.css$/, loader: 'style-loader!css-loader' }, 21 | { test: /\.less$/, loader: 'style-loader!css-loader!less-loader!autoprefixer-loader?{browsers:["last 3 versions","safari >= 6","ios >= 6","android >= 4.0", ">5%"]}' } 22 | ] 23 | }, 24 | devtool: '#source-map' 25 | } 26 | -------------------------------------------------------------------------------- /vue-strap/webpack.production.js: -------------------------------------------------------------------------------- 1 | var webpack = require('webpack') 2 | var ExtractTextPlugin = require('extract-text-webpack-plugin') 3 | 4 | module.exports = { 5 | entry: { 6 | app: './src/app.js' 7 | }, 8 | output: { 9 | path: './build', 10 | publicPath: '/build/', 11 | filename: 'bundle.js' 12 | }, 13 | module: { 14 | loaders: [ 15 | { test: /\.vue$/, loader: 'vue' }, 16 | { test: /\.js$/, exclude: /node_modules/, loader: 'babel'}, 17 | { test: /\.(png|jpg)$/, loader: 'file' }, 18 | { test: /\.(png|jpg)$/, loader: 'url?limit=10000'}, 19 | { test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff' }, 20 | { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream' }, 21 | { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file' }, 22 | { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml' }, 23 | { test: /\.css$/, loader: 'style-loader!css-loader' }, 24 | { test: /\.less$/, loader: 'style-loader!css-loader!less-loader!autoprefixer-loader?{browsers:["last 3 versions","safari >= 6","ios >= 6","android >= 4.0", ">5%"]}' } 25 | ] 26 | }, 27 | plugins: [ 28 | new webpack.DefinePlugin({ 29 | 'process.env': { 30 | NODE_ENV: '"production"' 31 | } 32 | }), 33 | new webpack.optimize.UglifyJsPlugin({ 34 | compress: { 35 | warnings: false 36 | } 37 | }), 38 | new ExtractTextPlugin('[name].min.css', { 39 | allChunks: true 40 | }) 41 | ], 42 | vue: { 43 | loaders: { 44 | css: ExtractTextPlugin.extract('css') 45 | } 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /vue-wap/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | presets: ['es2015'], 3 | plugins: ['transform-runtime'] 4 | } -------------------------------------------------------------------------------- /vue-wap/.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false 13 | -------------------------------------------------------------------------------- /vue-wap/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | .yo-rc.json 4 | *.log -------------------------------------------------------------------------------- /vue-wap/MP_verify_J3Y2Klo3KReMMkjM.txt: -------------------------------------------------------------------------------- 1 | J3Y2Klo3KReMMkjM -------------------------------------------------------------------------------- /vue-wap/README.md: -------------------------------------------------------------------------------- 1 | # vue-wap 2 | 3 | ## 前言 4 | > 本工程适用于基于vue1.0、vuex、vue-router实现的移动端SPA框架模版，已经配置完成，只需要按步骤初始化即可。贵在vue全家桶的搭建。 5 | 6 | > 如果觉得不错的话，请star一下吧 😊 7 | 8 | 9 | ## 演示 10 | [demo](http://vue.sosout.com/)（请用chrome的手机模式预览） 11 | 12 | ### 移动端扫描下方二维码 13 | ![](https://github.com/sosout/learn-vue/blob/master/vue1.png) 14 | 15 | ## 安装 16 | ```bush 17 | // 安装前请先确保已安装node和npm 18 | // 需要提前在全局安装webpack和webpack-dev-server,如果已安装请忽略 19 | npm install webpack -g 20 | npm install webpack-dev-server -g 21 | 22 | // 安装成功后,再安装依赖 23 | npm install 24 | ``` 25 | ## 运行 26 | ### 开发环境 27 | ```bush 28 | npm run dev 29 | ``` 30 | ### 生产环境(打包) 31 | ```bush 32 | npm run build 33 | ``` 34 | 35 | ### 访问 36 | 在浏览器地址栏输入[http://127.0.0.1:8888](http://127.0.0.1:8888) 37 | -------------------------------------------------------------------------------- /vue-wap/assets/css/LArea.css: -------------------------------------------------------------------------------- 1 | /** 2 | * LArea移动端城市选择控件 3 | * 4 | * version:1.7.2 5 | * 6 | * author:黄磊 7 | * 8 | * git:https://github.com/xfhxbb/LArea 9 | * 10 | * Copyright 2016 11 | * 12 | * Licensed under MIT 13 | * 14 | * 最近修改于： 2016-6-12 16:47:41 15 | */ 16 | .gearArea { 17 | font-family: Helvetica Neue, Helvetica, Arial, sans-serif; 18 | font-size: 10px; 19 | background-color: rgba(0, 0, 0, 0.2); 20 | display: block; 21 | position: fixed; 22 | top: 0; 23 | left: 0; 24 | width: 100%; 25 | height: 100%; 26 | z-index: 9900; 27 | overflow: hidden; 28 | -webkit-animation-fill-mode: both; 29 | animation-fill-mode: both 30 | } 31 | 32 | .area_ctrl { 33 | vertical-align: middle; 34 | background-color: #d5d8df; 35 | color: #000; 36 | margin: 0; 37 | height: auto; 38 | width: 100%; 39 | position: absolute; 40 | left: 0; 41 | bottom: 0; 42 | z-index: 9901; 43 | overflow: hidden; 44 | -webkit-transform: translate3d(0, 0, 0); 45 | transform: translate3d(0, 0, 0) 46 | } 47 | 48 | .slideInUp { 49 | -webkit-animation: slideInUp .3s; 50 | animation: slideInUp .3s; 51 | } 52 | 53 | @-webkit-keyframes slideInUp { 54 | from { 55 | -webkit-transform: translate3d(0, 100%, 0); 56 | transform: translate3d(0, 100%, 0) 57 | } 58 | to { 59 | -webkit-transform: translate3d(0, 0, 0); 60 | transform: translate3d(0, 0, 0) 61 | } 62 | } 63 | 64 | @keyframes slideInUp { 65 | from { 66 | -webkit-transform: translate3d(0, 100%, 0); 67 | transform: translate3d(0, 100%, 0) 68 | } 69 | to { 70 | -webkit-transform: translate3d(0, 0, 0); 71 | transform: translate3d(0, 0, 0) 72 | } 73 | } 74 | 75 | .area_roll { 76 | display: -webkit-box; 77 | display: -webkit-flex; 78 | display: -ms-flexbox; 79 | display: flex; 80 | width: 100%; 81 | height: auto; 82 | overflow: hidden; 83 | background-color: transparent; 84 | -webkit-mask: -webkit-gradient(linear, 0% 50%, 0% 100%, from(#debb47), to(rgba(36, 142, 36, 0))); 85 | -webkit-mask: -webkit-linear-gradient(top, #debb47 50%, rgba(36, 142, 36, 0)) 86 | } 87 | 88 | .area_roll>div { 89 | font-size: 1.6em; 90 | height: 10em; 91 | float: left; 92 | background-color: transparent; 93 | position: relative; 94 | overflow: hidden; 95 | -webkit-box-flex: 1; 96 | -webkit-flex: 1; 97 | -ms-flex: 1; 98 | flex: 1 99 | } 100 | 101 | .area_roll>div .gear { 102 | width: 100%; 103 | float: left; 104 | position: absolute; 105 | z-index: 9902; 106 | margin-top: 4em 107 | } 108 | 109 | .area_roll_mask { 110 | -webkit-mask: -webkit-gradient(linear, 0% 40%, 0% 0%, from(#debb47), to(rgba(36, 142, 36, 0))); 111 | -webkit-mask: -webkit-linear-gradient(bottom, #debb47 50%, rgba(36, 142, 36, 0)); 112 | padding: 0 113 | } 114 | 115 | .area_grid { 116 | position: relative; 117 | top: 4em; 118 | width: 100%; 119 | height: 2em; 120 | margin: 0; 121 | box-sizing: border-box; 122 | z-index: 0; 123 | border-top: 1px solid #abaeb5; 124 | border-bottom: 1px solid #abaeb5 125 | } 126 | 127 | .area_roll>div:nth-child(3) .area_grid>div { 128 | left: 42% 129 | } 130 | 131 | .area_btn { 132 | color: #0575f2; 133 | font-size: 1.6em; 134 | line-height: 1em; 135 | text-align: center; 136 | padding: .8em 1em 137 | } 138 | 139 | .area_btn_box:before, 140 | .area_btn_box:after { 141 | content: ''; 142 | position: absolute; 143 | height: 1px; 144 | width: 100%; 145 | display: block; 146 | background-color: #96979b; 147 | z-index: 15; 148 | -webkit-transform: scaleY(0.33); 149 | transform: scaleY(0.33) 150 | } 151 | 152 | .area_btn_box { 153 | display: -webkit-box; 154 | display: -webkit-flex; 155 | display: -ms-flexbox; 156 | display: flex; 157 | -webkit-box-pack:justify; 158 | -webkit-justify-content:space-between; 159 | -ms-flex-pack:justify; 160 | justify-content:space-between; 161 | -webkit-box-align: stretch; 162 | -webkit-align-items: stretch; 163 | -ms-flex-align: stretch; 164 | align-items: stretch; 165 | background-color: #f1f2f4; 166 | position: relative 167 | } 168 | 169 | .area_btn_box:before { 170 | left: 0; 171 | top: 0; 172 | -webkit-transform-origin: 50% 20%; 173 | transform-origin: 50% 20% 174 | } 175 | 176 | .area_btn_box:after { 177 | left: 0; 178 | bottom: 0; 179 | -webkit-transform-origin: 50% 70%; 180 | transform-origin: 50% 70% 181 | } 182 | 183 | .tooth { 184 | height: 2em; 185 | line-height: 2em; 186 | text-align: center; 187 | display: -webkit-box; 188 | display: -webkit-flex; 189 | display: -ms-flexbox; 190 | display: flex; 191 | line-clamp: 1; 192 | -webkit-box-orient:vertical; 193 | -webkit-box-direction:normal; 194 | -webkit-flex-direction:column; 195 | -ms-flex-direction:column; 196 | flex-direction:column; 197 | overflow: hidden 198 | } 199 | -------------------------------------------------------------------------------- /vue-wap/assets/css/wch.picker.min.css: -------------------------------------------------------------------------------- 1 | .wch-pciker-list li,.wch-picker{box-sizing:border-box;list-style:none;overflow:hidden}.wch-picker{background-color:#ddd;position:relative;height:200px;border:1px solid rgba(0,0,0,.1);-webkit-user-select:none;user-select:none}.wch-dtpicker,.wch-poppicker{left:0;background-color:#eee;box-shadow:0 -5px 7px 0 rgba(0,0,0,.1);width:100%}.wch-picker-inner{box-sizing:border-box;position:relative;width:100%;height:100%;overflow:hidden;-webkit-mask-box-image:-webkit-linear-gradient(bottom,transparent,transparent 5%,#fff 20%,#fff 80%,transparent 95%,transparent);-webkit-mask-box-image:linear-gradient(top,transparent,transparent 5%,#fff 20%,#fff 80%,transparent 95%,transparent)}.wch-pciker-list,.wch-pciker-rule{box-sizing:border-box;padding:0;margin:-18px 0 0;width:100%;height:36px;line-height:36px;position:absolute;left:0;top:50%}.wch-pciker-rule-bg{z-index:0}.wch-pciker-rule-ft{z-index:2;border-top:solid 1px rgba(0,0,0,.1);border-bottom:solid 1px rgba(0,0,0,.1)}.wch-pciker-list{z-index:1;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:perspective(1000px) rotateY(0) rotateX(0);transform:perspective(1000px) rotateY(0) rotateX(0)}.wch-pciker-list li{width:100%;height:100%;position:absolute;text-align:center;vertical-align:middle;-webkit-backface-visibility:hidden;backface-visibility:hidden;font-size:12px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;color:#888;padding:0 8px;white-space:nowrap;-webkit-text-overflow:ellipsis;text-overflow:ellipsis;cursor:default;visibility:hidden}.wch-pciker-list li.highlight,.wch-pciker-list li.visible{visibility:visible}.wch-pciker-list li.highlight{color:#222}.wch-poppicker{position:fixed;z-index:999;border-top:solid 1px #ccc;-webkit-transition:.3s;transition:.3s;bottom:0;-webkit-transform:translateY(300px);transform:translateY(300px)}.wch-poppicker.wch-active{-webkit-transform:translateY(0);transform:translateY(0)}.wch-android-5-1 .wch-poppicker{bottom:-300px;-webkit-transition-property:bottom;transition-property:bottom;-webkit-transform:none;transform:none}.wch-android-5-1 .wch-poppicker.wch-active{bottom:0;-webkit-transition-property:bottom;transition-property:bottom;-webkit-transform:none;transform:none}.wch-poppicker-header{padding:6px;font-size:14px;color:#007aff}.wch-poppicker-header .wch-btn{font-size:14px;padding:5px 10px}.wch-poppicker-btn-cancel{float:left}.wch-poppicker-btn-ok{float:right}.wch-poppicker-clear{clear:both;height:0;line-height:0;font-size:0;overflow:hidden}.wch-poppicker-body{position:relative;width:100%;height:200px;border-top:solid 1px #ddd}.wch-poppicker-body .wch-picker{width:100%;height:100%;margin:0;border:0;float:left}.wch-dtpicker{position:fixed;z-index:999999;border-top:solid 1px #ccc;-webkit-transition:.3s;bottom:0;-webkit-transform:translateY(300px)}.wch-dtpicker.wch-active{-webkit-transform:translateY(0)}.wch-dtpicker-active-for-page{overflow:hidden!important}.wch-android-5-1 .wch-dtpicker{bottom:-300px;-webkit-transition-property:bottom;-webkit-transform:none}.wch-android-5-1 .wch-dtpicker.wch-active{bottom:0;-webkit-transition-property:bottom;-webkit-transform:none}.wch-dtpicker-header{padding:6px;font-size:14px;color:#888}.wch-dtpicker-header button{font-size:12px;padding:5px 10px}.wch-dtpicker-header button:last-child{float:right}.wch-dtpicker-body{position:relative;width:100%;height:200px}.wch-ios .wch-dtpicker-body{-webkit-perspective:1200px;perspective:1200px;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.wch-dtpicker-title h5{display:inline-block;width:20%;margin:0;padding:8px;text-align:center;border-top:solid 1px #ddd;background-color:#f0f0f0;border-bottom:solid 1px #ccc}[data-type=hour] [data-id=title-i],[data-type=hour] [data-id=picker-i],[data-type=month] [data-id=title-i],[data-type=month] [data-id=picker-d],[data-type=month] [data-id=title-d],[data-type=month] [data-id=picker-h],[data-type=month] [data-id=title-h],[data-type=month] [data-id=picker-i],[data-type=time] [data-id=picker-y],[data-type=time] [data-id=picker-m],[data-type=time] [data-id=picker-d],[data-type=time] [data-id=title-y],[data-type=time] [data-id=title-m],[data-type=time] [data-id=title-d],[data-type=date] [data-id=title-i],[data-type=date] [data-id=picker-h],[data-type=date] [data-id=title-h],[data-type=date] [data-id=picker-i]{display:none}.wch-dtpicker .wch-picker{width:20%;height:100%;margin:0;float:left;border:0}[data-type=hour] [data-id=picker-h],[data-type=hour] [data-id=title-h],[data-type=datetime] [data-id=picker-h],[data-type=datetime] [data-id=title-h]{border-left:dotted 1px #ccc}[data-type=datetime] .wch-picker,[data-type=time] .wch-dtpicker-title h5{width:20%}[data-type=date] .wch-dtpicker-title h5,[data-type=date] .wch-picker{width:33.3%}[data-type=hour] .wch-dtpicker-title h5,[data-type=hour] .wch-picker{width:25%}[data-type=month] .wch-dtpicker-title h5,[data-type=month] .wch-picker,[data-type=time] .wch-dtpicker-title h5,[data-type=time] .wch-picker{width:50%}.wch-poppicker{position:fixed;left:0;width:100%;z-index:999;background-color:#eee;border-top:solid 1px #ccc;box-shadow:0 -5px 7px 0 rgba(0,0,0,0.1);-webkit-transition:.3s;bottom:0;-webkit-transform:translateY(300px)} 2 | .wch-poppicker.wch-active{-webkit-transform:translateY(0px)}.wch-android-5-1 .wch-poppicker{bottom:-300px;-webkit-transition-property:bottom;-webkit-transform:none}.wch-android-5-1 .wch-poppicker.wch-active{bottom:0;-webkit-transition-property:bottom;-webkit-transform:none}.wch-backdrop{position:fixed;z-index:998;top:0;right:0;bottom:0;left:0;background-color:rgba(0,0,0,.3)} -------------------------------------------------------------------------------- /vue-wap/assets/images/100x100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiubug/learn-vue/17166caf4f397cb70ef7e70fe6a056407f45d3da/vue-wap/assets/images/100x100.png -------------------------------------------------------------------------------- /vue-wap/assets/images/app-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiubug/learn-vue/17166caf4f397cb70ef7e70fe6a056407f45d3da/vue-wap/assets/images/app-logo.png -------------------------------------------------------------------------------- /vue-wap/assets/images/close-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiubug/learn-vue/17166caf4f397cb70ef7e70fe6a056407f45d3da/vue-wap/assets/images/close-icon.png -------------------------------------------------------------------------------- /vue-wap/assets/images/login-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiubug/learn-vue/17166caf4f397cb70ef7e70fe6a056407f45d3da/vue-wap/assets/images/login-bg.png -------------------------------------------------------------------------------- /vue-wap/assets/images/login-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiubug/learn-vue/17166caf4f397cb70ef7e70fe6a056407f45d3da/vue-wap/assets/images/login-logo.png -------------------------------------------------------------------------------- /vue-wap/assets/images/select-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiubug/learn-vue/17166caf4f397cb70ef7e70fe6a056407f45d3da/vue-wap/assets/images/select-icon.png -------------------------------------------------------------------------------- /vue-wap/assets/js/LArea.min.js: -------------------------------------------------------------------------------- 1 | window.LArea=function(){var e=function(){this.gearArea,this.data,this.index=0,this.value=[0,0,0]};return e.prototype={init:function(e){switch(this.params=e,this.trigger=document.querySelector(e.trigger),e.valueTo&&(this.valueTo=document.querySelector(e.valueTo)),this.keys=e.keys,this.type=e.type||1,this.type){case 1:case 2:break;default:throw new Error("错误提示: 没有这种数据源类型")}this.bindEvent()},getData:function(e){var t=this;if("object"==typeof t.params.data)t.data=t.params.data,e();else{var a=new XMLHttpRequest;a.open("get",t.params.data),a.onload=function(r){if(a.status>=200&&a.status<300||0===a.status){var i=JSON.parse(a.responseText);t.data=i.data,e&&e()}},a.send()}},bindEvent:function(){function e(e){d.gearArea=document.createElement("div"),d.gearArea.className="gearArea",d.gearArea.innerHTML='
取消
确定
',document.body.appendChild(d.gearArea),t();var n=d.gearArea.querySelector(".larea_cancel");n.addEventListener("touchstart",function(e){d.close(e)});var s=d.gearArea.querySelector(".larea_finish");s.addEventListener("touchstart",function(e){d.finish(e)});var o=d.gearArea.querySelector(".area_province"),c=d.gearArea.querySelector(".area_city"),v=d.gearArea.querySelector(".area_county");o.addEventListener("touchstart",a),c.addEventListener("touchstart",a),v.addEventListener("touchstart",a),o.addEventListener("touchmove",r),c.addEventListener("touchmove",r),v.addEventListener("touchmove",r),o.addEventListener("touchend",i),c.addEventListener("touchend",i),v.addEventListener("touchend",i)}function t(){switch(d.gearArea.querySelector(".area_province").setAttribute("val",d.value[0]),d.gearArea.querySelector(".area_city").setAttribute("val",d.value[1]),d.gearArea.querySelector(".area_county").setAttribute("val",d.value[2]),d.type){case 1:d.setGearTooth(d.data);break;case 2:d.setGearTooth(d.data[0])}}function a(e){e.preventDefault();for(var t=e.target;;){if(t.classList.contains("gear"))break;t=t.parentElement}clearInterval(t["int_"+t.id]),t["old_"+t.id]=e.targetTouches[0].screenY,t["o_t_"+t.id]=(new Date).getTime();var a=t.getAttribute("top");a?t["o_d_"+t.id]=parseFloat(a.replace(/em/g,"")):t["o_d_"+t.id]=0,t.style.webkitTransitionDuration=t.style.transitionDuration="0ms"}function r(e){e.preventDefault();for(var t=e.target;;){if(t.classList.contains("gear"))break;t=t.parentElement}t["new_"+t.id]=e.targetTouches[0].screenY,t["n_t_"+t.id]=(new Date).getTime();var a=30*(t["new_"+t.id]-t["old_"+t.id])/window.innerHeight;t["pos_"+t.id]=t["o_d_"+t.id]+a,t.style["-webkit-transform"]="translate3d(0,"+t["pos_"+t.id]+"em,0)",t.setAttribute("top",t["pos_"+t.id]+"em"),e.targetTouches[0].screenY<1&&i(e)}function i(e){e.preventDefault();for(var t=e.target;;){if(t.classList.contains("gear"))break;t=t.parentElement}var a=(t["new_"+t.id]-t["old_"+t.id])/(t["n_t_"+t.id]-t["o_t_"+t.id]);Math.abs(a)<=.2?t["spd_"+t.id]=0>a?-.08:.08:Math.abs(a)<=.5?t["spd_"+t.id]=0>a?-.16:.16:t["spd_"+t.id]=a/2,t["pos_"+t.id]||(t["pos_"+t.id]=0),n(t)}function n(e){function t(){e.style.webkitTransitionDuration=e.style.transitionDuration="200ms",r=!0}var a=0,r=!1;clearInterval(e["int_"+e.id]),e["int_"+e.id]=setInterval(function(){var i=e["pos_"+e.id],n=e["spd_"+e.id]*Math.exp(-.03*a);if(i+=n,Math.abs(n)>.1);else{var d=2*Math.round(i/2);i=d,t()}i>0&&(i=0,t());var o=2*-(e.dataset.len-1);if(o>i&&(i=o,t()),r){var c=Math.abs(i)/2;s(e,c),clearInterval(e["int_"+e.id])}e["pos_"+e.id]=i,e.style["-webkit-transform"]="translate3d(0,"+i+"em,0)",e.setAttribute("top",i+"em"),a++},30)}function s(e,t){switch(t=Math.round(t),e.setAttribute("val",t),d.type){case 1:d.setGearTooth(d.data);break;case 2:switch(e.dataset.areatype){case"area_province":d.setGearTooth(d.data[0]);break;case"area_city":var a=e.childNodes[t].getAttribute("ref"),r=[],i=d.data[2];for(var n in i)if(n==a){r=i[n];break}d.index=2,d.setGearTooth(r)}}}var d=this;d.getData(function(){d.trigger.addEventListener("click",e)})},setGearTooth:function(e){var t=this,a=e||[],r=a.length,i=t.gearArea.querySelectorAll(".gear"),n=i[t.index].getAttribute("val"),s=r-1;if(n>s&&(n=s),i[t.index].setAttribute("data-len",r),r>0){var d,o=a[n][this.keys.id];switch(t.type){case 1:d=a[n].child;break;case 2:var c=t.data[t.index+1];for(var v in c)if(v==o){d=c[v];break}}for(var l="",v=0;r>v;v++)l+="
"+a[v][this.keys.name]+"
";if(i[t.index].innerHTML=l,i[t.index].style["-webkit-transform"]="translate3d(0,"+2*-n+"em,0)",i[t.index].setAttribute("top",2*-n+"em"),i[t.index].setAttribute("val",n),t.index++,t.index>2)return void(t.index=0);t.setGearTooth(d)}else i[t.index].innerHTML="
",i[t.index].setAttribute("val",0),1==t.index&&(i[2].innerHTML="
",i[2].setAttribute("val",0)),t.index=0},finish:function(e){var t=this,a=t.gearArea.querySelector(".area_province"),r=t.gearArea.querySelector(".area_city"),i=t.gearArea.querySelector(".area_county"),n=parseInt(a.getAttribute("val")),s=a.childNodes[n].textContent,d=a.childNodes[n].getAttribute("ref"),o=parseInt(r.getAttribute("val")),c=r.childNodes[o].textContent,v=r.childNodes[o].getAttribute("ref"),l=parseInt(i.getAttribute("val")),u=i.childNodes[l].textContent,h=i.childNodes[l].getAttribute("ref");t.trigger.value=s+(c?","+c:"")+(u?","+u:""),t.value=[n,o,l],this.valueTo&&(this.valueTo.value=d+(v?","+v:"")+(h?","+h:"")),t.close(e)},close:function(e){e.preventDefault();var t=this,a=new CustomEvent("input");t.trigger.dispatchEvent(a),document.body.removeChild(t.gearArea)}},e}(); -------------------------------------------------------------------------------- /vue-wap/build/app.min.css: -------------------------------------------------------------------------------- 1 | .footer-layout[_v-8ad7bb62]{padding-bottom:15px}.cell-group[_v-8ad7bb62]{margin-top:15px}.js-container[_v-128dee37]{padding-bottom:15px}.toast-container[_v-128dee37]{padding:44px 15px 55px}.cell-group[_v-128dee37]{margin-top:15px} -------------------------------------------------------------------------------- /vue-wap/build/bd1b5aed3b8519d90be72e4fbd9edaef.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiubug/learn-vue/17166caf4f397cb70ef7e70fe6a056407f45d3da/vue-wap/build/bd1b5aed3b8519d90be72e4fbd9edaef.png -------------------------------------------------------------------------------- /vue-wap/components/authent.vue: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /vue-wap/components/credit.vue: -------------------------------------------------------------------------------- 1 | 30 | -------------------------------------------------------------------------------- /vue-wap/components/js.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 33 | -------------------------------------------------------------------------------- /vue-wap/components/js/toast.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 61 | -------------------------------------------------------------------------------- /vue-wap/components/layout/download-nav.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | -------------------------------------------------------------------------------- /vue-wap/components/layout/footer-layout.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 19 | 41 | 42 | -------------------------------------------------------------------------------- /vue-wap/components/login.vue: -------------------------------------------------------------------------------- 1 | 25 | 26 | -------------------------------------------------------------------------------- /vue-wap/components/my.vue: -------------------------------------------------------------------------------- 1 | 40 | 41 | 62 | -------------------------------------------------------------------------------- /vue-wap/entry/app.js: -------------------------------------------------------------------------------- 1 | // 引入静态资源 2 | import 'normalize.css'; 3 | 4 | //引入flex 5 | import 'flex.css'; 6 | 7 | import 'mint-ui/lib/style.css'; 8 | import '../assets/css/font.css'; 9 | import '../assets/css/styles.css'; 10 | 11 | import '../assets/css/LArea.css'; 12 | 13 | import app from './app.vue'; 14 | 15 | import routerMap from '../routers/router.js'; 16 | 17 | // 引入vue 18 | import Vue from 'vue'; 19 | // 引入MintUI 20 | import MintUI from 'mint-ui'; 21 | // 引入vue-router 22 | import VueRouter from 'vue-router'; 23 | // 引入vue-resource 24 | import VueResource from 'vue-resource'; 25 | import FastClick from '../assets/js/fastclick.js'; 26 | 27 | if ('addEventListener' in document) { 28 | document.addEventListener('DOMContentLoaded', function() { 29 | FastClick.attach(document.body); 30 | }, false); 31 | } 32 | 33 | Vue.use(MintUI); 34 | Vue.use(VueRouter); 35 | Vue.use(VueResource); 36 | 37 | const router = new VueRouter({ 38 | hashbang: false 39 | }); 40 | routerMap(router); 41 | 42 | // 路由器需要一个根组件 43 | const App = Vue.extend(app); 44 | 45 | router.start(App, '#app'); 46 | -------------------------------------------------------------------------------- /vue-wap/entry/app.vue: -------------------------------------------------------------------------------- 1 | 7 | 25 | 26 | -------------------------------------------------------------------------------- /vue-wap/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 33 | 34 | 35 | 36 | 37 | 38 | 43 | 44 | 45 | 46 |
47 | 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /vue-wap/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "xkhwap", 3 | "version": "0.0.0", 4 | "description": "基于vue1.0、vuex、vue-router实现的移动端SPA框架模版", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "webpack-dev-server --inline --hot --port 8888 --quiet", 8 | "build": "rd/s/q build && webpack --progress --hide-modules --config webpack.production.js" 9 | }, 10 | "dependencies": { 11 | "vue-router": "^0.7.6", 12 | "vue": "^1.0.8", 13 | "normalize.css": "^4.1.1" 14 | }, 15 | "devDependencies": { 16 | "babel-core": "^6.1.21", 17 | "babel-loader": "^6.1.0", 18 | "babel-plugin-transform-runtime": "^6.1.18", 19 | "babel-preset-es2015": "^6.1.18", 20 | "babel-runtime": "^5.8.0", 21 | "css-loader": "^0.21.0", 22 | "extract-text-webpack-plugin": "^0.9.1", 23 | "file-loader": "^0.8.5", 24 | "flex.css": "^1.1.4", 25 | "localStorage": "^1.0.3", 26 | "style-loader": "^0.13.0", 27 | "url-loader": "^0.5.7", 28 | "vue-hot-reload-api": "^1.2.0", 29 | "vue-html-loader": "^1.0.0", 30 | "vue-loader": "^7.0.3", 31 | "vue-resource": "^1.0.0", 32 | "vuex": "^1.0.0-rc.2", 33 | "webpack": "^1.12.2", 34 | "webpack-dev-server": "^1.12.1" 35 | }, 36 | "peerDependencies": {} 37 | } 38 | -------------------------------------------------------------------------------- /vue-wap/routers/router.js: -------------------------------------------------------------------------------- 1 | import credit from '../components/credit.vue'; 2 | import login from '../components/login.vue'; 3 | import authent from '../components/authent.vue'; 4 | import my from '../components/my.vue'; 5 | import jsToast from '../components/js/toast.vue'; 6 | 7 | // 路由 8 | export default function(router) { 9 | // 定义路由映射 10 | router.map({ 11 | '*': { 12 | name: 'credit', 13 | component: credit 14 | }, 15 | '/credit': { 16 | // 定义路由的名字，方便使用 17 | name: 'credit', 18 | // 引用的组件名称，对应上面使用‘import’导入的组件 19 | component: credit 20 | // component: require('../components/credit.vue') 还可以直接使用这样的方式也是没问题的。不过没有import集中引入那么直观 21 | }, 22 | '/login': { 23 | name: 'login', 24 | component: login 25 | }, 26 | '/authent': { 27 | name: 'authent', 28 | component: authent 29 | }, 30 | '/my': { 31 | name: 'my', 32 | component: my 33 | }, 34 | '/js/toast': { 35 | name: jsToast, 36 | component: jsToast 37 | } 38 | }); 39 | //定义全局的重定向规则。全局的重定向会在匹配当前路径之前执行。 40 | router.redirect({ 41 | '*': '/credit' //重定向任意未匹配路径到/com 42 | }); 43 | 44 | router.beforeEach(({ to, from, next }) => { 45 | let toPath = to.path; 46 | if (toPath == '/credit') { 47 | document.title = '授信认证'; 48 | } else if (toPath == '/login') { 49 | document.title = '注册/登录'; 50 | } else if (toPath == '/authent') { 51 | document.title = '我的认证'; 52 | } else if (toPath == '/my') { 53 | document.title = '我的'; 54 | } else if (toPath == '/js/toast') { 55 | document.title = '简短的消息提示框'; 56 | } else if (toPath == '/js/indicator') { 57 | 58 | } 59 | let iframe = document.createElement('iframe'); 60 | iframe.src = '/screen_icon.png'; 61 | iframe.style.display = 'none'; 62 | (document.body || document.documentElement).appendChild(iframe); 63 | iframe.onload = function() { 64 | setTimeout(function() { 65 | iframe.remove() 66 | }, 0); 67 | } 68 | 69 | next(); 70 | }); 71 | 72 | router.afterEach(function({ to }) { 73 | console.log(`成功浏览到: ${to.path}`) 74 | }); 75 | } 76 | -------------------------------------------------------------------------------- /vue-wap/screen_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiubug/learn-vue/17166caf4f397cb70ef7e70fe6a056407f45d3da/vue-wap/screen_icon.png -------------------------------------------------------------------------------- /vue-wap/utils/util.js: -------------------------------------------------------------------------------- 1 | import IScroll from '../assets/js/iscroll-probe.js'; 2 | 3 | // IScroll 初始化 4 | export const scrollObj = (id) => { 5 | let myScroll = new IScroll(id, { 6 | probeType: 3, 7 | //momentum: false,//关闭惯性滑动 8 | mouseWheel: true, //鼠标滑轮开启 9 | scrollbars: true, //滚动条可见 10 | scrollbars: 'custom', 11 | interactiveScrollbars: true, //滚动条可拖动 12 | shrinkScrollbars: 'scale', // 当滚动边界之外的滚动条是由少量的收缩 13 | useTransform: true, //CSS转化 14 | useTransition: true, //CSS过渡 15 | bounce: true, //反弹 16 | freeScroll: false, //只能在一个方向上滑动 17 | startX: 0, 18 | startY: 0 19 | }); 20 | return myScroll; 21 | }; 22 | 23 | // IScroll 刷新页面 24 | export const onCompletion = (obj) => { 25 | setTimeout(function() { 26 | obj.refresh(); 27 | }, 0); 28 | }; 29 | -------------------------------------------------------------------------------- /vue-wap/vuex/actions.js: -------------------------------------------------------------------------------- 1 | import vue from 'vue'; 2 | 3 | /** 4 | * get请求 5 | * @param {String} options.url api地址 6 | * @param {String} options.query query参数 7 | * @return {Promise} Promise 8 | */ 9 | const _get = ({ url, query }, dispatch) => { 10 | if (dispatch) dispatch('START_LOADING') 11 | let _url; 12 | if (query) { 13 | _url = `http://m.maizuo.com/v4/api${url}?${query}`; 14 | } else { 15 | _url = `http://m.maizuo.com/v4/api${url}`; 16 | } 17 | 18 | return vue.http.get(_url) 19 | .then((res) => { 20 | if (dispatch) dispatch('FINISH_LOADING') 21 | if (res.status >= 200 && res.status < 300) { 22 | return res.data; 23 | } 24 | return Promise.reject(new Error(res.status)); 25 | }); 26 | }; 27 | 28 | /** 29 | * post请求 30 | * @param {String} url api地址 31 | * @param {Object} params 包含post内容的object 32 | * @return {Promise} Promise 33 | */ 34 | const _post = (url, params) => { 35 | return vue.http.post(`http://m.maizuo.com/v4/api${url}`, params) 36 | .then((res) => { 37 | if (res.status >= 200 && res.status < 300) { 38 | return res.data; 39 | } 40 | return Promise.reject(new Error(res.status)); 41 | }); 42 | }; 43 | 44 | /** 45 | * 获取即将开始电影列表 46 | * @param {Function} options.dispatch store对象解构出来的函数，无需手动提供 47 | * @param {Number} page 页数 48 | * @param {Number} count 每页数量 49 | * @return {Promise} Promise 50 | */ 51 | export const fetchComingSoonLists = ({ dispatch }, page, count) => { 52 | const url = '/film/coming-soon'; 53 | const query = `count=${count}&page=${page}&_t=` + new Date().getTime(); 54 | return _get({ url, query }, dispatch) 55 | .then((json) => { 56 | if (json.status === 0) { 57 | return dispatch('FETCH_COMING_SOON_SUCCESS', json.data); 58 | } 59 | return Promise.reject(new Error('fetchFilmsLists failure')); 60 | }) 61 | .catch((error) => { 62 | // dispatch('FETCH_TOPIC_LISTS_FAILURE', topicTab, page); 63 | return Promise.reject(error); 64 | }); 65 | }; 66 | 67 | /** 68 | * 获取正在热映电影列表 69 | * @param {Function} options.dispatch store对象解构出来的函数，无需手动提供 70 | * @param {Number} page 页数 71 | * @param {Number} count 每页数量 72 | * @return {Promise} Promise 73 | */ 74 | export const fetchNowPlayingLists = ({ dispatch }, page, count) => { 75 | const url = '/film/now-playing'; 76 | const query = `count=${count}&page=${page}&_t=` + new Date().getTime(); 77 | return _get({ url, query }, dispatch) 78 | .then((json) => { 79 | if (json.status === 0) { 80 | return dispatch('FETCH_NOW_PLAYING_SUCCESS', json.data); 81 | } 82 | return Promise.reject(new Error('FETCH_NOW_PLAYING failure')); 83 | }) 84 | .catch((error) => { 85 | // dispatch('FETCH_TOPIC_LISTS_FAILURE', topicTab, page); 86 | return Promise.reject(error); 87 | }); 88 | }; 89 | 90 | /** 91 | * 获取电影详情 92 | * @param {Function} options.dispatch store对象解构出来的函数，无需手动提供 93 | * @param {Number} id 电影id 94 | * @return {Promise} Promise 95 | */ 96 | export const fetchFilmDetail = ({ dispatch }, id) => { 97 | const url = '/film/' + id; 98 | const query = '_t=' + new Date().getTime() 99 | return _get({ url, query }, dispatch) 100 | .then((json) => { 101 | if (json.status === 0) { 102 | return dispatch('FETCH_DETAIL_SUCCESS', json.data); 103 | } 104 | return Promise.reject(new Error('FETCH_DETAIL failure')); 105 | }) 106 | .catch((error) => { 107 | // dispatch('FETCH_TOPIC_LISTS_FAILURE', topicTab, page); 108 | return Promise.reject(error); 109 | }); 110 | }; 111 | 112 | /** 113 | * 获取广告 114 | * @param {Function} options.dispatch store对象解构出来的函数，无需手动提供 115 | * @param {Number} id 电影id 116 | * @return {Promise} Promise 117 | */ 118 | export const fetchBillboards = ({ dispatch }) => { 119 | const url = '/billboard/home'; 120 | const query = '_t=' + new Date().getTime() 121 | return _get({ url, query }, dispatch) 122 | .then((json) => { 123 | if (json.status === 0) { 124 | return dispatch('FETCH_BANNER_SUCCESS', json.data); 125 | } 126 | return Promise.reject(new Error('FETCH_BANNER_SUCCESS failure')); 127 | }) 128 | .catch((error) => { 129 | // dispatch('FETCH_TOPIC_LISTS_FAILURE', topicTab, page); 130 | return Promise.reject(error); 131 | }); 132 | }; 133 | 134 | export const changeLeftNavState = ({ dispatch }, isShow) => { 135 | dispatch('CHANGE_LEFTNAV_STATE', isShow) 136 | }; 137 | 138 | // 改变顶部下载导航状态 139 | export const changeDownloadNavState = ({ dispatch }, isShow) => { 140 | dispatch('CHANGE_DOWNLOADNAV_STATE', isShow); 141 | }; 142 | 143 | // 改变路由 144 | export const changeRouterName = ({ dispatch }, routerName) => { 145 | dispatch('CHANGE_ROUTER_NAME', routerName); 146 | }; 147 | 148 | 149 | -------------------------------------------------------------------------------- /vue-wap/vuex/getters.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by weichanghua on 16/9/12. 3 | * 因为一个应用只有一个state,导致state变得比较大,通过getters获取对应组件的数据,方便管理 4 | */ 5 | export const getComingSoonFilms = state => state.film.comingSoonFilms; 6 | export const getNowPlayingFilms = state => state.film.nowPlayingFilms; 7 | export const getDetail = state => state.film.detail; 8 | export const getBillboards = state => state.film.billboards; 9 | export const getLeftNavState = state => state.app.leftNavState; 10 | export const getLoading = state => state.app.loading; 11 | 12 | 13 | export const getDownloadNavState = state => state.app.downloadNavState; 14 | export const getRouterName = state => state.app.routerName; 15 | -------------------------------------------------------------------------------- /vue-wap/vuex/modules/app.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by weichanghua on 16/10/13. 3 | */ 4 | import { 5 | CHANGE_LEFTNAV_STATE, 6 | START_LOADING, 7 | FINISH_LOADING, 8 | CHANGE_DOWNLOADNAV_STATE, 9 | CHANGE_ROUTER_NAME 10 | } from '../mutation-type' 11 | 12 | const state = { 13 | leftNavState: false, 14 | loading: false, 15 | downloadNavState: false, 16 | routerName: '*' 17 | } 18 | 19 | const mutations = { 20 | //切换左侧导航的显示状态 21 | [CHANGE_LEFTNAV_STATE](state, isShow) { 22 | state.leftNavState = isShow 23 | }, 24 | [START_LOADING](state) { 25 | state.loading = true 26 | }, 27 | [FINISH_LOADING](state) { 28 | state.loading = false 29 | }, 30 | [CHANGE_DOWNLOADNAV_STATE](state, isShow) { 31 | state.downloadNavState = isShow; 32 | }, 33 | [CHANGE_ROUTER_NAME](state, routerName) { 34 | state.routerName = routerName; 35 | } 36 | } 37 | 38 | export default { 39 | state, 40 | mutations 41 | } 42 | -------------------------------------------------------------------------------- /vue-wap/vuex/modules/film.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by zhengguorong on 16/6/22. 3 | */ 4 | import { 5 | FETCH_COMING_SOON_SUCCESS, 6 | FETCH_NOW_PLAYING_SUCCESS, 7 | FETCH_DETAIL_SUCCESS, 8 | FETCH_BANNER_SUCCESS} 9 | from '../mutation-type' 10 | 11 | const state = { 12 | comingSoonFilms: [], 13 | nowPlayingFilms: [], 14 | detail:{}, 15 | billboards:[] 16 | } 17 | 18 | const mutations = { 19 | //获取即将上映电影列表 20 | [FETCH_COMING_SOON_SUCCESS] (state,data){ 21 | state.comingSoonFilms=data.films; 22 | }, 23 | //获取即将上映电影列表 24 | [FETCH_NOW_PLAYING_SUCCESS] (state,data){ 25 | state.nowPlayingFilms=data.films; 26 | }, 27 | //获取电影详情 28 | [FETCH_DETAIL_SUCCESS] (state,data){ 29 | state.detail=data.film 30 | }, 31 | //获取广告列表 32 | [FETCH_BANNER_SUCCESS] (state,data){ 33 | state.billboards = data.billboards 34 | } 35 | } 36 | 37 | export default{ 38 | state, 39 | mutations 40 | } 41 | -------------------------------------------------------------------------------- /vue-wap/vuex/mutation-type.js: -------------------------------------------------------------------------------- 1 | export const FETCH_COMING_SOON_SUCCESS = 'FETCH_COMING_SOON_SUCCESS'; 2 | export const FETCH_NOW_PLAYING_SUCCESS = 'FETCH_NOW_PLAYING_SUCCESS'; 3 | export const FETCH_DETAIL_SUCCESS = 'FETCH_DETAIL_SUCCESS'; 4 | export const FETCH_BANNER_SUCCESS = 'FETCH_BANNER_SUCCESS'; 5 | 6 | export const CHANGE_LEFTNAV_STATE = 'CHANGE_LEFTNAV_STATE'; 7 | export const START_LOADING = 'START_LOADING'; 8 | export const FINISH_LOADING = 'FINISH_LOADING'; 9 | 10 | export const CHANGE_DOWNLOADNAV_STATE = 'CHANGE_DOWNLOADNAV_STATE'; 11 | export const CHANGE_ROUTER_NAME = 'CHANGE_ROUTER_NAME'; 12 | -------------------------------------------------------------------------------- /vue-wap/vuex/store.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by weichanghua on 16/9/9. 3 | */ 4 | import Vue from 'vue'; 5 | import Vuex from 'vuex'; 6 | import film from './modules/film'; 7 | import app from './modules/app'; 8 | import createLogger from 'vuex/logger'; 9 | 10 | const debug = process.env.NODE_ENV !== 'production'; 11 | Vue.use(Vuex); 12 | Vue.config.debug = debug; 13 | 14 | export default new Vuex.Store({ 15 | middlewares: debug ? [createLogger()] : [], 16 | modules: { 17 | film, 18 | app 19 | }, 20 | strict: debug // 这个属性如果设置true 一旦非mutation地方修改store里的值 就会提示error,意思就别随便动我的状态 21 | }); 22 | -------------------------------------------------------------------------------- /vue-wap/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | entry: { 3 | app: './entry/app.js' 4 | }, 5 | output: { 6 | path: './build', 7 | publicPath: '/build/', 8 | filename: 'bundle.js' 9 | }, 10 | module: { 11 | loaders: [ 12 | { test: /\.vue$/, loader: 'vue' }, 13 | { test: /\.js$/, exclude: /node_modules/, loader: 'babel'}, 14 | { test: /\.(png|jpg)$/, loader: 'url?limit=10000'}, 15 | { test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff' }, 16 | { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream' }, 17 | { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file' }, 18 | { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml' }, 19 | { test: /\.css$/, loader: 'style-loader!css-loader' } 20 | ] 21 | }, 22 | devtool: '#source-map' 23 | } 24 | -------------------------------------------------------------------------------- /vue-wap/webpack.production.js: -------------------------------------------------------------------------------- 1 | var webpack = require('webpack') 2 | var ExtractTextPlugin = require('extract-text-webpack-plugin') 3 | 4 | module.exports = { 5 | entry: { 6 | app: './entry/app.js' 7 | }, 8 | output: { 9 | path: './build', 10 | publicPath: '/xkhwap/build/', 11 | filename: 'bundle.js' 12 | }, 13 | module: { 14 | loaders: [ 15 | { test: /\.vue$/, loader: 'vue' }, 16 | { test: /\.js$/, exclude: /node_modules/, loader: 'babel'}, 17 | { test: /\.(png|jpg)$/, loader: 'url?limit=10000'}, 18 | { test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff' }, 19 | { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream' }, 20 | { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file' }, 21 | { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml' }, 22 | { test: /\.css$/, loader: 'style-loader!css-loader' } 23 | ] 24 | }, 25 | plugins: [ 26 | new webpack.DefinePlugin({ 27 | 'process.env': { 28 | NODE_ENV: '"production"' 29 | } 30 | }), 31 | new webpack.optimize.UglifyJsPlugin({ 32 | compress: { 33 | warnings: false 34 | } 35 | }), 36 | new ExtractTextPlugin('[name].min.css', { 37 | allChunks: true 38 | }) 39 | ], 40 | vue: { 41 | loaders: { 42 | css: ExtractTextPlugin.extract('css') 43 | } 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /vue-webpack-examples1.0/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015", "stage-2"], 3 | "plugins": ["transform-runtime"], 4 | "comments": false 5 | } 6 | -------------------------------------------------------------------------------- /vue-webpack-examples1.0/.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 | -------------------------------------------------------------------------------- /vue-webpack-examples1.0/.eslintignore: -------------------------------------------------------------------------------- 1 | build/*.js 2 | config/*.js 3 | -------------------------------------------------------------------------------- /vue-webpack-examples1.0/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log 5 | selenium-debug.log 6 | test/unit/coverage 7 | test/e2e/reports 8 | -------------------------------------------------------------------------------- /vue-webpack-examples1.0/README.md: -------------------------------------------------------------------------------- 1 | # vue-webpack-examples1.0 2 | 3 | > A Vue.js 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 | # run unit tests 18 | npm run unit 19 | 20 | # run e2e tests 21 | npm run e2e 22 | 23 | # run all tests 24 | npm test 25 | ``` 26 | 27 | For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader). 28 | -------------------------------------------------------------------------------- /vue-webpack-examples1.0/build/build.js: -------------------------------------------------------------------------------- 1 | // https://github.com/shelljs/shelljs 2 | require('shelljs/global') 3 | env.NODE_ENV = 'production' 4 | 5 | var path = require('path') 6 | var config = require('../config') 7 | var ora = require('ora') 8 | var webpack = require('webpack') 9 | var webpackConfig = require('./webpack.prod.conf') 10 | 11 | console.log( 12 | ' Tip:\n' + 13 | ' Built files are meant to be served over an HTTP server.\n' + 14 | ' Opening index.html over file:// won\'t work.\n' 15 | ) 16 | 17 | var spinner = ora('building for production...') 18 | spinner.start() 19 | 20 | var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory) 21 | rm('-rf', assetsPath) 22 | mkdir('-p', assetsPath) 23 | cp('-R', 'static/', assetsPath) 24 | 25 | webpack(webpackConfig, function (err, stats) { 26 | spinner.stop() 27 | if (err) throw err 28 | process.stdout.write(stats.toString({ 29 | colors: true, 30 | modules: false, 31 | children: false, 32 | chunks: false, 33 | chunkModules: false 34 | }) + '\n') 35 | }) 36 | -------------------------------------------------------------------------------- /vue-webpack-examples1.0/build/dev-client.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | require('eventsource-polyfill') 3 | var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true') 4 | 5 | hotClient.subscribe(function (event) { 6 | if (event.action === 'reload') { 7 | window.location.reload() 8 | } 9 | }) 10 | -------------------------------------------------------------------------------- /vue-webpack-examples1.0/build/dev-server.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var express = require('express') 3 | var webpack = require('webpack') 4 | var config = require('../config') 5 | var proxyMiddleware = require('http-proxy-middleware') 6 | var webpackConfig = process.env.NODE_ENV === 'testing' 7 | ? require('./webpack.prod.conf') 8 | : require('./webpack.dev.conf') 9 | 10 | // default port where dev server listens for incoming traffic 11 | var port = process.env.PORT || config.dev.port 12 | // Define HTTP proxies to your custom API backend 13 | // https://github.com/chimurai/http-proxy-middleware 14 | var proxyTable = config.dev.proxyTable 15 | 16 | var app = express() 17 | var compiler = webpack(webpackConfig) 18 | 19 | var devMiddleware = require('webpack-dev-middleware')(compiler, { 20 | publicPath: webpackConfig.output.publicPath, 21 | stats: { 22 | colors: true, 23 | chunks: false 24 | } 25 | }) 26 | 27 | var hotMiddleware = require('webpack-hot-middleware')(compiler) 28 | // force page reload when html-webpack-plugin template changes 29 | compiler.plugin('compilation', function (compilation) { 30 | compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) { 31 | hotMiddleware.publish({ action: 'reload' }) 32 | cb() 33 | }) 34 | }) 35 | 36 | // proxy api requests 37 | Object.keys(proxyTable).forEach(function (context) { 38 | var options = proxyTable[context] 39 | if (typeof options === 'string') { 40 | options = { target: options } 41 | } 42 | app.use(proxyMiddleware(context, options)) 43 | }) 44 | 45 | // handle fallback for HTML5 history API 46 | app.use(require('connect-history-api-fallback')()) 47 | 48 | // serve webpack bundle output 49 | app.use(devMiddleware) 50 | 51 | // enable hot-reload and state-preserving 52 | // compilation error display 53 | app.use(hotMiddleware) 54 | 55 | // serve pure static assets 56 | var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory) 57 | app.use(staticPath, express.static('./static')) 58 | 59 | module.exports = app.listen(port, function (err) { 60 | if (err) { 61 | console.log(err) 62 | return 63 | } 64 | console.log('Listening at http://localhost:' + port + '\n') 65 | }) 66 | -------------------------------------------------------------------------------- /vue-webpack-examples1.0/build/utils.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var config = require('../config') 3 | var ExtractTextPlugin = require('extract-text-webpack-plugin') 4 | 5 | exports.assetsPath = function (_path) { 6 | var assetsSubDirectory = process.env.NODE_ENV === 'production' 7 | ? config.build.assetsSubDirectory 8 | : config.dev.assetsSubDirectory 9 | return path.posix.join(assetsSubDirectory, _path) 10 | } 11 | 12 | exports.cssLoaders = function (options) { 13 | options = options || {} 14 | // generate loader string to be used with extract text plugin 15 | function generateLoaders (loaders) { 16 | var sourceLoader = loaders.map(function (loader) { 17 | var extraParamChar 18 | if (/\?/.test(loader)) { 19 | loader = loader.replace(/\?/, '-loader?') 20 | extraParamChar = '&' 21 | } else { 22 | loader = loader + '-loader' 23 | extraParamChar = '?' 24 | } 25 | return loader + (options.sourceMap ? extraParamChar + 'sourceMap' : '') 26 | }).join('!') 27 | 28 | if (options.extract) { 29 | return ExtractTextPlugin.extract('vue-style-loader', sourceLoader) 30 | } else { 31 | return ['vue-style-loader', sourceLoader].join('!') 32 | } 33 | } 34 | 35 | // http://vuejs.github.io/vue-loader/configurations/extract-css.html 36 | return { 37 | css: generateLoaders(['css']), 38 | postcss: generateLoaders(['css']), 39 | less: generateLoaders(['css', 'less']), 40 | sass: generateLoaders(['css', 'sass?indentedSyntax']), 41 | scss: generateLoaders(['css', 'sass']), 42 | stylus: generateLoaders(['css', 'stylus']), 43 | styl: generateLoaders(['css', 'stylus']) 44 | } 45 | } 46 | 47 | // Generate loaders for standalone style files (outside of .vue) 48 | exports.styleLoaders = function (options) { 49 | var output = [] 50 | var loaders = exports.cssLoaders(options) 51 | for (var extension in loaders) { 52 | var loader = loaders[extension] 53 | output.push({ 54 | test: new RegExp('\\.' + extension + '$'), 55 | loader: loader 56 | }) 57 | } 58 | return output 59 | } 60 | -------------------------------------------------------------------------------- /vue-webpack-examples1.0/build/webpack.base.conf.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var config = require('../config') 3 | var utils = require('./utils') 4 | var projectRoot = path.resolve(__dirname, '../') 5 | 6 | module.exports = { 7 | entry: { 8 | app: './src/main.js' 9 | }, 10 | output: { 11 | path: config.build.assetsRoot, 12 | publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath, 13 | filename: '[name].js' 14 | }, 15 | resolve: { 16 | extensions: ['', '.js', '.vue'], 17 | fallback: [path.join(__dirname, '../node_modules')], 18 | alias: { 19 | 'src': path.resolve(__dirname, '../src'), 20 | 'assets': path.resolve(__dirname, '../src/assets'), 21 | 'components': path.resolve(__dirname, '../src/components') 22 | } 23 | }, 24 | resolveLoader: { 25 | fallback: [path.join(__dirname, '../node_modules')] 26 | }, 27 | module: { 28 | loaders: [ 29 | { 30 | test: /\.vue$/, 31 | loader: 'vue' 32 | }, 33 | { 34 | test: /\.js$/, 35 | loader: 'babel', 36 | include: projectRoot, 37 | exclude: /node_modules/ 38 | }, 39 | { 40 | test: /\.json$/, 41 | loader: 'json' 42 | }, 43 | { 44 | test: /\.html$/, 45 | loader: 'vue-html' 46 | }, 47 | { 48 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 49 | loader: 'url', 50 | query: { 51 | limit: 10000, 52 | name: utils.assetsPath('img/[name].[hash:7].[ext]') 53 | } 54 | }, 55 | { 56 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 57 | loader: 'url', 58 | query: { 59 | limit: 10000, 60 | name: utils.assetsPath('fonts/[name].[hash:7].[ext]') 61 | } 62 | } 63 | ] 64 | }, 65 | vue: { 66 | loaders: utils.cssLoaders() 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /vue-webpack-examples1.0/build/webpack.dev.conf.js: -------------------------------------------------------------------------------- 1 | var config = require('../config') 2 | var webpack = require('webpack') 3 | var merge = require('webpack-merge') 4 | var utils = require('./utils') 5 | var baseWebpackConfig = require('./webpack.base.conf') 6 | var HtmlWebpackPlugin = require('html-webpack-plugin') 7 | 8 | // add hot-reload related code to entry chunks 9 | Object.keys(baseWebpackConfig.entry).forEach(function (name) { 10 | baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name]) 11 | }) 12 | 13 | module.exports = merge(baseWebpackConfig, { 14 | module: { 15 | loaders: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap }) 16 | }, 17 | // eval-source-map is faster for development 18 | devtool: '#eval-source-map', 19 | plugins: [ 20 | new webpack.DefinePlugin({ 21 | 'process.env': config.dev.env 22 | }), 23 | // https://github.com/glenjamin/webpack-hot-middleware#installation--usage 24 | new webpack.optimize.OccurenceOrderPlugin(), 25 | new webpack.HotModuleReplacementPlugin(), 26 | new webpack.NoErrorsPlugin(), 27 | // https://github.com/ampedandwired/html-webpack-plugin 28 | new HtmlWebpackPlugin({ 29 | filename: 'index.html', 30 | template: 'index.html', 31 | inject: true 32 | }) 33 | ] 34 | }) 35 | -------------------------------------------------------------------------------- /vue-webpack-examples1.0/build/webpack.prod.conf.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var config = require('../config') 3 | var utils = require('./utils') 4 | var webpack = require('webpack') 5 | var merge = require('webpack-merge') 6 | var baseWebpackConfig = require('./webpack.base.conf') 7 | var ExtractTextPlugin = require('extract-text-webpack-plugin') 8 | var HtmlWebpackPlugin = require('html-webpack-plugin') 9 | var env = process.env.NODE_ENV === 'testing' 10 | ? require('../config/test.env') 11 | : config.build.env 12 | 13 | var webpackConfig = merge(baseWebpackConfig, { 14 | module: { 15 | loaders: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: true }) 16 | }, 17 | devtool: config.build.productionSourceMap ? '#source-map' : false, 18 | output: { 19 | path: config.build.assetsRoot, 20 | filename: utils.assetsPath('js/[name].[chunkhash].js'), 21 | chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') 22 | }, 23 | vue: { 24 | loaders: utils.cssLoaders({ 25 | sourceMap: config.build.productionSourceMap, 26 | extract: true 27 | }) 28 | }, 29 | plugins: [ 30 | // http://vuejs.github.io/vue-loader/workflow/production.html 31 | new webpack.DefinePlugin({ 32 | 'process.env': env 33 | }), 34 | new webpack.optimize.UglifyJsPlugin({ 35 | compress: { 36 | warnings: false 37 | } 38 | }), 39 | new webpack.optimize.OccurenceOrderPlugin(), 40 | // extract css into its own file 41 | new ExtractTextPlugin(utils.assetsPath('css/[name].[contenthash].css')), 42 | // generate dist index.html with correct asset hash for caching. 43 | // you can customize output by editing /index.html 44 | // see https://github.com/ampedandwired/html-webpack-plugin 45 | new HtmlWebpackPlugin({ 46 | filename: process.env.NODE_ENV === 'testing' 47 | ? 'index.html' 48 | : config.build.index, 49 | template: 'index.html', 50 | inject: true, 51 | minify: { 52 | removeComments: true, 53 | collapseWhitespace: true, 54 | removeAttributeQuotes: true 55 | // more options: 56 | // https://github.com/kangax/html-minifier#options-quick-reference 57 | }, 58 | // necessary to consistently work with multiple chunks via CommonsChunkPlugin 59 | chunksSortMode: 'dependency' 60 | }), 61 | // split vendor js into its own file 62 | new webpack.optimize.CommonsChunkPlugin({ 63 | name: 'vendor', 64 | minChunks: function (module, count) { 65 | // any required modules inside node_modules are extracted to vendor 66 | return ( 67 | module.resource && 68 | /\.js$/.test(module.resource) && 69 | module.resource.indexOf( 70 | path.join(__dirname, '../node_modules') 71 | ) === 0 72 | ) 73 | } 74 | }), 75 | // extract webpack runtime and module manifest to its own file in order to 76 | // prevent vendor hash from being updated whenever app bundle is updated 77 | new webpack.optimize.CommonsChunkPlugin({ 78 | name: 'manifest', 79 | chunks: ['vendor'] 80 | }) 81 | ] 82 | }) 83 | 84 | if (config.build.productionGzip) { 85 | var CompressionWebpackPlugin = require('compression-webpack-plugin') 86 | 87 | webpackConfig.plugins.push( 88 | new CompressionWebpackPlugin({ 89 | asset: '[path].gz[query]', 90 | algorithm: 'gzip', 91 | test: new RegExp( 92 | '\\.(' + 93 | config.build.productionGzipExtensions.join('|') + 94 | ')$' 95 | ), 96 | threshold: 10240, 97 | minRatio: 0.8 98 | }) 99 | ) 100 | } 101 | 102 | module.exports = webpackConfig 103 | -------------------------------------------------------------------------------- /vue-webpack-examples1.0/config/dev.env.js: -------------------------------------------------------------------------------- 1 | var merge = require('webpack-merge') 2 | var prodEnv = require('./prod.env') 3 | 4 | module.exports = merge(prodEnv, { 5 | NODE_ENV: '"development"' 6 | }) 7 | -------------------------------------------------------------------------------- /vue-webpack-examples1.0/config/index.js: -------------------------------------------------------------------------------- 1 | // see http://vuejs-templates.github.io/webpack for documentation. 2 | var path = require('path') 3 | 4 | module.exports = { 5 | build: { 6 | env: require('./prod.env'), 7 | index: path.resolve(__dirname, '../dist/index.html'), 8 | assetsRoot: path.resolve(__dirname, '../dist'), 9 | assetsSubDirectory: 'static', 10 | assetsPublicPath: '/', 11 | productionSourceMap: true, 12 | // Gzip off by default as many popular static hosts such as 13 | // Surge or Netlify already gzip all static assets for you. 14 | // Before setting to `true`, make sure to: 15 | // npm install --save-dev compression-webpack-plugin 16 | productionGzip: false, 17 | productionGzipExtensions: ['js', 'css'] 18 | }, 19 | dev: { 20 | env: require('./dev.env'), 21 | port: 8080, 22 | assetsSubDirectory: 'static', 23 | assetsPublicPath: '/', 24 | proxyTable: {}, 25 | // CSS Sourcemaps off by default because relative paths are "buggy" 26 | // with this option, according to the CSS-Loader README 27 | // (https://github.com/webpack/css-loader#sourcemaps) 28 | // In our experience, they generally work as expected, 29 | // just be aware of this issue when enabling this option. 30 | cssSourceMap: false 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /vue-webpack-examples1.0/config/prod.env.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | NODE_ENV: '"production"' 3 | } 4 | -------------------------------------------------------------------------------- /vue-webpack-examples1.0/config/test.env.js: -------------------------------------------------------------------------------- 1 | var merge = require('webpack-merge') 2 | var devEnv = require('./dev.env') 3 | 4 | module.exports = merge(devEnv, { 5 | NODE_ENV: '"testing"' 6 | }) 7 | -------------------------------------------------------------------------------- /vue-webpack-examples1.0/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | vue-webpack-examples1.0 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /vue-webpack-examples1.0/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-webpack-examples1.0", 3 | "version": "1.0.0", 4 | "description": "A Vue.js project", 5 | "author": "", 6 | "private": true, 7 | "scripts": { 8 | "dev": "node build/dev-server.js", 9 | "build": "node build/build.js", 10 | "test": "" 11 | }, 12 | "dependencies": { 13 | "vue": "^1.0.21", 14 | "babel-runtime": "^6.0.0" 15 | }, 16 | "devDependencies": { 17 | "babel-core": "^6.0.0", 18 | "babel-loader": "^6.0.0", 19 | "babel-plugin-transform-runtime": "^6.0.0", 20 | "babel-preset-es2015": "^6.0.0", 21 | "babel-preset-stage-2": "^6.0.0", 22 | "babel-register": "^6.0.0", 23 | "connect-history-api-fallback": "^1.1.0", 24 | "css-loader": "^0.23.0", 25 | "eventsource-polyfill": "^0.9.6", 26 | "express": "^4.13.3", 27 | "extract-text-webpack-plugin": "^1.0.1", 28 | "file-loader": "^0.8.4", 29 | "function-bind": "^1.0.2", 30 | "html-webpack-plugin": "^2.8.1", 31 | "http-proxy-middleware": "^0.12.0", 32 | "json-loader": "^0.5.4", 33 | "ora": "^0.2.0", 34 | "shelljs": "^0.6.0", 35 | "url-loader": "^0.5.7", 36 | "vue-hot-reload-api": "^1.2.0", 37 | "vue-html-loader": "^1.0.0", 38 | "vue-loader": "^8.3.0", 39 | "vue-style-loader": "^1.0.0", 40 | "webpack": "^1.12.2", 41 | "webpack-dev-middleware": "^1.4.0", 42 | "webpack-hot-middleware": "^2.6.0", 43 | "webpack-merge": "^0.8.3" 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /vue-webpack-examples1.0/src/App.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 34 | 35 | 65 | -------------------------------------------------------------------------------- /vue-webpack-examples1.0/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiubug/learn-vue/17166caf4f397cb70ef7e70fe6a056407f45d3da/vue-webpack-examples1.0/src/assets/logo.png -------------------------------------------------------------------------------- /vue-webpack-examples1.0/src/components/Hello.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | 21 | 22 | 27 | -------------------------------------------------------------------------------- /vue-webpack-examples1.0/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App' 3 | 4 | /* eslint-disable no-new */ 5 | new Vue({ 6 | el: 'body', 7 | components: { App } 8 | }) 9 | -------------------------------------------------------------------------------- /vue-webpack-examples1.0/static/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiubug/learn-vue/17166caf4f397cb70ef7e70fe6a056407f45d3da/vue-webpack-examples1.0/static/.gitkeep -------------------------------------------------------------------------------- /vue-webpack-examples2.0/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015", "stage-2"], 3 | "plugins": ["transform-runtime"], 4 | "comments": false, 5 | "env": { 6 | "test": { 7 | "plugins": [ "istanbul" ] 8 | } 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /vue-webpack-examples2.0/.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 | -------------------------------------------------------------------------------- /vue-webpack-examples2.0/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log 5 | -------------------------------------------------------------------------------- /vue-webpack-examples2.0/README.md: -------------------------------------------------------------------------------- 1 | # vue-webpack-examples2.0 2 | 3 | > A Vue.js 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 | 18 | For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader). 19 | -------------------------------------------------------------------------------- /vue-webpack-examples2.0/build/build.js: -------------------------------------------------------------------------------- 1 | // https://github.com/shelljs/shelljs 2 | require('./check-versions')() 3 | require('shelljs/global') 4 | env.NODE_ENV = 'production' 5 | 6 | var path = require('path') 7 | var config = require('../config') 8 | var ora = require('ora') 9 | var webpack = require('webpack') 10 | var webpackConfig = require('./webpack.prod.conf') 11 | 12 | console.log( 13 | ' Tip:\n' + 14 | ' Built files are meant to be served over an HTTP server.\n' + 15 | ' Opening index.html over file:// won\'t work.\n' 16 | ) 17 | 18 | var spinner = ora('building for production...') 19 | spinner.start() 20 | 21 | var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory) 22 | rm('-rf', assetsPath) 23 | mkdir('-p', assetsPath) 24 | cp('-R', 'static/*', assetsPath) 25 | 26 | webpack(webpackConfig, function (err, stats) { 27 | spinner.stop() 28 | if (err) throw err 29 | process.stdout.write(stats.toString({ 30 | colors: true, 31 | modules: false, 32 | children: false, 33 | chunks: false, 34 | chunkModules: false 35 | }) + '\n') 36 | }) 37 | -------------------------------------------------------------------------------- /vue-webpack-examples2.0/build/check-versions.js: -------------------------------------------------------------------------------- 1 | var semver = require('semver') 2 | var chalk = require('chalk') 3 | var packageConfig = require('../package.json') 4 | var exec = function (cmd) { 5 | return require('child_process') 6 | .execSync(cmd).toString().trim() 7 | } 8 | 9 | var versionRequirements = [ 10 | { 11 | name: 'node', 12 | currentVersion: semver.clean(process.version), 13 | versionRequirement: packageConfig.engines.node 14 | }, 15 | { 16 | name: 'npm', 17 | currentVersion: exec('npm --version'), 18 | versionRequirement: packageConfig.engines.npm 19 | } 20 | ] 21 | 22 | module.exports = function () { 23 | var warnings = [] 24 | for (var i = 0; i < versionRequirements.length; i++) { 25 | var mod = versionRequirements[i] 26 | if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) { 27 | warnings.push(mod.name + ': ' + 28 | chalk.red(mod.currentVersion) + ' should be ' + 29 | chalk.green(mod.versionRequirement) 30 | ) 31 | } 32 | } 33 | 34 | if (warnings.length) { 35 | console.log('') 36 | console.log(chalk.yellow('To use this template, you must update following to modules:')) 37 | console.log() 38 | for (var i = 0; i < warnings.length; i++) { 39 | var warning = warnings[i] 40 | console.log(' ' + warning) 41 | } 42 | console.log() 43 | process.exit(1) 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /vue-webpack-examples2.0/build/dev-client.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | require('eventsource-polyfill') 3 | var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true') 4 | 5 | hotClient.subscribe(function (event) { 6 | if (event.action === 'reload') { 7 | window.location.reload() 8 | } 9 | }) 10 | -------------------------------------------------------------------------------- /vue-webpack-examples2.0/build/dev-server.js: -------------------------------------------------------------------------------- 1 | require('./check-versions')() 2 | var config = require('../config') 3 | if (!process.env.NODE_ENV) process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV) 4 | var path = require('path') 5 | var express = require('express') 6 | var webpack = require('webpack') 7 | var opn = require('opn') 8 | var proxyMiddleware = require('http-proxy-middleware') 9 | var webpackConfig = require('./webpack.dev.conf') 10 | 11 | // default port where dev server listens for incoming traffic 12 | var port = process.env.PORT || config.dev.port 13 | // Define HTTP proxies to your custom API backend 14 | // https://github.com/chimurai/http-proxy-middleware 15 | var proxyTable = config.dev.proxyTable 16 | 17 | var app = express() 18 | var compiler = webpack(webpackConfig) 19 | 20 | var devMiddleware = require('webpack-dev-middleware')(compiler, { 21 | publicPath: webpackConfig.output.publicPath, 22 | quiet: true 23 | }) 24 | 25 | var hotMiddleware = require('webpack-hot-middleware')(compiler, { 26 | log: () => {} 27 | }) 28 | // force page reload when html-webpack-plugin template changes 29 | compiler.plugin('compilation', function (compilation) { 30 | compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) { 31 | hotMiddleware.publish({ action: 'reload' }) 32 | cb() 33 | }) 34 | }) 35 | 36 | // proxy api requests 37 | Object.keys(proxyTable).forEach(function (context) { 38 | var options = proxyTable[context] 39 | if (typeof options === 'string') { 40 | options = { target: options } 41 | } 42 | app.use(proxyMiddleware(context, options)) 43 | }) 44 | 45 | // handle fallback for HTML5 history API 46 | app.use(require('connect-history-api-fallback')()) 47 | 48 | // serve webpack bundle output 49 | app.use(devMiddleware) 50 | 51 | // enable hot-reload and state-preserving 52 | // compilation error display 53 | app.use(hotMiddleware) 54 | 55 | // serve pure static assets 56 | var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory) 57 | app.use(staticPath, express.static('./static')) 58 | 59 | var uri = 'http://localhost:' + port 60 | 61 | devMiddleware.waitUntilValid(function () { 62 | console.log('> Listening at ' + uri + '\n') 63 | }) 64 | 65 | module.exports = app.listen(port, function (err) { 66 | if (err) { 67 | console.log(err) 68 | return 69 | } 70 | 71 | // when env is testing, don't need open it 72 | if (process.env.NODE_ENV !== 'testing') { 73 | opn(uri) 74 | } 75 | }) 76 | -------------------------------------------------------------------------------- /vue-webpack-examples2.0/build/utils.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var config = require('../config') 3 | var ExtractTextPlugin = require('extract-text-webpack-plugin') 4 | 5 | exports.assetsPath = function (_path) { 6 | var assetsSubDirectory = process.env.NODE_ENV === 'production' 7 | ? config.build.assetsSubDirectory 8 | : config.dev.assetsSubDirectory 9 | return path.posix.join(assetsSubDirectory, _path) 10 | } 11 | 12 | exports.cssLoaders = function (options) { 13 | options = options || {} 14 | // generate loader string to be used with extract text plugin 15 | function generateLoaders (loaders) { 16 | var sourceLoader = loaders.map(function (loader) { 17 | var extraParamChar 18 | if (/\?/.test(loader)) { 19 | loader = loader.replace(/\?/, '-loader?') 20 | extraParamChar = '&' 21 | } else { 22 | loader = loader + '-loader' 23 | extraParamChar = '?' 24 | } 25 | return loader + (options.sourceMap ? extraParamChar + 'sourceMap' : '') 26 | }).join('!') 27 | 28 | // Extract CSS when that option is specified 29 | // (which is the case during production build) 30 | if (options.extract) { 31 | return ExtractTextPlugin.extract('vue-style-loader', sourceLoader) 32 | } else { 33 | return ['vue-style-loader', sourceLoader].join('!') 34 | } 35 | } 36 | 37 | // http://vuejs.github.io/vue-loader/en/configurations/extract-css.html 38 | return { 39 | css: generateLoaders(['css']), 40 | postcss: generateLoaders(['css']), 41 | less: generateLoaders(['css', 'less']), 42 | sass: generateLoaders(['css', 'sass?indentedSyntax']), 43 | scss: generateLoaders(['css', 'sass']), 44 | stylus: generateLoaders(['css', 'stylus']), 45 | styl: generateLoaders(['css', 'stylus']) 46 | } 47 | } 48 | 49 | // Generate loaders for standalone style files (outside of .vue) 50 | exports.styleLoaders = function (options) { 51 | var output = [] 52 | var loaders = exports.cssLoaders(options) 53 | for (var extension in loaders) { 54 | var loader = loaders[extension] 55 | output.push({ 56 | test: new RegExp('\\.' + extension + '$'), 57 | loader: loader 58 | }) 59 | } 60 | return output 61 | } 62 | -------------------------------------------------------------------------------- /vue-webpack-examples2.0/build/webpack.base.conf.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var config = require('../config') 3 | var utils = require('./utils') 4 | var projectRoot = path.resolve(__dirname, '../') 5 | 6 | var env = process.env.NODE_ENV 7 | // check env & config/index.js to decide whether to enable CSS source maps for the 8 | // various preprocessor loaders added to vue-loader at the end of this file 9 | var cssSourceMapDev = (env === 'development' && config.dev.cssSourceMap) 10 | var cssSourceMapProd = (env === 'production' && config.build.productionSourceMap) 11 | var useCssSourceMap = cssSourceMapDev || cssSourceMapProd 12 | 13 | module.exports = { 14 | entry: { 15 | app: './src/main.js' 16 | }, 17 | output: { 18 | path: config.build.assetsRoot, 19 | publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath, 20 | filename: '[name].js' 21 | }, 22 | resolve: { 23 | extensions: ['', '.js', '.vue', '.json'], 24 | fallback: [path.join(__dirname, '../node_modules')], 25 | alias: { 26 | 'vue$': 'vue/dist/vue.common.js', 27 | 'src': path.resolve(__dirname, '../src'), 28 | 'assets': path.resolve(__dirname, '../src/assets'), 29 | 'components': path.resolve(__dirname, '../src/components') 30 | } 31 | }, 32 | resolveLoader: { 33 | fallback: [path.join(__dirname, '../node_modules')] 34 | }, 35 | module: { 36 | loaders: [ 37 | { 38 | test: /\.vue$/, 39 | loader: 'vue' 40 | }, 41 | { 42 | test: /\.js$/, 43 | loader: 'babel', 44 | include: [ 45 | path.join(projectRoot, 'src') 46 | ], 47 | exclude: /node_modules/ 48 | }, 49 | { 50 | test: /\.json$/, 51 | loader: 'json' 52 | }, 53 | { 54 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 55 | loader: 'url', 56 | query: { 57 | limit: 10000, 58 | name: utils.assetsPath('img/[name].[hash:7].[ext]') 59 | } 60 | }, 61 | { 62 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 63 | loader: 'url', 64 | query: { 65 | limit: 10000, 66 | name: utils.assetsPath('fonts/[name].[hash:7].[ext]') 67 | } 68 | } 69 | ] 70 | }, 71 | vue: { 72 | loaders: utils.cssLoaders({ sourceMap: useCssSourceMap }), 73 | postcss: [ 74 | require('autoprefixer')({ 75 | browsers: ['last 2 versions'] 76 | }) 77 | ] 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /vue-webpack-examples2.0/build/webpack.dev.conf.js: -------------------------------------------------------------------------------- 1 | var config = require('../config') 2 | var webpack = require('webpack') 3 | var merge = require('webpack-merge') 4 | var utils = require('./utils') 5 | var baseWebpackConfig = require('./webpack.base.conf') 6 | var HtmlWebpackPlugin = require('html-webpack-plugin') 7 | var FriendlyErrors = require('friendly-errors-webpack-plugin') 8 | 9 | // add hot-reload related code to entry chunks 10 | Object.keys(baseWebpackConfig.entry).forEach(function (name) { 11 | baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name]) 12 | }) 13 | 14 | module.exports = merge(baseWebpackConfig, { 15 | module: { 16 | loaders: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap }) 17 | }, 18 | // eval-source-map is faster for development 19 | devtool: '#eval-source-map', 20 | plugins: [ 21 | new webpack.DefinePlugin({ 22 | 'process.env': config.dev.env 23 | }), 24 | // https://github.com/glenjamin/webpack-hot-middleware#installation--usage 25 | new webpack.optimize.OccurrenceOrderPlugin(), 26 | new webpack.HotModuleReplacementPlugin(), 27 | new webpack.NoErrorsPlugin(), 28 | // https://github.com/ampedandwired/html-webpack-plugin 29 | new HtmlWebpackPlugin({ 30 | filename: 'index.html', 31 | template: 'index.html', 32 | inject: true 33 | }), 34 | new FriendlyErrors() 35 | ] 36 | }) 37 | -------------------------------------------------------------------------------- /vue-webpack-examples2.0/build/webpack.prod.conf.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var config = require('../config') 3 | var utils = require('./utils') 4 | var webpack = require('webpack') 5 | var merge = require('webpack-merge') 6 | var baseWebpackConfig = require('./webpack.base.conf') 7 | var ExtractTextPlugin = require('extract-text-webpack-plugin') 8 | var HtmlWebpackPlugin = require('html-webpack-plugin') 9 | var env = config.build.env 10 | 11 | var webpackConfig = merge(baseWebpackConfig, { 12 | module: { 13 | loaders: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: true }) 14 | }, 15 | devtool: config.build.productionSourceMap ? '#source-map' : false, 16 | output: { 17 | path: config.build.assetsRoot, 18 | filename: utils.assetsPath('js/[name].[chunkhash].js'), 19 | chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') 20 | }, 21 | vue: { 22 | loaders: utils.cssLoaders({ 23 | sourceMap: config.build.productionSourceMap, 24 | extract: true 25 | }) 26 | }, 27 | plugins: [ 28 | // http://vuejs.github.io/vue-loader/en/workflow/production.html 29 | new webpack.DefinePlugin({ 30 | 'process.env': env 31 | }), 32 | new webpack.optimize.UglifyJsPlugin({ 33 | compress: { 34 | warnings: false 35 | } 36 | }), 37 | new webpack.optimize.OccurrenceOrderPlugin(), 38 | // extract css into its own file 39 | new ExtractTextPlugin(utils.assetsPath('css/[name].[contenthash].css')), 40 | // generate dist index.html with correct asset hash for caching. 41 | // you can customize output by editing /index.html 42 | // see https://github.com/ampedandwired/html-webpack-plugin 43 | new HtmlWebpackPlugin({ 44 | filename: config.build.index, 45 | template: 'index.html', 46 | inject: true, 47 | minify: { 48 | removeComments: true, 49 | collapseWhitespace: true, 50 | removeAttributeQuotes: true 51 | // more options: 52 | // https://github.com/kangax/html-minifier#options-quick-reference 53 | }, 54 | // necessary to consistently work with multiple chunks via CommonsChunkPlugin 55 | chunksSortMode: 'dependency' 56 | }), 57 | // split vendor js into its own file 58 | new webpack.optimize.CommonsChunkPlugin({ 59 | name: 'vendor', 60 | minChunks: function (module, count) { 61 | // any required modules inside node_modules are extracted to vendor 62 | return ( 63 | module.resource && 64 | /\.js$/.test(module.resource) && 65 | module.resource.indexOf( 66 | path.join(__dirname, '../node_modules') 67 | ) === 0 68 | ) 69 | } 70 | }), 71 | // extract webpack runtime and module manifest to its own file in order to 72 | // prevent vendor hash from being updated whenever app bundle is updated 73 | new webpack.optimize.CommonsChunkPlugin({ 74 | name: 'manifest', 75 | chunks: ['vendor'] 76 | }) 77 | ] 78 | }) 79 | 80 | if (config.build.productionGzip) { 81 | var CompressionWebpackPlugin = require('compression-webpack-plugin') 82 | 83 | webpackConfig.plugins.push( 84 | new CompressionWebpackPlugin({ 85 | asset: '[path].gz[query]', 86 | algorithm: 'gzip', 87 | test: new RegExp( 88 | '\\.(' + 89 | config.build.productionGzipExtensions.join('|') + 90 | ')$' 91 | ), 92 | threshold: 10240, 93 | minRatio: 0.8 94 | }) 95 | ) 96 | } 97 | 98 | module.exports = webpackConfig 99 | -------------------------------------------------------------------------------- /vue-webpack-examples2.0/config/dev.env.js: -------------------------------------------------------------------------------- 1 | var merge = require('webpack-merge') 2 | var prodEnv = require('./prod.env') 3 | 4 | module.exports = merge(prodEnv, { 5 | NODE_ENV: '"development"' 6 | }) 7 | -------------------------------------------------------------------------------- /vue-webpack-examples2.0/config/index.js: -------------------------------------------------------------------------------- 1 | // see http://vuejs-templates.github.io/webpack for documentation. 2 | var path = require('path') 3 | 4 | module.exports = { 5 | build: { 6 | env: require('./prod.env'), 7 | index: path.resolve(__dirname, '../dist/index.html'), 8 | assetsRoot: path.resolve(__dirname, '../dist'), 9 | assetsSubDirectory: 'static', 10 | assetsPublicPath: '/', 11 | productionSourceMap: true, 12 | // Gzip off by default as many popular static hosts such as 13 | // Surge or Netlify already gzip all static assets for you. 14 | // Before setting to `true`, make sure to: 15 | // npm install --save-dev compression-webpack-plugin 16 | productionGzip: false, 17 | productionGzipExtensions: ['js', 'css'] 18 | }, 19 | dev: { 20 | env: require('./dev.env'), 21 | port: 8080, 22 | assetsSubDirectory: 'static', 23 | assetsPublicPath: '/', 24 | proxyTable: {}, 25 | // CSS Sourcemaps off by default because relative paths are "buggy" 26 | // with this option, according to the CSS-Loader README 27 | // (https://github.com/webpack/css-loader#sourcemaps) 28 | // In our experience, they generally work as expected, 29 | // just be aware of this issue when enabling this option. 30 | cssSourceMap: false 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /vue-webpack-examples2.0/config/prod.env.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | NODE_ENV: '"production"' 3 | } 4 | -------------------------------------------------------------------------------- /vue-webpack-examples2.0/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | vue-webpack-examples2.0 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /vue-webpack-examples2.0/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-webpack-examples2.0", 3 | "version": "1.0.0", 4 | "description": "A Vue.js project", 5 | "author": "", 6 | "private": true, 7 | "scripts": { 8 | "dev": "node build/dev-server.js", 9 | "build": "node build/build.js" 10 | }, 11 | "dependencies": { 12 | "vue": "^2.1.0" 13 | }, 14 | "devDependencies": { 15 | "autoprefixer": "^6.4.0", 16 | "babel-core": "^6.0.0", 17 | "babel-loader": "^6.0.0", 18 | "babel-plugin-transform-runtime": "^6.0.0", 19 | "babel-preset-es2015": "^6.0.0", 20 | "babel-preset-stage-2": "^6.0.0", 21 | "babel-register": "^6.0.0", 22 | "chalk": "^1.1.3", 23 | "connect-history-api-fallback": "^1.1.0", 24 | "css-loader": "^0.25.0", 25 | "eventsource-polyfill": "^0.9.6", 26 | "express": "^4.13.3", 27 | "extract-text-webpack-plugin": "^1.0.1", 28 | "file-loader": "^0.9.0", 29 | "friendly-errors-webpack-plugin": "^1.1.2", 30 | "function-bind": "^1.0.2", 31 | "html-webpack-plugin": "^2.8.1", 32 | "http-proxy-middleware": "^0.17.2", 33 | "json-loader": "^0.5.4", 34 | "semver": "^5.3.0", 35 | "opn": "^4.0.2", 36 | "ora": "^0.3.0", 37 | "shelljs": "^0.7.4", 38 | "url-loader": "^0.5.7", 39 | "vue-loader": "^10.0.0", 40 | "vue-style-loader": "^1.0.0", 41 | "vue-template-compiler": "^2.1.0", 42 | "webpack": "^1.13.2", 43 | "webpack-dev-middleware": "^1.8.3", 44 | "webpack-hot-middleware": "^2.12.2", 45 | "webpack-merge": "^0.14.1" 46 | }, 47 | "engines": { 48 | "node": ">= 4.0.0", 49 | "npm": ">= 3.0.0" 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /vue-webpack-examples2.0/src/App.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 18 | 19 | 29 | -------------------------------------------------------------------------------- /vue-webpack-examples2.0/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiubug/learn-vue/17166caf4f397cb70ef7e70fe6a056407f45d3da/vue-webpack-examples2.0/src/assets/logo.png -------------------------------------------------------------------------------- /vue-webpack-examples2.0/src/components/Hello.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 33 | 34 | 35 | 54 | -------------------------------------------------------------------------------- /vue-webpack-examples2.0/src/main.js: -------------------------------------------------------------------------------- 1 | // The Vue build version to load with the `import` command 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 3 | import Vue from 'vue' 4 | import App from './App' 5 | 6 | /* eslint-disable no-new */ 7 | new Vue({ 8 | el: '#app', 9 | template: '', 10 | components: { App } 11 | }) 12 | -------------------------------------------------------------------------------- /vue-webpack-examples2.0/static/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiubug/learn-vue/17166caf4f397cb70ef7e70fe6a056407f45d3da/vue-webpack-examples2.0/static/.gitkeep -------------------------------------------------------------------------------- /vue1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiubug/learn-vue/17166caf4f397cb70ef7e70fe6a056407f45d3da/vue1.png -------------------------------------------------------------------------------- /vue2-wap/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015", "stage-2"], 3 | "plugins": ["transform-runtime", ["component", [{ 4 | "libraryName": "mint-ui", 5 | "style": true 6 | }] 7 | ]], 8 | "comments": false 9 | } 10 | -------------------------------------------------------------------------------- /vue2-wap/.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 | -------------------------------------------------------------------------------- /vue2-wap/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style 4 | extends: 'standard', 5 | // required to lint *.vue files 6 | plugins: [ 7 | 'html' 8 | ], 9 | // add your custom rules here 10 | 'rules': { 11 | // allow paren-less arrow functions 12 | 'arrow-parens': 0, 13 | // allow debugger during development 14 | 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /vue2-wap/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log 5 | selenium-debug.log 6 | test/unit/coverage 7 | test/e2e/reports 8 | -------------------------------------------------------------------------------- /vue2-wap/README.md: -------------------------------------------------------------------------------- 1 | # vue2-wap 2 | 3 | ## 前言 4 | > 本工程适用于基于vue2.0、vuex、vue-router实现的移动端SPA框架模版，已经配置完成，只需要按步骤初始化即可。贵在vue全家桶的搭建。 5 | 6 | > 如果觉得不错的话，请star一下吧 😊 7 | 8 | 9 | ## 演示 10 | [demo](http://vue2.sosout.com/)（请用chrome的手机模式预览） 11 | 12 | ### 移动端扫描下方二维码 13 | ![](https://github.com/sosout/learn-vue/blob/master/vue2.png) 14 | 15 | ## 安装 16 | ```bush 17 | // 安装前请先确保已安装node和npm 18 | // 需要提前在全局安装webpack和webpack-dev-server,如果已安装请忽略 19 | npm install webpack -g 20 | npm install webpack-dev-server -g 21 | 22 | // 安装成功后,再安装依赖 23 | npm install 24 | ``` 25 | ## 运行 26 | ### 开发环境 27 | ```bush 28 | npm run dev 29 | ``` 30 | ### 生产环境(打包) 31 | ```bush 32 | npm run build 33 | ``` 34 | 35 | ## 其他可自行测试 36 | ```bush 37 | npm run unit 38 | npm run e2e 39 | npm run test 40 | npm run lint 41 | ``` 42 | 43 | ### 访问 44 | 在浏览器地址栏输入[http://127.0.0.1:8888](http://127.0.0.1:8888) 45 | -------------------------------------------------------------------------------- /vue2-wap/build/build.js: -------------------------------------------------------------------------------- 1 | // https://github.com/shelljs/shelljs 2 | require('shelljs/global') 3 | env.NODE_ENV = 'production' 4 | 5 | var path = require('path') 6 | var config = require('../config') 7 | var ora = require('ora') 8 | var webpack = require('webpack') 9 | var webpackConfig = require('./webpack.prod.conf') 10 | 11 | console.log( 12 | ' Tip:\n' + 13 | ' Built files are meant to be served over an HTTP server.\n' + 14 | ' Opening index.html over file:// won\'t work.\n' 15 | ) 16 | 17 | var spinner = ora('building for production...') 18 | spinner.start() 19 | 20 | var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory) 21 | rm('-rf', assetsPath) 22 | mkdir('-p', assetsPath) 23 | cp('-R', 'static/', assetsPath) 24 | 25 | webpack(webpackConfig, function (err, stats) { 26 | spinner.stop() 27 | if (err) throw err 28 | process.stdout.write(stats.toString({ 29 | colors: true, 30 | modules: false, 31 | children: false, 32 | chunks: false, 33 | chunkModules: false 34 | }) + '\n') 35 | }) 36 | -------------------------------------------------------------------------------- /vue2-wap/build/dev-client.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | require('eventsource-polyfill') 3 | var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true') 4 | 5 | hotClient.subscribe(function (event) { 6 | if (event.action === 'reload') { 7 | window.location.reload() 8 | } 9 | }) 10 | -------------------------------------------------------------------------------- /vue2-wap/build/dev-server.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | var express = require('express'); 3 | var webpack = require('webpack'); 4 | var config = require('../config'); 5 | var proxyMiddleware = require('http-proxy-middleware'); 6 | var webpackConfig = process.env.NODE_ENV === 'testing' ? require('./webpack.prod.conf') : require('./webpack.dev.conf'); 7 | 8 | var port = process.env.PORT || config.dev.port; 9 | var proxyTable = config.dev.proxyTable; 10 | 11 | var app = express(); 12 | var compiler = webpack(webpackConfig); 13 | 14 | var devMiddleware = require('webpack-dev-middleware')(compiler, { 15 | publicPath: webpackConfig.output.publicPath, 16 | stats: { 17 | colors: true, 18 | chunks: false 19 | } 20 | }); 21 | 22 | var hotMiddleware = require('webpack-hot-middleware')(compiler); 23 | compiler.plugin('compilation', function(compilation) { 24 | compilation.plugin('html-webpack-plugin-after-emit', function(data, cb) { 25 | hotMiddleware.publish({ action: 'reload' }); 26 | cb(); 27 | }); 28 | }); 29 | 30 | Object.keys(proxyTable).forEach(function(context) { 31 | var options = proxyTable[context]; 32 | if (typeof options === 'string') { 33 | options = { target: options }; 34 | } 35 | 36 | app.use(proxyMiddleware(context, options)); 37 | }) 38 | 39 | app.use(require('connect-history-api-fallback')()); 40 | 41 | app.use(devMiddleware); 42 | 43 | app.use(hotMiddleware); 44 | 45 | var staticPath = path.posix.join(config.build.assetsPublicPath, config.build.assetsSubDirectory); 46 | app.use(staticPath, express.static('./static')); 47 | 48 | module.exports = app.listen(port, function(err) { 49 | if (err) { 50 | console.log(err); 51 | return; 52 | } 53 | console.log('Listening at http://localhost:' + port + '\n'); 54 | }); 55 | -------------------------------------------------------------------------------- /vue2-wap/build/utils.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var config = require('../config') 3 | var ExtractTextPlugin = require('extract-text-webpack-plugin') 4 | 5 | exports.assetsPath = function (_path) { 6 | return path.posix.join(config.build.assetsSubDirectory, _path) 7 | } 8 | 9 | exports.cssLoaders = function (options) { 10 | options = options || {} 11 | // generate loader string to be used with extract text plugin 12 | function generateLoaders (loaders) { 13 | var sourceLoader = loaders.map(function (loader) { 14 | var extraParamChar 15 | if (/\?/.test(loader)) { 16 | loader = loader.replace(/\?/, '-loader?') 17 | extraParamChar = '&' 18 | } else { 19 | loader = loader + '-loader' 20 | extraParamChar = '?' 21 | } 22 | return loader + (options.sourceMap ? extraParamChar + 'sourceMap' : '') 23 | }).join('!') 24 | 25 | if (options.extract) { 26 | return ExtractTextPlugin.extract('vue-style-loader', sourceLoader) 27 | } else { 28 | return ['vue-style-loader', sourceLoader].join('!') 29 | } 30 | } 31 | 32 | // http://vuejs.github.io/vue-loader/configurations/extract-css.html 33 | return { 34 | css: generateLoaders(['css']), 35 | postcss: generateLoaders(['css']), 36 | less: generateLoaders(['css', 'less']), 37 | sass: generateLoaders(['css', 'sass?indentedSyntax']), 38 | scss: generateLoaders(['css', 'sass']), 39 | stylus: generateLoaders(['css', 'stylus']), 40 | styl: generateLoaders(['css', 'stylus']) 41 | } 42 | } 43 | 44 | // Generate loaders for standalone style files (outside of .vue) 45 | exports.styleLoaders = function (options) { 46 | var output = [] 47 | var loaders = exports.cssLoaders(options) 48 | for (var extension in loaders) { 49 | var loader = loaders[extension] 50 | output.push({ 51 | test: new RegExp('\\.' + extension + '$'), 52 | loader: loader 53 | }) 54 | } 55 | return output 56 | } 57 | -------------------------------------------------------------------------------- /vue2-wap/build/webpack.base.conf.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var config = require('../config') 3 | var utils = require('./utils') 4 | var projectRoot = path.resolve(__dirname, '../'); 5 | 6 | module.exports = { 7 | entry: { 8 | app: './src/main.js' 9 | }, 10 | output: { 11 | path: config.build.assetsRoot, 12 | publicPath: config.build.assetsPublicPath, 13 | filename: '[name].js' 14 | }, 15 | resolve: { 16 | extensions: ['', '.js', '.vue'], 17 | fallback: [path.join(__dirname, '../node_modules')], 18 | alias: { 19 | 'src': path.resolve(__dirname, '../src'), 20 | 'assets': path.resolve(__dirname, '../src/assets'), 21 | 'components': path.resolve(__dirname, '../src/components') 22 | } 23 | }, 24 | resolveLoader: { 25 | fallback: [path.join(__dirname, '../node_modules')] 26 | }, 27 | module: { 28 | preLoaders: [ 29 | // { 30 | // test: /\.vue$/, 31 | // loader: 'eslint', 32 | // include: projectRoot, 33 | // exclude: /node_modules/ 34 | // }, 35 | // { 36 | // test: /\.js$/, 37 | // loader: 'eslint', 38 | // include: projectRoot, 39 | // exclude: /node_modules/ 40 | // } 41 | ], 42 | loaders: [{ 43 | test: /\.vue$/, 44 | loader: 'vue' 45 | }, { 46 | test: /\.js$/, 47 | loader: 'babel', 48 | include: projectRoot, 49 | exclude: /node_modules/ 50 | }, { 51 | test: /\.json$/, 52 | loader: 'json' 53 | }, { 54 | test: /\.html$/, 55 | loader: 'vue-html' 56 | }, { 57 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 58 | loader: 'url', 59 | query: { 60 | limit: 10000, 61 | name: utils.assetsPath('img/[name].[hash:7].[ext]') 62 | } 63 | }, { 64 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 65 | loader: 'url', 66 | query: { 67 | limit: 10000, 68 | name: utils.assetsPath('fonts/[name].[hash:7].[ext]') 69 | } 70 | }] 71 | }, 72 | eslint: { 73 | formatter: require('eslint-friendly-formatter') 74 | }, 75 | vue: { 76 | loaders: utils.cssLoaders() 77 | } 78 | } 79 | -------------------------------------------------------------------------------- /vue2-wap/build/webpack.dev.conf.js: -------------------------------------------------------------------------------- 1 | var config = require('../config'); 2 | var webpack = require('webpack'); 3 | var merge = require('webpack-merge'); 4 | var utils = require('./utils'); 5 | var baseWebpackConfig = require('./webpack.base.conf'); 6 | var HtmlWebpackPlugin = require('html-webpack-plugin'); 7 | 8 | Object.keys(baseWebpackConfig.entry).forEach(function(name) { 9 | baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name]); 10 | }); 11 | 12 | module.exports = merge(baseWebpackConfig, { 13 | module: { 14 | loaders: utils.styleLoaders() 15 | }, 16 | devtool: '#eval-source-map', 17 | plugins: [ 18 | new webpack.DefinePlugin({ 19 | 'process.env': config.dev.env 20 | }), 21 | new webpack.optimize.OccurenceOrderPlugin(), 22 | new webpack.HotModuleReplacementPlugin(), 23 | new webpack.NoErrorsPlugin(), 24 | new HtmlWebpackPlugin({ 25 | filename: 'index.html', 26 | template: 'index.html', 27 | inject: true 28 | }) 29 | ] 30 | }) 31 | -------------------------------------------------------------------------------- /vue2-wap/build/webpack.prod.conf.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var config = require('../config') 3 | var utils = require('./utils') 4 | var webpack = require('webpack') 5 | var merge = require('webpack-merge') 6 | var baseWebpackConfig = require('./webpack.base.conf') 7 | var ExtractTextPlugin = require('extract-text-webpack-plugin') 8 | var HtmlWebpackPlugin = require('html-webpack-plugin') 9 | var env = process.env.NODE_ENV === 'testing' 10 | ? require('../config/test.env') 11 | : config.build.env 12 | 13 | var webpackConfig = merge(baseWebpackConfig, { 14 | module: { 15 | loaders: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: true }) 16 | }, 17 | devtool: config.build.productionSourceMap ? '#source-map' : false, 18 | output: { 19 | path: config.build.assetsRoot, 20 | filename: utils.assetsPath('js/[name].[chunkhash].js'), 21 | chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') 22 | }, 23 | vue: { 24 | loaders: utils.cssLoaders({ 25 | sourceMap: config.build.productionSourceMap, 26 | extract: true 27 | }) 28 | }, 29 | plugins: [ 30 | // http://vuejs.github.io/vue-loader/workflow/production.html 31 | new webpack.DefinePlugin({ 32 | 'process.env': env 33 | }), 34 | new webpack.optimize.UglifyJsPlugin({ 35 | compress: { 36 | warnings: false 37 | } 38 | }), 39 | new webpack.optimize.OccurenceOrderPlugin(), 40 | // extract css into its own file 41 | new ExtractTextPlugin(utils.assetsPath('css/[name].[contenthash].css')), 42 | // generate dist index.html with correct asset hash for caching. 43 | // you can customize output by editing /index.html 44 | // see https://github.com/ampedandwired/html-webpack-plugin 45 | new HtmlWebpackPlugin({ 46 | filename: process.env.NODE_ENV === 'testing' 47 | ? 'index.html' 48 | : config.build.index, 49 | template: 'index.html', 50 | inject: true, 51 | minify: { 52 | removeComments: true, 53 | collapseWhitespace: true, 54 | removeAttributeQuotes: true 55 | // more options: 56 | // https://github.com/kangax/html-minifier#options-quick-reference 57 | }, 58 | // necessary to consistently work with multiple chunks via CommonsChunkPlugin 59 | chunksSortMode: 'dependency' 60 | }), 61 | // split vendor js into its own file 62 | new webpack.optimize.CommonsChunkPlugin({ 63 | name: 'vendor', 64 | minChunks: function (module, count) { 65 | // any required modules inside node_modules are extracted to vendor 66 | return ( 67 | module.resource && 68 | /\.js$/.test(module.resource) && 69 | module.resource.indexOf( 70 | path.join(__dirname, '../node_modules') 71 | ) === 0 72 | ) 73 | } 74 | }), 75 | // extract webpack runtime and module manifest to its own file in order to 76 | // prevent vendor hash from being updated whenever app bundle is updated 77 | new webpack.optimize.CommonsChunkPlugin({ 78 | name: 'manifest', 79 | chunks: ['vendor'] 80 | }) 81 | ] 82 | }) 83 | 84 | if (config.build.productionGzip) { 85 | var CompressionWebpackPlugin = require('compression-webpack-plugin') 86 | 87 | webpackConfig.plugins.push( 88 | new CompressionWebpackPlugin({ 89 | asset: '[path].gz[query]', 90 | algorithm: 'gzip', 91 | test: new RegExp( 92 | '\\.(' + 93 | config.build.productionGzipExtensions.join('|') + 94 | ')$' 95 | ), 96 | threshold: 10240, 97 | minRatio: 0.8 98 | }) 99 | ) 100 | } 101 | 102 | module.exports = webpackConfig 103 | -------------------------------------------------------------------------------- /vue2-wap/config/dev.env.js: -------------------------------------------------------------------------------- 1 | var merge = require('webpack-merge') 2 | var prodEnv = require('./prod.env') 3 | 4 | module.exports = merge(prodEnv, { 5 | NODE_ENV: '"development"' 6 | }) 7 | -------------------------------------------------------------------------------- /vue2-wap/config/index.js: -------------------------------------------------------------------------------- 1 | // see http://vuejs-templates.github.io/webpack for documentation. 2 | var path = require('path'); 3 | 4 | module.exports = { 5 | build: { 6 | env: require('./prod.env'), 7 | index: path.resolve(__dirname, '../dist/index.html'), 8 | assetsRoot: path.resolve(__dirname, '../dist'), 9 | assetsSubDirectory: 'static', 10 | assetsPublicPath: '/', 11 | productionSourceMap: true, 12 | // Gzip off by default as many popular static hosts such as 13 | // Surge or Netlify already gzip all static assets for you. 14 | // Before setting to `true`, make sure to: 15 | // npm install --save-dev compression-webpack-plugin 16 | productionGzip: false, 17 | productionGzipExtensions: ['js', 'css'] 18 | }, 19 | dev: { 20 | env: require('./dev.env'), 21 | port: 8888, 22 | proxyTable: { 23 | 24 | } 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /vue2-wap/config/prod.env.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | NODE_ENV: '"production"' 3 | } 4 | -------------------------------------------------------------------------------- /vue2-wap/config/test.env.js: -------------------------------------------------------------------------------- 1 | var merge = require('webpack-merge') 2 | var devEnv = require('./dev.env') 3 | 4 | module.exports = merge(devEnv, { 5 | NODE_ENV: '"testing"' 6 | }) 7 | -------------------------------------------------------------------------------- /vue2-wap/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | vue2.0 7 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 |
43 |
44 |

加载中...

45 |

正在加载，请稍候...

46 |
47 |
48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /vue2-wap/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue2-wap2", 3 | "version": "1.0.0", 4 | "description": "基于vue2.0、vuex、vue-router实现的移动端SPA框架模版", 5 | "author": "sosout <>", 6 | "main": "index.js", 7 | "private": true, 8 | "scripts": { 9 | "dev": "node build/dev-server.js", 10 | "build": "node build/build.js", 11 | "unit": "karma start test/unit/karma.conf.js --single-run", 12 | "e2e": "node test/e2e/runner.js", 13 | "test": "npm run unit && npm run e2e", 14 | "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs" 15 | }, 16 | "repository": { 17 | "type": "git", 18 | "url": "" 19 | }, 20 | "license": "ISC", 21 | "bugs": { 22 | "url": "" 23 | }, 24 | "homepage": "", 25 | "devDependencies": { 26 | "babel-core": "^6.18.2", 27 | "babel-loader": "^6.2.7", 28 | "babel-plugin-component": "^0.6.0", 29 | "babel-plugin-transform-runtime": "^6.15.0", 30 | "babel-preset-es2015": "^6.18.0", 31 | "babel-preset-stage-2": "^6.18.0", 32 | "babel-runtime": "^6.18.0", 33 | "chai": "^3.5.0", 34 | "chromedriver": "^2.25.1", 35 | "connect-history-api-fallback": "^1.3.0", 36 | "cross-spawn": "^5.0.1", 37 | "css-loader": "^0.25.0", 38 | "eslint": "^3.10.2", 39 | "eslint-config-standard": "^6.2.1", 40 | "eslint-friendly-formatter": "^2.0.6", 41 | "eslint-loader": "^1.6.1", 42 | "eslint-plugin-html": "^1.6.0", 43 | "eslint-plugin-promise": "^3.3.2", 44 | "eslint-plugin-standard": "^2.0.1", 45 | "eventsource-polyfill": "^0.9.6", 46 | "express": "^4.14.0", 47 | "extract-text-webpack-plugin": "^1.0.1", 48 | "file-loader": "^0.9.0", 49 | "function-bind": "^1.1.0", 50 | "html-webpack-plugin": "^2.24.1", 51 | "http-proxy-middleware": "^0.17.2", 52 | "inject-loader": "^3.0.0-beta2", 53 | "isparta-loader": "^2.0.0", 54 | "json-loader": "^0.5.4", 55 | "karma": "^1.3.0", 56 | "karma-coverage": "^1.1.1", 57 | "karma-mocha": "^1.3.0", 58 | "karma-phantomjs-launcher": "^1.0.2", 59 | "karma-sinon-chai": "^1.2.4", 60 | "karma-sourcemap-loader": "^0.3.7", 61 | "karma-spec-reporter": "0.0.26", 62 | "karma-webpack": "^1.8.0", 63 | "lolex": "^1.5.2", 64 | "mocha": "^3.1.2", 65 | "moment": "^2.16.0", 66 | "nightwatch": "^0.9.9", 67 | "node-sass": "^3.13.0", 68 | "ora": "^0.3.0", 69 | "phantomjs-prebuilt": "^2.1.13", 70 | "sass-loader": "^4.0.2", 71 | "selenium-server": "^3.0.1", 72 | "shelljs": "^0.7.5", 73 | "sinon": "^1.17.6", 74 | "sinon-chai": "^2.8.0", 75 | "url-loader": "^0.5.7", 76 | "vue": "^2.0.6", 77 | "vue-hot-reload-api": "^2.0.6", 78 | "vue-html-loader": "^1.2.3", 79 | "vue-loader": "^9.9.5", 80 | "vue-resource": "^1.0.3", 81 | "vue-router": "^2.0.2", 82 | "vue-style-loader": "^1.0.0", 83 | "vue-swipe": "^2.0.0", 84 | "vuex": "^2.0.0", 85 | "webpack": "^1.13.3", 86 | "webpack-dev-middleware": "^1.8.4", 87 | "webpack-hot-middleware": "^2.13.2", 88 | "webpack-merge": "^0.17.0", 89 | "whatwg-fetch": "^2.0.0" 90 | }, 91 | "dependencies": { 92 | "flex.css": "^1.1.6", 93 | "mint-ui": "^2.0.5" 94 | } 95 | } 96 | -------------------------------------------------------------------------------- /vue2-wap/src/App.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 21 | 22 | -------------------------------------------------------------------------------- /vue2-wap/src/assets/css/reset.css: -------------------------------------------------------------------------------- 1 | html, 2 | body, 3 | div, 4 | span, 5 | applet, 6 | object, 7 | iframe, 8 | h1, 9 | h2, 10 | h3, 11 | h4, 12 | h5, 13 | h6, 14 | p, 15 | blockquote, 16 | pre, 17 | a, 18 | abbr, 19 | acronym, 20 | address, 21 | big, 22 | cite, 23 | code, 24 | del, 25 | dfn, 26 | em, 27 | img, 28 | ins, 29 | kbd, 30 | q, 31 | s, 32 | samp, 33 | small, 34 | strike, 35 | strong, 36 | sub, 37 | sup, 38 | tt, 39 | var, 40 | b, 41 | u, 42 | i, 43 | center, 44 | dl, 45 | dt, 46 | dd, 47 | ol, 48 | ul, 49 | li, 50 | fieldset, 51 | form, 52 | label, 53 | legend, 54 | table, 55 | caption, 56 | tbody, 57 | tfoot, 58 | thead, 59 | tr, 60 | th, 61 | td, 62 | article, 63 | aside, 64 | canvas, 65 | details, 66 | embed, 67 | figure, 68 | figcaption, 69 | footer, 70 | header, 71 | hgroup, 72 | menu, 73 | nav, 74 | output, 75 | ruby, 76 | section, 77 | summary, 78 | time, 79 | mark, 80 | audio, 81 | video { 82 | margin: 0; 83 | padding: 0; 84 | border: 0; 85 | font-size: 100%; 86 | font: inherit; 87 | vertical-align: baseline; 88 | box-sizing: border-box; 89 | -webkit-tap-highlight-color: transparent; 90 | -webkit-touch-callout: none; 91 | } 92 | 93 | html { 94 | font-family: sans-serif; 95 | -ms-text-size-adjust: 100%; 96 | -webkit-text-size-adjust: 100%; 97 | font-size: 50px; 98 | } 99 | 100 | body { 101 | margin: 0; 102 | font-family: 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', '宋体', Helvetica, STHeiti, Arial, sans-serif; 103 | -webkit-text-size-adjust: none; 104 | overflow-x: hidden; 105 | } 106 | 107 | article, 108 | aside, 109 | details, 110 | figcaption, 111 | figure, 112 | footer, 113 | header, 114 | hgroup, 115 | main, 116 | menu, 117 | nav, 118 | section, 119 | summary { 120 | display: block; 121 | } 122 | 123 | audio, 124 | canvas, 125 | progress, 126 | video { 127 | display: inline-block; 128 | vertical-align: baseline; 129 | } 130 | 131 | audio:not([controls]) { 132 | display: none; 133 | height: 0; 134 | } 135 | 136 | [hidden], 137 | template { 138 | display: none; 139 | } 140 | 141 | a { 142 | background-color: transparent; 143 | } 144 | 145 | a:active, 146 | a:hover { 147 | outline: 0; 148 | } 149 | 150 | abbr[title] { 151 | border-bottom: .01rem dotted; 152 | } 153 | 154 | b, 155 | strong { 156 | font-weight: bold; 157 | } 158 | 159 | dfn { 160 | font-style: italic; 161 | } 162 | 163 | mark { 164 | background: #ff0; 165 | color: #000; 166 | } 167 | 168 | small { 169 | font-size: 80%; 170 | } 171 | 172 | sub, 173 | sup { 174 | font-size: 75%; 175 | line-height: 0; 176 | position: relative; 177 | vertical-align: baseline; 178 | } 179 | 180 | img { 181 | border: 0; 182 | } 183 | 184 | svg:not(:root) { 185 | overflow: hidden; 186 | } 187 | 188 | hr { 189 | box-sizing: content-box; 190 | height: 0; 191 | } 192 | 193 | pre { 194 | overflow: auto; 195 | } 196 | 197 | code, 198 | kbd, 199 | pre, 200 | samp { 201 | font-family: monospace, monospace; 202 | } 203 | 204 | button, 205 | input, 206 | optgroup, 207 | select, 208 | textarea { 209 | color: inherit; 210 | font: inherit; 211 | margin: 0; 212 | } 213 | 214 | button { 215 | overflow: visible; 216 | } 217 | 218 | button, 219 | select { 220 | text-transform: none; 221 | } 222 | 223 | button, 224 | html input[type="button"], 225 | input[type="reset"], 226 | input[type="submit"] { 227 | -webkit-appearance: button; 228 | cursor: pointer; 229 | } 230 | 231 | button[disabled], 232 | html input[disabled] { 233 | cursor: default; 234 | } 235 | 236 | button::-moz-focus-inner, 237 | input::-moz-focus-inner { 238 | border: 0; 239 | padding: 0; 240 | } 241 | 242 | input { 243 | line-height: normal; 244 | } 245 | 246 | input[type="checkbox"], 247 | input[type="radio"] { 248 | box-sizing: border-box; 249 | padding: 0; 250 | } 251 | 252 | input[type="number"]::-webkit-inner-spin-button, 253 | input[type="number"]::-webkit-outer-spin-button { 254 | height: auto; 255 | } 256 | 257 | input[type="search"] { 258 | -webkit-appearance: textfield; 259 | box-sizing: content-box; 260 | } 261 | 262 | input[type="search"]::-webkit-search-cancel-button, 263 | input[type="search"]::-webkit-search-decoration { 264 | -webkit-appearance: none; 265 | } 266 | 267 | fieldset { 268 | border: .01rem solid #c0c0c0; 269 | } 270 | 271 | legend { 272 | border: 0; 273 | padding: 0; 274 | } 275 | 276 | textarea { 277 | overflow: auto; 278 | } 279 | 280 | optgroup { 281 | font-weight: bold; 282 | } 283 | 284 | table { 285 | border-collapse: collapse; 286 | border-spacing: 0; 287 | } 288 | 289 | ol, 290 | ul { 291 | list-style: none; 292 | } 293 | 294 | td, 295 | th { 296 | padding: 0; 297 | } 298 | 299 | html, 300 | body { 301 | height: 100%; 302 | } 303 | -------------------------------------------------------------------------------- /vue2-wap/src/assets/images/common/ic-bluecard-selected.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiubug/learn-vue/17166caf4f397cb70ef7e70fe6a056407f45d3da/vue2-wap/src/assets/images/common/ic-bluecard-selected.png -------------------------------------------------------------------------------- /vue2-wap/src/assets/images/common/ic-bluecard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiubug/learn-vue/17166caf4f397cb70ef7e70fe6a056407f45d3da/vue2-wap/src/assets/images/common/ic-bluecard.png -------------------------------------------------------------------------------- /vue2-wap/src/assets/images/common/ic-life-selected.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiubug/learn-vue/17166caf4f397cb70ef7e70fe6a056407f45d3da/vue2-wap/src/assets/images/common/ic-life-selected.png -------------------------------------------------------------------------------- /vue2-wap/src/assets/images/common/ic-life.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiubug/learn-vue/17166caf4f397cb70ef7e70fe6a056407f45d3da/vue2-wap/src/assets/images/common/ic-life.png -------------------------------------------------------------------------------- /vue2-wap/src/assets/images/common/ic-my-selected.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiubug/learn-vue/17166caf4f397cb70ef7e70fe6a056407f45d3da/vue2-wap/src/assets/images/common/ic-my-selected.png -------------------------------------------------------------------------------- /vue2-wap/src/assets/images/common/ic-my.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiubug/learn-vue/17166caf4f397cb70ef7e70fe6a056407f45d3da/vue2-wap/src/assets/images/common/ic-my.png -------------------------------------------------------------------------------- /vue2-wap/src/assets/images/common/ic-xkh-selected.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiubug/learn-vue/17166caf4f397cb70ef7e70fe6a056407f45d3da/vue2-wap/src/assets/images/common/ic-xkh-selected.png -------------------------------------------------------------------------------- /vue2-wap/src/assets/images/common/ic-xkh.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiubug/learn-vue/17166caf4f397cb70ef7e70fe6a056407f45d3da/vue2-wap/src/assets/images/common/ic-xkh.png -------------------------------------------------------------------------------- /vue2-wap/src/assets/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiubug/learn-vue/17166caf4f397cb70ef7e70fe6a056407f45d3da/vue2-wap/src/assets/images/logo.png -------------------------------------------------------------------------------- /vue2-wap/src/components/footer-nav.vue: -------------------------------------------------------------------------------- 1 | 29 | 44 | -------------------------------------------------------------------------------- /vue2-wap/src/main.js: -------------------------------------------------------------------------------- 1 | // 引入静态资源 2 | import './assets/css/reset.css'; // reset 3 | import 'flex.css'; // flex 4 | 5 | import Vue from 'vue'; 6 | import App from './App'; 7 | import VueRouter from 'vue-router'; 8 | import VueResource from 'vue-resource'; 9 | import routes from './routers'; 10 | 11 | Vue.use(VueRouter); 12 | Vue.use(VueResource); 13 | 14 | const router = new VueRouter({ 15 | routes: routes 16 | }); 17 | 18 | router.beforeEach(({ meta, path }, from, next) => { 19 | next(); 20 | }); 21 | 22 | const app = new Vue({ 23 | router, 24 | render: h => h(App) 25 | }).$mount('#app') 26 | -------------------------------------------------------------------------------- /vue2-wap/src/routers.js: -------------------------------------------------------------------------------- 1 | // 引入组件(直接使用es6的语法) 2 | const viewsPath = './views/'; 3 | export default [{ 4 | path: '/life', 5 | meta: { 6 | auth: false 7 | }, 8 | component: (resolve) => { 9 | require([viewsPath + 'life/index.vue'], resolve); 10 | } 11 | }, { 12 | path: '/blueCard', 13 | component: (resolve) => { 14 | require([viewsPath + 'blueCard/index.vue'], resolve); 15 | } 16 | }, { 17 | path: '/schoolCost', 18 | component: (resolve) => { 19 | require([viewsPath + 'schoolCost/index.vue'], resolve); 20 | } 21 | }, { 22 | path: '/my', 23 | component: (resolve) => { 24 | require([viewsPath + 'my/index.vue'], resolve); 25 | } 26 | }, { 27 | path: '*', 28 | redirect: '/life' 29 | }]; 30 | -------------------------------------------------------------------------------- /vue2-wap/src/views/blueCard/index.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /vue2-wap/src/views/life/index.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | -------------------------------------------------------------------------------- /vue2-wap/src/views/my/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /vue2-wap/src/views/schoolCost/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 16 | -------------------------------------------------------------------------------- /vue2-wap/static/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiubug/learn-vue/17166caf4f397cb70ef7e70fe6a056407f45d3da/vue2-wap/static/.gitkeep -------------------------------------------------------------------------------- /vue2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiubug/learn-vue/17166caf4f397cb70ef7e70fe6a056407f45d3da/vue2.png --------------------------------------------------------------------------------