├── .babelrc ├── .editorconfig ├── .gitattributes ├── .gitignore ├── .idea ├── dictionaries │ └── limuzi.xml ├── encodings.xml ├── misc.xml ├── modules.xml ├── vcs.xml ├── vue-sf.iml ├── watcherTasks.xml └── workspace.xml ├── .postcssrc.js ├── README.md ├── api.json ├── build ├── build.js ├── check-versions.js ├── dev-client.js ├── dev-server.js ├── utils.js ├── vue-loader.conf.js ├── webpack.base.conf.js ├── webpack.dev.conf.js ├── webpack.prod.conf.js └── webpack.test.conf.js ├── config ├── dev.env.js ├── index.js ├── prod.env.js └── test.env.js ├── index.html ├── package.json ├── server ├── app.js ├── bin │ └── start.js └── router │ ├── data.js │ └── index.js ├── src ├── App.vue ├── assets │ ├── css │ │ └── animate.css │ ├── logo.png │ └── sass │ │ └── common.scss ├── common │ └── js │ │ └── common.js ├── components │ ├── header.vue │ ├── label.vue │ ├── list.vue │ ├── messageHeader.vue │ ├── nav.vue │ ├── notice.vue │ ├── search.vue │ └── tab.vue ├── main.js ├── page │ ├── article.vue │ ├── attention.vue │ ├── collection.vue │ ├── latestNews.vue │ ├── login.vue │ ├── main.vue │ ├── message.vue │ ├── my.vue │ ├── myInfo.vue │ ├── myLecture.vue │ ├── privateLetter.vue │ └── register.vue ├── router │ └── index.js └── store │ ├── actions.js │ ├── getters.js │ ├── index.js │ ├── mutations.js │ ├── sf-type.js │ └── state.js ├── static └── .gitkeep └── test ├── e2e ├── custom-assertions │ └── elementCount.js ├── nightwatch.conf.js ├── runner.js └── specs │ └── test.js └── unit ├── .eslintrc ├── index.js ├── karma.conf.js └── specs └── Hello.spec.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "es2015", 4 | "stage-2" 5 | ], 6 | "plugins": [ 7 | "transform-runtime" 8 | ], 9 | "comments": false 10 | } 11 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | *.js linguist-language=vue 2 | *.vue linguist-language=vue 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | test/unit/coverage 8 | test/e2e/reports 9 | selenium-debug.log 10 | -------------------------------------------------------------------------------- /.idea/dictionaries/limuzi.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /.idea/encodings.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /.idea/misc.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | -------------------------------------------------------------------------------- /.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /.idea/vcs.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /.idea/vue-sf.iml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /.idea/watcherTasks.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /.idea/workspace.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | <<<<<<< HEAD 7 | 8 | ======= 9 | >>>>>>> 138703c7d4248b73852bef44c085c6b70af459d0 10 | 11 | 12 | 13 | 14 | 15 | 22 | 23 | 24 | 25 | <<<<<<< HEAD 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | ======= 42 | 43 | 44 | 45 | 46 | 47 | >>>>>>> 138703c7d4248b73852bef44c085c6b70af459d0 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | <<<<<<< HEAD 57 | 58 | 59 | 60 | ======= 61 | 62 | 63 | 64 | 65 | 66 | >>>>>>> 138703c7d4248b73852bef44c085c6b70af459d0 67 | 68 | 69 | 70 | 71 | <<<<<<< HEAD 72 | 73 | 74 | 75 | 76 | 77 | ======= 78 | 79 | 80 | 81 | 82 | 83 | >>>>>>> 138703c7d4248b73852bef44c085c6b70af459d0 84 | 85 | 86 | 87 | 88 | 89 | <<<<<<< HEAD 90 | 91 | 92 | 93 | 94 | 95 | ======= 96 | 97 | 98 | 99 | 100 | 101 | >>>>>>> 138703c7d4248b73852bef44c085c6b70af459d0 102 | 103 | 104 | 105 | 106 | 107 | <<<<<<< HEAD 108 | 109 | 110 | 111 | 112 | 113 | ======= 114 | 115 | 116 | 117 | 118 | 119 | >>>>>>> 138703c7d4248b73852bef44c085c6b70af459d0 120 | 121 | 122 | 123 | 124 | 125 | <<<<<<< HEAD 126 | 127 | 128 | 129 | 130 | 131 | ======= 132 | 133 | 134 | 135 | 136 | 137 | >>>>>>> 138703c7d4248b73852bef44c085c6b70af459d0 138 | 139 | 140 | 141 | 142 | 143 | <<<<<<< HEAD 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | ======= 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | >>>>>>> 138703c7d4248b73852bef44c085c6b70af459d0 170 | 171 | 172 | 173 | 174 | 175 | <<<<<<< HEAD 176 | 177 | 178 | 179 | 180 | 181 | ======= 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | >>>>>>> 138703c7d4248b73852bef44c085c6b70af459d0 190 | 191 | 192 | 193 | 194 | <<<<<<< HEAD 195 | 196 | 197 | 198 | 199 | 200 | ======= 201 | 202 | 203 | 204 | 205 | 206 | >>>>>>> 138703c7d4248b73852bef44c085c6b70af459d0 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 222 | 223 | 224 | 225 | submitName 226 | server.timeout 227 | latest 228 | msg 229 | menuChoose 230 | tabName 231 | tabbottom 232 | f 233 | fa 234 | fav 235 | favi 236 | favic 237 | favico 238 | favicon 239 | favicon.ico 240 | latestIcon 241 | msgIcon 242 | avatar 243 | main 244 | 245 | 246 | fkId 247 | 248 | 249 | 250 | 252 | 253 | 304 | 305 | 306 | 307 | 308 | true 309 | DEFINITION_ORDER 310 | 311 | 312 | 313 | 314 | 315 | <<<<<<< HEAD 316 | 326 | 327 | 328 | 329 | 330 | 331 | 332 | 333 | 334 | 335 | 336 | 337 | 338 | 339 | 340 | 341 | 342 | 343 | 344 | 345 | 346 | 347 | 348 | 349 | 350 | 353 | 354 | 357 | 358 | 359 | 360 | 363 | 364 | 367 | 368 | 371 | 372 | 373 | 374 | 377 | 378 | 381 | 382 | 385 | 386 | 389 | 390 | 391 | 392 | 395 | 396 | 399 | 400 | 403 | 404 | 407 | 408 | 409 | 410 | 413 | 414 | 417 | 418 | <<<<<<< HEAD 419 | 424 | 425 | 428 | 429 | 432 | 433 | 434 | 435 | 438 | 439 | 442 | 443 | 446 | 447 | 450 | 451 | 452 | 453 | 456 | 457 | 460 | 461 | 464 | 465 | 468 | 469 | 472 | 473 | 474 | 475 | 478 | 479 | 482 | 483 | 487 | 488 | 489 | 490 | 493 | 494 | 497 | 498 | 501 | 502 | 503 | 504 | 505 | 506 | 507 | 508 | 509 | 510 | 511 | 512 | 513 | 514 | 515 | 525 | 526 | 527 | 528 | 529 | 530 | 531 | 532 | 533 | 534 | 535 | 536 | 537 | 538 | 539 | 540 | 541 | 542 | 543 | 544 | 545 | 546 | 547 | 548 | 549 | 550 | 551 | 552 | 553 | 554 | 555 | 556 | 557 | 558 | 559 | 564 | 565 | project 566 | 567 | 568 | 569 | 570 | 571 | 572 | 573 | 574 | 575 | 576 | 577 | 578 | 579 | 580 | 581 | project 582 | 583 | 584 | true 585 | 586 | 587 | 588 | DIRECTORY 589 | 590 | false 591 | 592 | 593 | 594 | 595 | 597 | 598 | 599 | 600 | 1497607991938 601 | 669 | 670 | 671 | 672 | <<<<<<< HEAD 673 | 675 | 676 | 677 | ======= 678 | 680 | 681 | 682 | >>>>>>> 138703c7d4248b73852bef44c085c6b70af459d0 683 | 684 | 685 | 686 | 687 | 688 | 689 | 690 | 691 | 692 | 693 | 694 | 695 | 696 | 697 | 698 | 699 | 700 | <<<<<<< HEAD 701 | 702 | ======= 703 | 704 | >>>>>>> 138703c7d4248b73852bef44c085c6b70af459d0 705 | 706 | 707 | 708 | 709 | 711 | 712 | 714 | 715 | 716 | 718 | 719 | 720 | 721 | <<<<<<< HEAD 722 | ======= 723 | 724 | 725 | 726 | 727 | 728 | 729 | 730 | 731 | 732 | 733 | 734 | 735 | 736 | 737 | 738 | 739 | 740 | 741 | 742 | 743 | 744 | >>>>>>> 138703c7d4248b73852bef44c085c6b70af459d0 745 | 746 | 747 | 748 | 749 | 750 | 751 | 752 | 753 | 754 | 755 | 756 | 757 | 758 | 759 | 760 | 761 | 762 | 763 | 764 | 765 | 766 | 767 | 768 | 769 | 770 | 771 | 772 | 773 | 774 | 775 | 776 | 777 | 778 | 779 | 780 | 781 | 782 | 783 | 784 | 785 | 786 | 787 | 788 | 789 | 790 | 791 | 792 | 793 | 794 | 795 | 796 | 797 | 798 | 799 | 800 | 801 | 802 | 803 | 804 | 805 | 806 | 807 | 808 | 809 | 810 | 811 | 812 | 813 | 814 | 815 | 816 | 817 | 818 | 819 | 820 | 821 | 822 | 823 | 824 | 825 | 826 | 827 | 828 | 829 | 830 | 831 | 832 | 833 | 834 | 835 | 836 | 837 | 838 | 839 | 840 | 841 | 842 | 843 | 844 | 845 | 846 | 847 | 848 | 849 | 850 | 851 | 852 | 853 | 854 | 855 | 856 | 857 | 858 | 859 | 860 | 861 | 862 | 863 | 864 | 865 | 866 | 867 | 868 | 869 | 870 | 871 | 872 | 873 | 874 | 875 | 876 | 877 | 878 | 879 | <<<<<<< HEAD 880 | 881 | 882 | 883 | 884 | 885 | 886 | 887 | 888 | ======= 889 | 890 | >>>>>>> 138703c7d4248b73852bef44c085c6b70af459d0 891 | 892 | 893 | 894 | 895 | 896 | 897 | 898 | 899 | 900 | 901 | 902 | 903 | 904 | 905 | 906 | 907 | 908 | 909 | 910 | 911 | 912 | 913 | 914 | 915 | 916 | 917 | 918 | 919 | 920 | 921 | 922 | 923 | 924 | 925 | 926 | 927 | 928 | 929 | 930 | 931 | 932 | <<<<<<< HEAD 933 | 934 | 935 | 936 | 937 | 938 | 939 | 940 | 941 | 942 | 943 | 944 | 945 | 946 | 947 | 948 | 949 | 950 | 951 | 952 | 953 | 954 | 955 | 956 | 957 | 958 | 959 | 960 | 961 | 962 | 963 | 964 | 965 | ======= 966 | 967 | 968 | 969 | 970 | 971 | 972 | 973 | 974 | 975 | 976 | 977 | >>>>>>> 138703c7d4248b73852bef44c085c6b70af459d0 978 | 979 | 980 | 981 | 982 | 983 | <<<<<<< HEAD 984 | 985 | 986 | 987 | 988 | 989 | 990 | 991 | 992 | 993 | 994 | 995 | 996 | 997 | 998 | 999 | 1000 | 1001 | 1002 | 1003 | 1004 | 1005 | 1006 | 1007 | ======= 1008 | 1009 | 1010 | 1011 | 1012 | 1013 | 1014 | 1015 | 1016 | 1017 | 1018 | 1019 | 1020 | 1021 | 1022 | 1023 | 1024 | 1025 | 1026 | 1027 | 1028 | 1029 | 1030 | 1031 | >>>>>>> 138703c7d4248b73852bef44c085c6b70af459d0 1032 | 1033 | 1034 | 1035 | 1036 | 1037 | 1038 | 1039 | 1040 | 1041 | 1042 | 1043 | 1044 | <<<<<<< HEAD 1045 | 1046 | 1047 | 1048 | 1049 | 1050 | 1051 | 1052 | 1053 | 1054 | 1055 | 1056 | 1057 | 1058 | 1059 | 1060 | 1061 | 1062 | 1063 | 1064 | 1065 | 1066 | 1067 | 1068 | ======= 1069 | 1070 | 1071 | 1072 | 1073 | 1074 | 1075 | 1076 | 1077 | 1078 | 1079 | 1080 | 1081 | 1082 | 1083 | 1084 | 1085 | 1086 | 1087 | 1088 | 1089 | 1090 | 1091 | 1092 | >>>>>>> 138703c7d4248b73852bef44c085c6b70af459d0 1093 | 1094 | 1095 | 1096 | 1097 | <<<<<<< HEAD 1098 | 1099 | 1100 | 1101 | 1102 | 1103 | 1104 | 1105 | 1106 | 1107 | 1108 | 1109 | 1110 | 1111 | ======= 1112 | 1113 | 1114 | 1115 | 1116 | 1117 | 1118 | 1119 | 1120 | 1121 | 1122 | 1123 | 1124 | 1125 | 1126 | 1127 | 1128 | 1129 | 1130 | 1131 | 1132 | 1133 | 1134 | 1135 | 1136 | 1137 | 1138 | 1139 | 1140 | 1141 | 1142 | >>>>>>> 138703c7d4248b73852bef44c085c6b70af459d0 1143 | 1144 | 1145 | 1146 | 1147 | <<<<<<< HEAD 1148 | 1149 | 1150 | 1151 | 1152 | 1153 | 1154 | 1155 | 1156 | 1157 | 1158 | 1159 | 1160 | 1161 | 1162 | ======= 1163 | 1164 | 1165 | 1166 | 1167 | >>>>>>> 138703c7d4248b73852bef44c085c6b70af459d0 1168 | 1169 | 1170 | 1171 | 1172 | <<<<<<< HEAD 1173 | 1174 | 1175 | 1176 | 1177 | ======= 1178 | 1179 | 1180 | 1181 | 1182 | >>>>>>> 138703c7d4248b73852bef44c085c6b70af459d0 1183 | 1184 | 1185 | 1186 | 1187 | 1188 | 1189 | <<<<<<< HEAD 1190 | 1191 | 1192 | ======= 1193 | 1194 | 1195 | >>>>>>> 138703c7d4248b73852bef44c085c6b70af459d0 1196 | 1197 | 1198 | 1199 | 1200 | <<<<<<< HEAD 1201 | 1202 | 1203 | 1204 | 1205 | ======= 1206 | 1207 | 1208 | 1209 | 1210 | >>>>>>> 138703c7d4248b73852bef44c085c6b70af459d0 1211 | 1212 | 1213 | 1214 | 1215 | <<<<<<< HEAD 1216 | 1217 | 1218 | 1219 | 1220 | ======= 1221 | 1222 | 1223 | 1224 | 1225 | >>>>>>> 138703c7d4248b73852bef44c085c6b70af459d0 1226 | 1227 | 1228 | 1229 | 1230 | 1231 | 1232 | <<<<<<< HEAD 1233 | 1234 | 1235 | 1236 | ======= 1237 | 1238 | 1239 | 1240 | 1241 | 1242 | >>>>>>> 138703c7d4248b73852bef44c085c6b70af459d0 1243 | 1244 | 1245 | 1246 | 1247 | 1248 | 1249 | 1250 | 1251 | 1252 | 1253 | 1254 | 1255 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | // to edit target browsers: use "browserlist" field in package.json 6 | "autoprefixer": {} 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-sf 2 | 3 | > vue-segmentFault 仿照segmentFault的App外观做的一个小项目 4 | 5 | # 技术栈 6 | 7 | > vue-cli + vue-router + vuex + axios + mint-ui 8 | 9 | # 项目部分截图 10 | 11 | ![GitHub](http://oqjgod7s1.bkt.clouddn.com/WechatIMG359.jpeg?v=3&s=100 "GitHub,Social Coding") 12 | ![GitHub](http://oqjgod7s1.bkt.clouddn.com/WechatIMG360.jpeg?v=3&s=100 "GitHub,Social Coding") 13 | ![GitHub](http://oqjgod7s1.bkt.clouddn.com/WechatIMG361.jpeg?v=3&s=100 "GitHub,Social Coding") 14 | ![GitHub](http://oqjgod7s1.bkt.clouddn.com/WechatIMG362.jpeg?v=3&s=100 "GitHub,Social Coding") 15 | ![GitHub](http://oqjgod7s1.bkt.clouddn.com/WechatIMG363.jpeg?v=3&s=100 "GitHub,Social Coding") 16 | 17 | # 登录注册说明 18 | > 登录注册用的就是localstorage，完全是假数据，我尝试用node取解决这样的问题，但奈何node基础薄弱，实现不了，努力奋斗中~ 19 | 20 | ## Build Setup 21 | 22 | ``` bash 23 | # 下载依赖（建议使用淘宝镜像） 24 | npm install 25 | 26 | # 启动项目本地端口号为8080 localhost:8080 27 | npm run dev 28 | 29 | ``` 30 | 31 | -------------------------------------------------------------------------------- /api.json: -------------------------------------------------------------------------------- 1 | { 2 | "tab": { 3 | "list": [ 4 | { 5 | "name": "头条", 6 | "icon": "http://oqjgod7s1.bkt.clouddn.com/toutiao.png", 7 | "icon1": "http://oqjgod7s1.bkt.clouddn.com/toutiao0.png" 8 | }, 9 | { 10 | "name": "专栏", 11 | "icon": "http://oqjgod7s1.bkt.clouddn.com/zhuanlan.png", 12 | "icon1": "http://oqjgod7s1.bkt.clouddn.com/zhuanlan0.png" 13 | }, 14 | { 15 | "name": "问答", 16 | "icon": "http://oqjgod7s1.bkt.clouddn.com/wenda.png", 17 | "icon1": "http://oqjgod7s1.bkt.clouddn.com/wenda0.png" 18 | }, 19 | { 20 | "name": "发现", 21 | "icon": "http://oqjgod7s1.bkt.clouddn.com/faxian.png", 22 | "icon1": "http://oqjgod7s1.bkt.clouddn.com/faxian0.png" 23 | }, 24 | { 25 | "name": "我的", 26 | "icon": "http://oqjgod7s1.bkt.clouddn.com/wode.png", 27 | "icon1": "http://oqjgod7s1.bkt.clouddn.com/wode0.png" 28 | } 29 | ] 30 | }, 31 | "nav": { 32 | "list": [ 33 | { 34 | "name": "JavaScript" 35 | }, 36 | { 37 | "name": "HTML" 38 | }, 39 | { 40 | "name": "CSS" 41 | }, 42 | { 43 | "name": "IOS" 44 | }, 45 | { 46 | "name": "Android" 47 | }, 48 | { 49 | "name": "Vue.js" 50 | }, 51 | { 52 | "name": "React.js" 53 | }, 54 | { 55 | "name": "Angular.js" 56 | }, 57 | { 58 | "name": "Webpack" 59 | }, 60 | { 61 | "name": "sass" 62 | }, 63 | { 64 | "name": "php" 65 | }, 66 | { 67 | "name": "jquery" 68 | }, 69 | { 70 | "name": "GitHub" 71 | }, 72 | { 73 | "name": "promise" 74 | } 75 | ] 76 | }, 77 | "articleList": { 78 | "list": [ 79 | { 80 | "title": "node.js环境搭建与配置的那些坑", 81 | "author": "罗小胖", 82 | "time": "1个小时前", 83 | "classify": "#Node", 84 | "location": "https://segmentfault.com/a/1190000009902381" 85 | }, 86 | { 87 | "title": "Vue独立构建与运行时构建", 88 | "author": "mpccc", 89 | "time": "1个小时前", 90 | "classify": "#Vue.js", 91 | "location": "https://segmentfault.com/a/1190000009893403" 92 | }, 93 | { 94 | "title": "全栈开发——动手打造属于自己的直播间（Vue+SpringBoot+Nginx）", 95 | "author": " 胡渣渣", 96 | "time": "1个小时前", 97 | "classify": "#Spring", 98 | "location": "https://segmentfault.com/a/1190000009892006" 99 | }, 100 | { 101 | "title": "ECMAScript 2017（ES8）特性概述", 102 | "author": "王下邀月熊_Chevalier", 103 | "time": "1个小时前", 104 | "classify": "#es8", 105 | "location": "https://segmentfault.com/a/1190000010156802" 106 | }, 107 | { 108 | "title": "从CSS盒子模型说起", 109 | "author": "damonare", 110 | "time": "1天前", 111 | "classify": "#css", 112 | "location": "https://segmentfault.com/a/1190000010154024" 113 | }, 114 | { 115 | "title": "爱不释手的Ajax", 116 | "author": "LuckyJing", 117 | "time": "2天前", 118 | "classify": "#Ajax", 119 | "location": "https://segmentfault.com/a/1190000010150994" 120 | }, 121 | { 122 | "title": "JavaScript专题之深浅拷贝", 123 | "author": "冴羽", 124 | "time": "1个月前", 125 | "classify": "#Javascript", 126 | "location": "https://segmentfault.com/a/1190000010150234" 127 | } 128 | ] 129 | }, 130 | "labelList": { 131 | "list": [ 132 | { 133 | "title": "vue.js", 134 | "num": "190" 135 | }, 136 | { 137 | "title": "javascript", 138 | "num": "190" 139 | }, 140 | { 141 | "title": "vue-cli", 142 | "num": "190" 143 | }, 144 | { 145 | "title": "css3", 146 | "num": "190" 147 | }, 148 | { 149 | "title": "webpack", 150 | "num": "190" 151 | }, 152 | { 153 | "title": "前端开发工程化", 154 | "num": "190" 155 | }, 156 | { 157 | "title": "vue-resource", 158 | "num": "190" 159 | }, 160 | { 161 | "title": "vue-router", 162 | "num": "190" 163 | } 164 | ] 165 | }, 166 | "noticeList": { 167 | "listF": [ 168 | { 169 | "name": "布奈丶", 170 | "article": "Vue的数据绑定部分的简要过程解释", 171 | "type": "收藏了你的文章" 172 | }, 173 | { 174 | "name": "王下邀月熊_Chevalier", 175 | "article": "LocalMQ：从零构建类 RocketMQ 高性能消息队列", 176 | "type": "收藏了你的文章" 177 | }, 178 | { 179 | "name": "MageekChiu", 180 | "article": "Nodejs中的一些小trick", 181 | "type": "收藏了你的文章" 182 | }, 183 | { 184 | "name": "布奈丶", 185 | "article": "Vue的数据绑定部分的简要过程解释", 186 | "type": "收藏了你的文章" 187 | }, 188 | { 189 | "name": "boxsnake", 190 | "article": " export default new Vue({}) 在Vue-router中数据绑定失效的问题 ", 191 | "type": "回答了问题" 192 | }, 193 | { 194 | "name": "答案在风中飘着", 195 | "article": "vue 模板里获取多层嵌套的数据问题", 196 | "type": "邀请你问答问题" 197 | }, 198 | { 199 | "name": "JUST_ ", 200 | "article": "关于vue项目部署到ngnix后出现的问题", 201 | "type": "修改了你回答过的问题" 202 | }, 203 | { 204 | "name": "ClearLove ", 205 | "article": "HTML编码规范建议", 206 | "type": "回复了你的评论" 207 | } 208 | ], 209 | "listS": [ 210 | { 211 | "name": "Reckless ", 212 | "article": " 使用vue-cli初始化项目", 213 | "point": "+10" 214 | }, 215 | { 216 | "name": "Reckless ", 217 | "article": "Vue 属性循环数组对象如何赋值属性？", 218 | "point": "+15" 219 | }, 220 | { 221 | "name": "Reckless ", 222 | "article": " vuejs 如何给option 添加点击事件", 223 | "point": "+5" 224 | } 225 | ], 226 | "listT": [ 227 | { 228 | "name": "Reckless", 229 | "time": "1天前", 230 | "type": "1" 231 | }, 232 | { 233 | "name": "test", 234 | "time": "10天前", 235 | "type": "0" 236 | }, 237 | { 238 | "name": "demo", 239 | "time": "1年前", 240 | "type": "1" 241 | } 242 | ] 243 | } 244 | } 245 | -------------------------------------------------------------------------------- /build/build.js: -------------------------------------------------------------------------------- 1 | require('./check-versions')() 2 | 3 | process.env.NODE_ENV = 'production' 4 | 5 | var ora = require('ora') 6 | var rm = require('rimraf') 7 | var path = require('path') 8 | var chalk = require('chalk') 9 | var webpack = require('webpack') 10 | var config = require('../config') 11 | var webpackConfig = require('./webpack.prod.conf') 12 | 13 | var spinner = ora('building for production...') 14 | spinner.start() 15 | 16 | rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => { 17 | if (err) throw err 18 | webpack(webpackConfig, function (err, stats) { 19 | spinner.stop() 20 | if (err) throw err 21 | process.stdout.write(stats.toString({ 22 | colors: true, 23 | modules: false, 24 | children: false, 25 | chunks: false, 26 | chunkModules: false 27 | }) + '\n\n') 28 | 29 | console.log(chalk.cyan(' Build complete.\n')) 30 | console.log(chalk.yellow( 31 | ' Tip: built files are meant to be served over an HTTP server.\n' + 32 | ' Opening index.html over file:// won\'t work.\n' 33 | )) 34 | }) 35 | }) 36 | -------------------------------------------------------------------------------- /build/check-versions.js: -------------------------------------------------------------------------------- 1 | var chalk = require('chalk') 2 | var semver = require('semver') 3 | var packageConfig = require('../package.json') 4 | var shell = require('shelljs') 5 | function exec (cmd) { 6 | return require('child_process').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 | 17 | if (shell.which('npm')) { 18 | versionRequirements.push({ 19 | name: 'npm', 20 | currentVersion: exec('npm --version'), 21 | versionRequirement: packageConfig.engines.npm 22 | }) 23 | } 24 | 25 | module.exports = function () { 26 | var warnings = [] 27 | for (var i = 0; i < versionRequirements.length; i++) { 28 | var mod = versionRequirements[i] 29 | if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) { 30 | warnings.push(mod.name + ': ' + 31 | chalk.red(mod.currentVersion) + ' should be ' + 32 | chalk.green(mod.versionRequirement) 33 | ) 34 | } 35 | } 36 | 37 | if (warnings.length) { 38 | console.log('') 39 | console.log(chalk.yellow('To use this template, you must update following to modules:')) 40 | console.log() 41 | for (var i = 0; i < warnings.length; i++) { 42 | var warning = warnings[i] 43 | console.log(' ' + warning) 44 | } 45 | console.log() 46 | process.exit(1) 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /build/dev-server.js: -------------------------------------------------------------------------------- 1 | require('./check-versions')() 2 | 3 | var config = require('../config') 4 | if (!process.env.NODE_ENV) { 5 | process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV) 6 | } 7 | 8 | var opn = require('opn') 9 | var path = require('path') 10 | var express = require('express') 11 | var webpack = require('webpack') 12 | var proxyMiddleware = require('http-proxy-middleware') 13 | var webpackConfig = process.env.NODE_ENV === 'testing' 14 | ? require('./webpack.prod.conf') 15 | : require('./webpack.dev.conf') 16 | 17 | // default port where dev server listens for incoming traffic 18 | var port = process.env.PORT || config.dev.port 19 | // automatically open browser, if not set will be false 20 | var autoOpenBrowser = !!config.dev.autoOpenBrowser 21 | // Define HTTP proxies to your custom API backend 22 | // https://github.com/chimurai/http-proxy-middleware 23 | var proxyTable = config.dev.proxyTable 24 | 25 | var app = express() 26 | var appData = require('../api.json') 27 | var tab = appData.tab 28 | var nav = appData.nav 29 | var article = appData.articleList 30 | var labelList = appData.labelList 31 | var message = appData.noticeList 32 | 33 | 34 | var apiRoutes = express.Router() 35 | 36 | 37 | apiRoutes.post('/login', function (req, res, next) { 38 | console.log(req) 39 | res.json({ 40 | errno: 0, 41 | data: message, 42 | }); 43 | // //用户名密码 44 | // var username = req.body.username 45 | // var password = req.body.password 46 | // 47 | // if (username === 'lmz' && password === '123456') { 48 | // res.cookie('user', username) 49 | // return res.send({ 50 | // status: 1 51 | // }) 52 | // } 53 | // res.json({ 54 | // errno: 0, 55 | // data: message 56 | // }); 57 | // return res.send({ 58 | // status: 0, 59 | // info: '登录失败' 60 | // }) 61 | 62 | }) 63 | 64 | apiRoutes.get('/message', function (req, res) { 65 | res.json({ 66 | errno: 0, 67 | data: message 68 | }); 69 | }) 70 | apiRoutes.get('/tab', function (req, res) { 71 | res.json({ 72 | errno: 0, 73 | data: tab 74 | }); 75 | }) 76 | apiRoutes.get('/nav', function (req, res) { 77 | res.json({ 78 | errno: 0, 79 | data: nav 80 | }); 81 | }) 82 | apiRoutes.get('/article', function (req, res) { 83 | res.json({ 84 | errno: 0, 85 | data: article 86 | }); 87 | }) 88 | apiRoutes.get('/labelList', function (req, res) { 89 | res.json({ 90 | errno: 0, 91 | data: labelList 92 | }); 93 | }) 94 | 95 | app.use('/api', apiRoutes) 96 | 97 | var compiler = webpack(webpackConfig) 98 | 99 | var devMiddleware = require('webpack-dev-middleware')(compiler, { 100 | publicPath: webpackConfig.output.publicPath, 101 | quiet: true 102 | }) 103 | 104 | var hotMiddleware = require('webpack-hot-middleware')(compiler, { 105 | log: () => { 106 | } 107 | }) 108 | // force page reload when html-webpack-plugin template changes 109 | compiler.plugin('compilation', function (compilation) { 110 | compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) { 111 | hotMiddleware.publish({action: 'reload'}) 112 | cb() 113 | }) 114 | }) 115 | 116 | // proxy api requests 117 | Object.keys(proxyTable).forEach(function (context) { 118 | var options = proxyTable[context] 119 | if (typeof options === 'string') { 120 | options = {target: options} 121 | } 122 | app.use(proxyMiddleware(options.filter || context, options)) 123 | }) 124 | 125 | // handle fallback for HTML5 history API 126 | app.use(require('connect-history-api-fallback')()) 127 | 128 | // serve webpack bundle output 129 | app.use(devMiddleware) 130 | 131 | // enable hot-reload and state-preserving 132 | // compilation error display 133 | app.use(hotMiddleware) 134 | 135 | // serve pure static assets 136 | var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory) 137 | app.use(staticPath, express.static('./static')) 138 | 139 | var uri = 'http://localhost:' + port 140 | 141 | var _resolve 142 | var readyPromise = new Promise(resolve => { 143 | _resolve = resolve 144 | }) 145 | 146 | console.log('> Starting dev server...') 147 | devMiddleware.waitUntilValid(() => { 148 | console.log('> Listening at ' + uri + '\n') 149 | // when env is testing, don't need open it 150 | if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') { 151 | opn(uri) 152 | } 153 | _resolve() 154 | }) 155 | 156 | var server = app.listen(port) 157 | 158 | module.exports = { 159 | ready: readyPromise, 160 | close: () => { 161 | server.close() 162 | } 163 | } 164 | -------------------------------------------------------------------------------- /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 | 15 | var cssLoader = { 16 | loader: 'css-loader', 17 | options: { 18 | minimize: process.env.NODE_ENV === 'production', 19 | sourceMap: options.sourceMap 20 | } 21 | } 22 | 23 | // generate loader string to be used with extract text plugin 24 | function generateLoaders(loader, loaderOptions) { 25 | var loaders = [cssLoader] 26 | if (loader) { 27 | loaders.push({ 28 | loader: loader + '-loader', 29 | options: Object.assign({}, loaderOptions, { 30 | sourceMap: options.sourceMap 31 | }) 32 | }) 33 | } 34 | 35 | // Extract CSS when that option is specified 36 | // (which is the case during production build) 37 | if (options.extract) { 38 | return ExtractTextPlugin.extract({ 39 | use: loaders, 40 | fallback: 'vue-style-loader' 41 | }) 42 | } else { 43 | return ['vue-style-loader'].concat(loaders) 44 | } 45 | } 46 | 47 | // https://vue-loader.vuejs.org/en/configurations/extract-css.html 48 | return { 49 | css: generateLoaders(), 50 | postcss: generateLoaders(), 51 | less: generateLoaders('less'), 52 | sass: generateLoaders('sass', {indentedSyntax: true}), 53 | scss: generateLoaders('sass'), 54 | // scss: generateLoaders(['css','sass?data=@import "~assets/sass/common"']), 55 | stylus: generateLoaders('stylus'), 56 | styl: generateLoaders('stylus') 57 | } 58 | } 59 | 60 | // Generate loaders for standalone style files (outside of .vue) 61 | exports.styleLoaders = function (options) { 62 | var output = [] 63 | var loaders = exports.cssLoaders(options) 64 | for (var extension in loaders) { 65 | var loader = loaders[extension] 66 | output.push({ 67 | test: new RegExp('\\.' + extension + '$'), 68 | use: loader 69 | }) 70 | } 71 | return output 72 | } 73 | -------------------------------------------------------------------------------- /build/vue-loader.conf.js: -------------------------------------------------------------------------------- 1 | var utils = require('./utils') 2 | var config = require('../config') 3 | var isProduction = process.env.NODE_ENV === 'production' 4 | 5 | module.exports = { 6 | loaders: utils.cssLoaders({ 7 | sourceMap: isProduction 8 | ? config.build.productionSourceMap 9 | : config.dev.cssSourceMap, 10 | extract: isProduction 11 | }) 12 | } 13 | -------------------------------------------------------------------------------- /build/webpack.base.conf.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var utils = require('./utils') 3 | var config = require('../config') 4 | var vueLoaderConfig = require('./vue-loader.conf') 5 | 6 | function resolve (dir) { 7 | return path.join(__dirname, '..', dir) 8 | } 9 | 10 | module.exports = { 11 | entry: { 12 | app: './src/main.js' 13 | }, 14 | output: { 15 | path: config.build.assetsRoot, 16 | filename: '[name].js', 17 | publicPath: process.env.NODE_ENV === 'production' 18 | ? config.build.assetsPublicPath 19 | : config.dev.assetsPublicPath 20 | }, 21 | resolve: { 22 | extensions: ['.js', '.vue', '.json'], 23 | alias: { 24 | 'vue$': 'vue/dist/vue.esm.js', 25 | '@': resolve('src') 26 | } 27 | }, 28 | module: { 29 | rules: [ 30 | { 31 | test: /\.vue$/, 32 | loader: 'vue-loader', 33 | options: vueLoaderConfig 34 | }, 35 | { 36 | test: /\.js$/, 37 | loader: 'babel-loader', 38 | include: [resolve('src'), resolve('test')] 39 | }, 40 | { 41 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 42 | loader: 'url-loader', 43 | options: { 44 | limit: 10000, 45 | name: utils.assetsPath('img/[name].[hash:7].[ext]') 46 | } 47 | }, 48 | { 49 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 50 | loader: 'url-loader', 51 | options: { 52 | limit: 10000, 53 | name: utils.assetsPath('fonts/[name].[hash:7].[ext]') 54 | } 55 | } 56 | ] 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /build/webpack.dev.conf.js: -------------------------------------------------------------------------------- 1 | var utils = require('./utils') 2 | var webpack = require('webpack') 3 | var config = require('../config') 4 | var merge = require('webpack-merge') 5 | var baseWebpackConfig = require('./webpack.base.conf') 6 | var HtmlWebpackPlugin = require('html-webpack-plugin') 7 | var FriendlyErrorsPlugin = 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 | rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap }) 17 | }, 18 | // cheap-module-eval-source-map is faster for development 19 | devtool: '#cheap-module-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.HotModuleReplacementPlugin(), 26 | new webpack.NoEmitOnErrorsPlugin(), 27 | // https://github.com/ampedandwired/html-webpack-plugin 28 | new HtmlWebpackPlugin({ 29 | filename: 'index.html', 30 | template: 'index.html', 31 | inject: true 32 | }), 33 | new FriendlyErrorsPlugin() 34 | ] 35 | }) 36 | -------------------------------------------------------------------------------- /build/webpack.prod.conf.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var utils = require('./utils') 3 | var webpack = require('webpack') 4 | var config = require('../config') 5 | var merge = require('webpack-merge') 6 | var baseWebpackConfig = require('./webpack.base.conf') 7 | var CopyWebpackPlugin = require('copy-webpack-plugin') 8 | var HtmlWebpackPlugin = require('html-webpack-plugin') 9 | var ExtractTextPlugin = require('extract-text-webpack-plugin') 10 | var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin') 11 | 12 | var env = process.env.NODE_ENV === 'testing' 13 | ? require('../config/test.env') 14 | : config.build.env 15 | 16 | var webpackConfig = merge(baseWebpackConfig, { 17 | module: { 18 | rules: utils.styleLoaders({ 19 | sourceMap: config.build.productionSourceMap, 20 | extract: true 21 | }) 22 | }, 23 | devtool: config.build.productionSourceMap ? '#source-map' : false, 24 | output: { 25 | path: config.build.assetsRoot, 26 | filename: utils.assetsPath('js/[name].[chunkhash].js'), 27 | chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') 28 | }, 29 | plugins: [ 30 | // http://vuejs.github.io/vue-loader/en/workflow/production.html 31 | new webpack.DefinePlugin({ 32 | 'process.env': env 33 | }), 34 | new webpack.optimize.UglifyJsPlugin({ 35 | compress: { 36 | warnings: false 37 | }, 38 | sourceMap: true 39 | }), 40 | // extract css into its own file 41 | new ExtractTextPlugin({ 42 | filename: utils.assetsPath('css/[name].[contenthash].css') 43 | }), 44 | // Compress extracted CSS. We are using this plugin so that possible 45 | // duplicated CSS from different components can be deduped. 46 | new OptimizeCSSPlugin({ 47 | cssProcessorOptions: { 48 | safe: true 49 | } 50 | }), 51 | // generate dist index.html with correct asset hash for caching. 52 | // you can customize output by editing /index.html 53 | // see https://github.com/ampedandwired/html-webpack-plugin 54 | new HtmlWebpackPlugin({ 55 | filename: process.env.NODE_ENV === 'testing' 56 | ? 'index.html' 57 | : config.build.index, 58 | template: 'index.html', 59 | inject: true, 60 | minify: { 61 | removeComments: true, 62 | collapseWhitespace: true, 63 | removeAttributeQuotes: true 64 | // more options: 65 | // https://github.com/kangax/html-minifier#options-quick-reference 66 | }, 67 | // necessary to consistently work with multiple chunks via CommonsChunkPlugin 68 | chunksSortMode: 'dependency' 69 | }), 70 | // split vendor js into its own file 71 | new webpack.optimize.CommonsChunkPlugin({ 72 | name: 'vendor', 73 | minChunks: function (module, count) { 74 | // any required modules inside node_modules are extracted to vendor 75 | return ( 76 | module.resource && 77 | /\.js$/.test(module.resource) && 78 | module.resource.indexOf( 79 | path.join(__dirname, '../node_modules') 80 | ) === 0 81 | ) 82 | } 83 | }), 84 | // extract webpack runtime and module manifest to its own file in order to 85 | // prevent vendor hash from being updated whenever app bundle is updated 86 | new webpack.optimize.CommonsChunkPlugin({ 87 | name: 'manifest', 88 | chunks: ['vendor'] 89 | }), 90 | // copy custom static assets 91 | new CopyWebpackPlugin([ 92 | { 93 | from: path.resolve(__dirname, '../static'), 94 | to: config.build.assetsSubDirectory, 95 | ignore: ['.*'] 96 | } 97 | ]) 98 | ] 99 | }) 100 | 101 | if (config.build.productionGzip) { 102 | var CompressionWebpackPlugin = require('compression-webpack-plugin') 103 | 104 | webpackConfig.plugins.push( 105 | new CompressionWebpackPlugin({ 106 | asset: '[path].gz[query]', 107 | algorithm: 'gzip', 108 | test: new RegExp( 109 | '\\.(' + 110 | config.build.productionGzipExtensions.join('|') + 111 | ')$' 112 | ), 113 | threshold: 10240, 114 | minRatio: 0.8 115 | }) 116 | ) 117 | } 118 | 119 | if (config.build.bundleAnalyzerReport) { 120 | var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin 121 | webpackConfig.plugins.push(new BundleAnalyzerPlugin()) 122 | } 123 | 124 | module.exports = webpackConfig 125 | -------------------------------------------------------------------------------- /build/webpack.test.conf.js: -------------------------------------------------------------------------------- 1 | // This is the webpack config used for unit tests. 2 | 3 | var utils = require('./utils') 4 | var webpack = require('webpack') 5 | var merge = require('webpack-merge') 6 | var baseConfig = require('./webpack.base.conf') 7 | 8 | var webpackConfig = merge(baseConfig, { 9 | // use inline sourcemap for karma-sourcemap-loader 10 | module: { 11 | rules: utils.styleLoaders() 12 | }, 13 | devtool: '#inline-source-map', 14 | resolveLoader: { 15 | alias: { 16 | // necessary to to make lang="scss" work in test when using vue-loader's ?inject option 17 | // see discussion at https://github.com/vuejs/vue-loader/issues/724 18 | 'scss-loader': 'sass-loader' 19 | } 20 | }, 21 | plugins: [ 22 | new webpack.DefinePlugin({ 23 | 'process.env': require('../config/test.env') 24 | }) 25 | ] 26 | }) 27 | 28 | // no need for app entry during tests 29 | delete webpackConfig.entry 30 | 31 | module.exports = webpackConfig 32 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | // Run the build command with an extra argument to 19 | // View the bundle analyzer report after build finishes: 20 | // `npm run build --report` 21 | // Set to `true` or `false` to always turn it on or off 22 | bundleAnalyzerReport: process.env.npm_config_report 23 | }, 24 | dev: { 25 | env: require('./dev.env'), 26 | port: 8080, 27 | autoOpenBrowser: true, 28 | assetsSubDirectory: 'static', 29 | assetsPublicPath: '/', 30 | proxyTable: {}, 31 | // CSS Sourcemaps off by default because relative paths are "buggy" 32 | // with this option, according to the CSS-Loader README 33 | // (https://github.com/webpack/css-loader#sourcemaps) 34 | // In our experience, they generally work as expected, 35 | // just be aware of this issue when enabling this option. 36 | cssSourceMap: false 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /config/prod.env.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | NODE_ENV: '"production"' 3 | } 4 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 9 | segmentFault 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-sf", 3 | "version": "1.0.0", 4 | "description": "vue-segmentFault", 5 | "author": "Recklesslmz <936838918@qq.com>", 6 | "private": true, 7 | "scripts": { 8 | "dev": "node build/dev-server.js", 9 | "start": "node build/dev-server.js", 10 | "build": "node build/build.js", 11 | "unit": "cross-env BABEL_ENV=test 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 | "server": "node server/bin/start.js" 15 | }, 16 | "dependencies": { 17 | "axios": "^0.16.2", 18 | "better-scroll": "^0.2.4", 19 | "highlight.js": "^9.12.0", 20 | "mint-ui": "^2.2.7", 21 | "moment": "^2.18.1", 22 | "vue": "^2.3.3", 23 | "vue-router": "^2.3.1", 24 | "vuex": "^2.3.1" 25 | }, 26 | "devDependencies": { 27 | "autoprefixer": "^6.7.2", 28 | "babel-core": "^6.22.1", 29 | "babel-loader": "^6.2.10", 30 | "babel-plugin-istanbul": "^4.1.1", 31 | "babel-plugin-transform-runtime": "^6.22.0", 32 | "babel-preset-env": "^1.3.2", 33 | "babel-preset-es2015": "^6.24.1", 34 | "babel-preset-stage-2": "^6.22.0", 35 | "babel-register": "^6.22.0", 36 | "body-parser": "^1.17.2", 37 | "chai": "^3.5.0", 38 | "chalk": "^1.1.3", 39 | "chromedriver": "^2.27.2", 40 | "connect-history-api-fallback": "^1.3.0", 41 | "cookie-parser": "^1.4.3", 42 | "copy-webpack-plugin": "^4.0.1", 43 | "cross-env": "^4.0.0", 44 | "cross-spawn": "^5.0.1", 45 | "css-loader": "^0.28.0", 46 | "debug": "^2.6.8", 47 | "eventsource-polyfill": "^0.9.6", 48 | "express": "^4.14.1", 49 | "extract-text-webpack-plugin": "^2.0.0", 50 | "file-loader": "^0.11.1", 51 | "friendly-errors-webpack-plugin": "^1.1.3", 52 | "html-webpack-plugin": "^2.28.0", 53 | "http-proxy-middleware": "^0.17.3", 54 | "inject-loader": "^3.0.0", 55 | "karma": "^1.4.1", 56 | "karma-coverage": "^1.1.1", 57 | "karma-mocha": "^1.3.0", 58 | "karma-phantomjs-launcher": "^1.0.2", 59 | "karma-phantomjs-shim": "^1.4.0", 60 | "karma-sinon-chai": "^1.3.1", 61 | "karma-sourcemap-loader": "^0.3.7", 62 | "karma-spec-reporter": "0.0.30", 63 | "karma-webpack": "^2.0.2", 64 | "lolex": "^1.5.2", 65 | "mocha": "^3.2.0", 66 | "morgan": "^1.8.2", 67 | "nightwatch": "^0.9.12", 68 | "node-sass": "^4.5.3", 69 | "opn": "^4.0.2", 70 | "optimize-css-assets-webpack-plugin": "^1.3.0", 71 | "ora": "^1.2.0", 72 | "phantomjs-prebuilt": "^2.1.14", 73 | "rimraf": "^2.6.0", 74 | "sass-loader": "^6.0.6", 75 | "selenium-server": "^3.0.1", 76 | "semver": "^5.3.0", 77 | "serve-favicon": "^2.4.3", 78 | "shelljs": "^0.7.6", 79 | "sinon": "^2.1.0", 80 | "sinon-chai": "^2.8.0", 81 | "url-loader": "^0.5.8", 82 | "vue-loader": "^12.1.0", 83 | "vue-style-loader": "^3.0.1", 84 | "vue-template-compiler": "^2.3.3", 85 | "webpack": "^2.6.1", 86 | "webpack-bundle-analyzer": "^2.2.1", 87 | "webpack-dev-middleware": "^1.10.0", 88 | "webpack-hot-middleware": "^2.18.0", 89 | "webpack-merge": "^4.1.0" 90 | }, 91 | "engines": { 92 | "node": ">= 4.0.0", 93 | "npm": ">= 3.0.0" 94 | }, 95 | "browserslist": [ 96 | "> 1%", 97 | "last 2 versions", 98 | "not ie <= 8" 99 | ] 100 | } 101 | -------------------------------------------------------------------------------- /server/app.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by limuzi on 2017/7/31. 3 | */ 4 | var express = require('express'); 5 | var path = require('path'); 6 | var favicon = require('serve-favicon'); 7 | var logger = require('morgan'); 8 | var cookieParser = require('cookie-parser'); 9 | var bodyParser = require('body-parser'); 10 | 11 | // var index = require('./router/index'); 12 | var data = require('./router/data'); 13 | 14 | var app = express(); 15 | 16 | 17 | 18 | // uncomment after placing your favicon in /public 19 | //app.use(favicon(__dirname + '/public/favicon.ico')); 20 | app.use(logger('dev')); 21 | app.use(bodyParser.json()); 22 | app.use(bodyParser.urlencoded({ extended: false })); 23 | app.use(cookieParser()); 24 | app.use(express.static(path.join(__dirname, 'public'))); 25 | 26 | // app.use('/', index); 27 | app.use('/data', data); 28 | 29 | // catch 404 and forward to error handler 30 | app.use(function(req, res, next) { 31 | var err = new Error('Not Found'); 32 | err.status = 404; 33 | next(err); 34 | }); 35 | 36 | // error handlers 37 | 38 | // development error handler 39 | // will print stacktrace 40 | if (app.get('env') === 'development') { 41 | app.use(function(err, req, res, next) { 42 | res.status(err.status || 500); 43 | res.render('error', { 44 | message: err.message, 45 | error: err 46 | }); 47 | }); 48 | } 49 | 50 | // production error handler 51 | // no stacktraces leaked to user 52 | app.use(function(err, req, res, next) { 53 | res.status(err.status || 500); 54 | res.render('error', { 55 | message: err.message, 56 | error: {} 57 | }); 58 | }); 59 | 60 | 61 | module.exports = app; 62 | -------------------------------------------------------------------------------- /server/bin/start.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | /** 4 | * Module dependencies. 5 | */ 6 | 7 | var app = require('../app'); 8 | var debug = require('debug')('express-demo:server'); 9 | var http = require('http'); 10 | 11 | /** 12 | * Get port from environment and store in Express. 13 | */ 14 | 15 | var port = normalizePort(process.env.PORT || '3000'); 16 | app.set('port', port); 17 | 18 | /** 19 | * Create HTTP server. 20 | */ 21 | 22 | var server = http.createServer(app); 23 | 24 | /** 25 | * Listen on provided port, on all network interfaces. 26 | */ 27 | 28 | server.listen(port); 29 | server.on('error', onError); 30 | server.on('listening', onListening); 31 | 32 | /** 33 | * Normalize a port into a number, string, or false. 34 | */ 35 | 36 | function normalizePort(val) { 37 | var port = parseInt(val, 10); 38 | 39 | if (isNaN(port)) { 40 | // named pipe 41 | return val; 42 | } 43 | 44 | if (port >= 0) { 45 | // port number 46 | return port; 47 | } 48 | 49 | return false; 50 | } 51 | 52 | /** 53 | * Event listener for HTTP server "error" event. 54 | */ 55 | 56 | function onError(error) { 57 | if (error.syscall !== 'listen') { 58 | throw error; 59 | } 60 | 61 | var bind = typeof port === 'string' 62 | ? 'Pipe ' + port 63 | : 'Port ' + port; 64 | 65 | // handle specific listen errors with friendly messages 66 | switch (error.code) { 67 | case 'EACCES': 68 | console.error(bind + ' requires elevated privileges'); 69 | process.exit(1); 70 | break; 71 | case 'EADDRINUSE': 72 | console.error(bind + ' is already in use'); 73 | process.exit(1); 74 | break; 75 | default: 76 | throw error; 77 | } 78 | } 79 | 80 | /** 81 | * Event listener for HTTP server "listening" event. 82 | */ 83 | 84 | function onListening() { 85 | var addr = server.address(); 86 | var bind = typeof addr === 'string' 87 | ? 'pipe ' + addr 88 | : 'port ' + addr.port; 89 | debug('Listening on ' + bind); 90 | } 91 | -------------------------------------------------------------------------------- /server/router/data.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by limuzi on 2017/7/13. 3 | */ 4 | var express = require('express') 5 | var router = express.Router() 6 | var fs = require('fs') 7 | 8 | // var PATH = './public/data/' 9 | 10 | router.post('/login', function (req, res, next) { 11 | //用户名密码 12 | var username = req.body.username 13 | var password = req.body.password 14 | 15 | if (username === 'lmz' && password === '123456') { 16 | res.cookie('user', username) 17 | return res.send({ 18 | status: 1 19 | }) 20 | } 21 | 22 | return res.send({ 23 | status: 0, 24 | info: '登录失败' 25 | }) 26 | 27 | }) 28 | 29 | module.exports = router; 30 | -------------------------------------------------------------------------------- /server/router/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by limuzi on 2017/7/13. 3 | */ 4 | 5 | 6 | var express = require('express'); 7 | var router = express.Router(); 8 | var fs = require('fs'); 9 | 10 | var PATH = './public/data/'; 11 | 12 | /* GET home page. */ 13 | router.get('/', function (req, res, next) { 14 | res.render('index', {title: '首页'}); 15 | }); 16 | 17 | router.get('/login', function (req, res, next) { 18 | res.render('login', {title: '登录'}); 19 | }); 20 | 21 | router.get('/tuijian', function (req, res, next) { 22 | if (!req.cookies.user) { 23 | return res.render('login', {}); 24 | } 25 | res.render('tuijian', {}); 26 | }); 27 | 28 | router.get('/edit', function (req, res, next) { 29 | console.log(req.query.type+'=====') 30 | if (!req.cookies.user) { 31 | return res.render('login', {}); 32 | } 33 | var type = req.query.type; 34 | if (type) { 35 | var obj = {}; 36 | switch (type) { 37 | case 'sanwen': 38 | obj = {}; 39 | break; 40 | case 'it': 41 | obj = {}; 42 | break; 43 | case 'manager': 44 | obj = {}; 45 | break; 46 | case 'cookies': 47 | obj = {}; 48 | break; 49 | default : 50 | return res.send({ 51 | status: 0, 52 | info: '参数错误' 53 | }); 54 | break; 55 | } 56 | fs.readFile(PATH + type + '.json', function (err, data) { 57 | if (err) { 58 | return res.send({ 59 | status: 0, 60 | info: 'fail.....' 61 | }); 62 | } 63 | var obj = JSON.parse(data.toString()); 64 | return res.render('edit', { 65 | data: obj 66 | }); 67 | }); 68 | } else { 69 | return res.send({ 70 | status: 0, 71 | info: '参数错误' 72 | }); 73 | } 74 | }); 75 | 76 | module.exports = router; 77 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 12 | 13 | 32 | -------------------------------------------------------------------------------- /src/assets/css/animate.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /*! 4 | * animate.css -http://daneden.me/animate 5 | * Version - 3.5.2 6 | * Licensed under the MIT license - http://opensource.org/licenses/MIT 7 | * 8 | * Copyright (c) 2017 Daniel Eden 9 | */ 10 | 11 | .animated { 12 | animation-duration: 1s; 13 | animation-fill-mode: both; 14 | } 15 | 16 | .animated.infinite { 17 | animation-iteration-count: infinite; 18 | } 19 | 20 | .animated.hinge { 21 | animation-duration: 2s; 22 | } 23 | 24 | .animated.flipOutX, 25 | .animated.flipOutY, 26 | .animated.bounceIn, 27 | .animated.bounceOut { 28 | animation-duration: .75s; 29 | } 30 | 31 | @keyframes bounce { 32 | from, 20%, 53%, 80%, to { 33 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 34 | transform: translate3d(0,0,0); 35 | } 36 | 37 | 40%, 43% { 38 | animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 39 | transform: translate3d(0, -30px, 0); 40 | } 41 | 42 | 70% { 43 | animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 44 | transform: translate3d(0, -15px, 0); 45 | } 46 | 47 | 90% { 48 | transform: translate3d(0,-4px,0); 49 | } 50 | } 51 | 52 | .bounce { 53 | animation-name: bounce; 54 | transform-origin: center bottom; 55 | } 56 | 57 | @keyframes flash { 58 | from, 50%, to { 59 | opacity: 1; 60 | } 61 | 62 | 25%, 75% { 63 | opacity: 0; 64 | } 65 | } 66 | 67 | .flash { 68 | animation-name: flash; 69 | } 70 | 71 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 72 | 73 | @keyframes pulse { 74 | from { 75 | transform: scale3d(1, 1, 1); 76 | } 77 | 78 | 50% { 79 | transform: scale3d(1.05, 1.05, 1.05); 80 | } 81 | 82 | to { 83 | transform: scale3d(1, 1, 1); 84 | } 85 | } 86 | 87 | .pulse { 88 | animation-name: pulse; 89 | } 90 | 91 | @keyframes rubberBand { 92 | from { 93 | transform: scale3d(1, 1, 1); 94 | } 95 | 96 | 30% { 97 | transform: scale3d(1.25, 0.75, 1); 98 | } 99 | 100 | 40% { 101 | transform: scale3d(0.75, 1.25, 1); 102 | } 103 | 104 | 50% { 105 | transform: scale3d(1.15, 0.85, 1); 106 | } 107 | 108 | 65% { 109 | transform: scale3d(.95, 1.05, 1); 110 | } 111 | 112 | 75% { 113 | transform: scale3d(1.05, .95, 1); 114 | } 115 | 116 | to { 117 | transform: scale3d(1, 1, 1); 118 | } 119 | } 120 | 121 | .rubberBand { 122 | animation-name: rubberBand; 123 | } 124 | 125 | @keyframes shake { 126 | from, to { 127 | transform: translate3d(0, 0, 0); 128 | } 129 | 130 | 10%, 30%, 50%, 70%, 90% { 131 | transform: translate3d(-10px, 0, 0); 132 | } 133 | 134 | 20%, 40%, 60%, 80% { 135 | transform: translate3d(10px, 0, 0); 136 | } 137 | } 138 | 139 | .shake { 140 | animation-name: shake; 141 | } 142 | 143 | @keyframes headShake { 144 | 0% { 145 | transform: translateX(0); 146 | } 147 | 148 | 6.5% { 149 | transform: translateX(-6px) rotateY(-9deg); 150 | } 151 | 152 | 18.5% { 153 | transform: translateX(5px) rotateY(7deg); 154 | } 155 | 156 | 31.5% { 157 | transform: translateX(-3px) rotateY(-5deg); 158 | } 159 | 160 | 43.5% { 161 | transform: translateX(2px) rotateY(3deg); 162 | } 163 | 164 | 50% { 165 | transform: translateX(0); 166 | } 167 | } 168 | 169 | .headShake { 170 | animation-timing-function: ease-in-out; 171 | animation-name: headShake; 172 | } 173 | 174 | @keyframes swing { 175 | 20% { 176 | transform: rotate3d(0, 0, 1, 15deg); 177 | } 178 | 179 | 40% { 180 | transform: rotate3d(0, 0, 1, -10deg); 181 | } 182 | 183 | 60% { 184 | transform: rotate3d(0, 0, 1, 5deg); 185 | } 186 | 187 | 80% { 188 | transform: rotate3d(0, 0, 1, -5deg); 189 | } 190 | 191 | to { 192 | transform: rotate3d(0, 0, 1, 0deg); 193 | } 194 | } 195 | 196 | .swing { 197 | transform-origin: top center; 198 | animation-name: swing; 199 | } 200 | 201 | @keyframes tada { 202 | from { 203 | transform: scale3d(1, 1, 1); 204 | } 205 | 206 | 10%, 20% { 207 | transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); 208 | } 209 | 210 | 30%, 50%, 70%, 90% { 211 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); 212 | } 213 | 214 | 40%, 60%, 80% { 215 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); 216 | } 217 | 218 | to { 219 | transform: scale3d(1, 1, 1); 220 | } 221 | } 222 | 223 | .tada { 224 | animation-name: tada; 225 | } 226 | 227 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 228 | 229 | @keyframes wobble { 230 | from { 231 | transform: none; 232 | } 233 | 234 | 15% { 235 | transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); 236 | } 237 | 238 | 30% { 239 | transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); 240 | } 241 | 242 | 45% { 243 | transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); 244 | } 245 | 246 | 60% { 247 | transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); 248 | } 249 | 250 | 75% { 251 | transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); 252 | } 253 | 254 | to { 255 | transform: none; 256 | } 257 | } 258 | 259 | .wobble { 260 | animation-name: wobble; 261 | } 262 | 263 | @keyframes jello { 264 | from, 11.1%, to { 265 | transform: none; 266 | } 267 | 268 | 22.2% { 269 | transform: skewX(-12.5deg) skewY(-12.5deg); 270 | } 271 | 272 | 33.3% { 273 | transform: skewX(6.25deg) skewY(6.25deg); 274 | } 275 | 276 | 44.4% { 277 | transform: skewX(-3.125deg) skewY(-3.125deg); 278 | } 279 | 280 | 55.5% { 281 | transform: skewX(1.5625deg) skewY(1.5625deg); 282 | } 283 | 284 | 66.6% { 285 | transform: skewX(-0.78125deg) skewY(-0.78125deg); 286 | } 287 | 288 | 77.7% { 289 | transform: skewX(0.390625deg) skewY(0.390625deg); 290 | } 291 | 292 | 88.8% { 293 | transform: skewX(-0.1953125deg) skewY(-0.1953125deg); 294 | } 295 | } 296 | 297 | .jello { 298 | animation-name: jello; 299 | transform-origin: center; 300 | } 301 | 302 | @keyframes bounceIn { 303 | from, 20%, 40%, 60%, 80%, to { 304 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 305 | } 306 | 307 | 0% { 308 | opacity: 0; 309 | transform: scale3d(.3, .3, .3); 310 | } 311 | 312 | 20% { 313 | transform: scale3d(1.1, 1.1, 1.1); 314 | } 315 | 316 | 40% { 317 | transform: scale3d(.9, .9, .9); 318 | } 319 | 320 | 60% { 321 | opacity: 1; 322 | transform: scale3d(1.03, 1.03, 1.03); 323 | } 324 | 325 | 80% { 326 | transform: scale3d(.97, .97, .97); 327 | } 328 | 329 | to { 330 | opacity: 1; 331 | transform: scale3d(1, 1, 1); 332 | } 333 | } 334 | 335 | .bounceIn { 336 | animation-name: bounceIn; 337 | } 338 | 339 | @keyframes bounceInDown { 340 | from, 60%, 75%, 90%, to { 341 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 342 | } 343 | 344 | 0% { 345 | opacity: 0; 346 | transform: translate3d(0, -3000px, 0); 347 | } 348 | 349 | 60% { 350 | opacity: 1; 351 | transform: translate3d(0, 25px, 0); 352 | } 353 | 354 | 75% { 355 | transform: translate3d(0, -10px, 0); 356 | } 357 | 358 | 90% { 359 | transform: translate3d(0, 5px, 0); 360 | } 361 | 362 | to { 363 | transform: none; 364 | } 365 | } 366 | 367 | .bounceInDown { 368 | animation-name: bounceInDown; 369 | } 370 | 371 | @keyframes bounceInLeft { 372 | from, 60%, 75%, 90%, to { 373 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 374 | } 375 | 376 | 0% { 377 | opacity: 0; 378 | transform: translate3d(-3000px, 0, 0); 379 | } 380 | 381 | 60% { 382 | opacity: 1; 383 | transform: translate3d(25px, 0, 0); 384 | } 385 | 386 | 75% { 387 | transform: translate3d(-10px, 0, 0); 388 | } 389 | 390 | 90% { 391 | transform: translate3d(5px, 0, 0); 392 | } 393 | 394 | to { 395 | transform: none; 396 | } 397 | } 398 | 399 | .bounceInLeft { 400 | animation-name: bounceInLeft; 401 | } 402 | 403 | @keyframes bounceInRight { 404 | from, 60%, 75%, 90%, to { 405 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 406 | } 407 | 408 | from { 409 | opacity: 0; 410 | transform: translate3d(3000px, 0, 0); 411 | } 412 | 413 | 60% { 414 | opacity: 1; 415 | transform: translate3d(-25px, 0, 0); 416 | } 417 | 418 | 75% { 419 | transform: translate3d(10px, 0, 0); 420 | } 421 | 422 | 90% { 423 | transform: translate3d(-5px, 0, 0); 424 | } 425 | 426 | to { 427 | transform: none; 428 | } 429 | } 430 | 431 | .bounceInRight { 432 | animation-name: bounceInRight; 433 | } 434 | 435 | @keyframes bounceInUp { 436 | from, 60%, 75%, 90%, to { 437 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 438 | } 439 | 440 | from { 441 | opacity: 0; 442 | transform: translate3d(0, 3000px, 0); 443 | } 444 | 445 | 60% { 446 | opacity: 1; 447 | transform: translate3d(0, -20px, 0); 448 | } 449 | 450 | 75% { 451 | transform: translate3d(0, 10px, 0); 452 | } 453 | 454 | 90% { 455 | transform: translate3d(0, -5px, 0); 456 | } 457 | 458 | to { 459 | transform: translate3d(0, 0, 0); 460 | } 461 | } 462 | 463 | .bounceInUp { 464 | animation-name: bounceInUp; 465 | } 466 | 467 | @keyframes bounceOut { 468 | 20% { 469 | transform: scale3d(.9, .9, .9); 470 | } 471 | 472 | 50%, 55% { 473 | opacity: 1; 474 | transform: scale3d(1.1, 1.1, 1.1); 475 | } 476 | 477 | to { 478 | opacity: 0; 479 | transform: scale3d(.3, .3, .3); 480 | } 481 | } 482 | 483 | .bounceOut { 484 | animation-name: bounceOut; 485 | } 486 | 487 | @keyframes bounceOutDown { 488 | 20% { 489 | transform: translate3d(0, 10px, 0); 490 | } 491 | 492 | 40%, 45% { 493 | opacity: 1; 494 | transform: translate3d(0, -20px, 0); 495 | } 496 | 497 | to { 498 | opacity: 0; 499 | transform: translate3d(0, 2000px, 0); 500 | } 501 | } 502 | 503 | .bounceOutDown { 504 | animation-name: bounceOutDown; 505 | } 506 | 507 | @keyframes bounceOutLeft { 508 | 20% { 509 | opacity: 1; 510 | transform: translate3d(20px, 0, 0); 511 | } 512 | 513 | to { 514 | opacity: 0; 515 | transform: translate3d(-2000px, 0, 0); 516 | } 517 | } 518 | 519 | .bounceOutLeft { 520 | animation-name: bounceOutLeft; 521 | } 522 | 523 | @keyframes bounceOutRight { 524 | 20% { 525 | opacity: 1; 526 | transform: translate3d(-20px, 0, 0); 527 | } 528 | 529 | to { 530 | opacity: 0; 531 | transform: translate3d(2000px, 0, 0); 532 | } 533 | } 534 | 535 | .bounceOutRight { 536 | animation-name: bounceOutRight; 537 | } 538 | 539 | @keyframes bounceOutUp { 540 | 20% { 541 | transform: translate3d(0, -10px, 0); 542 | } 543 | 544 | 40%, 45% { 545 | opacity: 1; 546 | transform: translate3d(0, 20px, 0); 547 | } 548 | 549 | to { 550 | opacity: 0; 551 | transform: translate3d(0, -2000px, 0); 552 | } 553 | } 554 | 555 | .bounceOutUp { 556 | animation-name: bounceOutUp; 557 | } 558 | 559 | @keyframes fadeIn { 560 | from { 561 | opacity: 0; 562 | } 563 | 564 | to { 565 | opacity: 1; 566 | } 567 | } 568 | 569 | .fadeIn { 570 | animation-name: fadeIn; 571 | } 572 | 573 | @keyframes fadeInDown { 574 | from { 575 | opacity: 0; 576 | transform: translate3d(0, -100%, 0); 577 | } 578 | 579 | to { 580 | opacity: 1; 581 | transform: none; 582 | } 583 | } 584 | 585 | .fadeInDown { 586 | animation-name: fadeInDown; 587 | } 588 | 589 | @keyframes fadeInDownBig { 590 | from { 591 | opacity: 0; 592 | transform: translate3d(0, -2000px, 0); 593 | } 594 | 595 | to { 596 | opacity: 1; 597 | transform: none; 598 | } 599 | } 600 | 601 | .fadeInDownBig { 602 | animation-name: fadeInDownBig; 603 | } 604 | 605 | @keyframes fadeInLeft { 606 | from { 607 | opacity: 0; 608 | transform: translate3d(-100%, 0, 0); 609 | } 610 | 611 | to { 612 | opacity: 1; 613 | transform: none; 614 | } 615 | } 616 | 617 | .fadeInLeft { 618 | animation-name: fadeInLeft; 619 | } 620 | 621 | @keyframes fadeInLeftBig { 622 | from { 623 | opacity: 0; 624 | transform: translate3d(-2000px, 0, 0); 625 | } 626 | 627 | to { 628 | opacity: 1; 629 | transform: none; 630 | } 631 | } 632 | 633 | .fadeInLeftBig { 634 | animation-name: fadeInLeftBig; 635 | } 636 | 637 | @keyframes fadeInRight { 638 | from { 639 | opacity: 0; 640 | transform: translate3d(100%, 0, 0); 641 | } 642 | 643 | to { 644 | opacity: 1; 645 | transform: none; 646 | } 647 | } 648 | 649 | .fadeInRight { 650 | animation-name: fadeInRight; 651 | } 652 | 653 | @keyframes fadeInRightBig { 654 | from { 655 | opacity: 0; 656 | transform: translate3d(2000px, 0, 0); 657 | } 658 | 659 | to { 660 | opacity: 1; 661 | transform: none; 662 | } 663 | } 664 | 665 | .fadeInRightBig { 666 | animation-name: fadeInRightBig; 667 | } 668 | 669 | @keyframes fadeInUp { 670 | from { 671 | opacity: 0; 672 | transform: translate3d(0, 100%, 0); 673 | } 674 | 675 | to { 676 | opacity: 1; 677 | transform: none; 678 | } 679 | } 680 | 681 | .fadeInUp { 682 | animation-name: fadeInUp; 683 | } 684 | 685 | @keyframes fadeInUpBig { 686 | from { 687 | opacity: 0; 688 | transform: translate3d(0, 2000px, 0); 689 | } 690 | 691 | to { 692 | opacity: 1; 693 | transform: none; 694 | } 695 | } 696 | 697 | .fadeInUpBig { 698 | animation-name: fadeInUpBig; 699 | } 700 | 701 | @keyframes fadeOut { 702 | from { 703 | opacity: 1; 704 | } 705 | 706 | to { 707 | opacity: 0; 708 | } 709 | } 710 | 711 | .fadeOut { 712 | animation-name: fadeOut; 713 | } 714 | 715 | @keyframes fadeOutDown { 716 | from { 717 | opacity: 1; 718 | } 719 | 720 | to { 721 | opacity: 0; 722 | transform: translate3d(0, 100%, 0); 723 | } 724 | } 725 | 726 | .fadeOutDown { 727 | animation-name: fadeOutDown; 728 | } 729 | 730 | @keyframes fadeOutDownBig { 731 | from { 732 | opacity: 1; 733 | } 734 | 735 | to { 736 | opacity: 0; 737 | transform: translate3d(0, 2000px, 0); 738 | } 739 | } 740 | 741 | .fadeOutDownBig { 742 | animation-name: fadeOutDownBig; 743 | } 744 | 745 | @keyframes fadeOutLeft { 746 | from { 747 | opacity: 1; 748 | } 749 | 750 | to { 751 | opacity: 0; 752 | transform: translate3d(-100%, 0, 0); 753 | } 754 | } 755 | 756 | .fadeOutLeft { 757 | animation-name: fadeOutLeft; 758 | } 759 | 760 | @keyframes fadeOutLeftBig { 761 | from { 762 | opacity: 1; 763 | } 764 | 765 | to { 766 | opacity: 0; 767 | transform: translate3d(-2000px, 0, 0); 768 | } 769 | } 770 | 771 | .fadeOutLeftBig { 772 | animation-name: fadeOutLeftBig; 773 | } 774 | 775 | @keyframes fadeOutRight { 776 | from { 777 | opacity: 1; 778 | } 779 | 780 | to { 781 | opacity: 0; 782 | transform: translate3d(100%, 0, 0); 783 | } 784 | } 785 | 786 | .fadeOutRight { 787 | animation-name: fadeOutRight; 788 | } 789 | 790 | @keyframes fadeOutRightBig { 791 | from { 792 | opacity: 1; 793 | } 794 | 795 | to { 796 | opacity: 0; 797 | transform: translate3d(2000px, 0, 0); 798 | } 799 | } 800 | 801 | .fadeOutRightBig { 802 | animation-name: fadeOutRightBig; 803 | } 804 | 805 | @keyframes fadeOutUp { 806 | from { 807 | opacity: 1; 808 | } 809 | 810 | to { 811 | opacity: 0; 812 | transform: translate3d(0, -100%, 0); 813 | } 814 | } 815 | 816 | .fadeOutUp { 817 | animation-name: fadeOutUp; 818 | } 819 | 820 | @keyframes fadeOutUpBig { 821 | from { 822 | opacity: 1; 823 | } 824 | 825 | to { 826 | opacity: 0; 827 | transform: translate3d(0, -2000px, 0); 828 | } 829 | } 830 | 831 | .fadeOutUpBig { 832 | animation-name: fadeOutUpBig; 833 | } 834 | 835 | @keyframes flip { 836 | from { 837 | transform: perspective(400px) rotate3d(0, 1, 0, -360deg); 838 | animation-timing-function: ease-out; 839 | } 840 | 841 | 40% { 842 | transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); 843 | animation-timing-function: ease-out; 844 | } 845 | 846 | 50% { 847 | transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); 848 | animation-timing-function: ease-in; 849 | } 850 | 851 | 80% { 852 | transform: perspective(400px) scale3d(.95, .95, .95); 853 | animation-timing-function: ease-in; 854 | } 855 | 856 | to { 857 | transform: perspective(400px); 858 | animation-timing-function: ease-in; 859 | } 860 | } 861 | 862 | .animated.flip { 863 | -webkit-backface-visibility: visible; 864 | backface-visibility: visible; 865 | animation-name: flip; 866 | } 867 | 868 | @keyframes flipInX { 869 | from { 870 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 871 | animation-timing-function: ease-in; 872 | opacity: 0; 873 | } 874 | 875 | 40% { 876 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 877 | animation-timing-function: ease-in; 878 | } 879 | 880 | 60% { 881 | transform: perspective(400px) rotate3d(1, 0, 0, 10deg); 882 | opacity: 1; 883 | } 884 | 885 | 80% { 886 | transform: perspective(400px) rotate3d(1, 0, 0, -5deg); 887 | } 888 | 889 | to { 890 | transform: perspective(400px); 891 | } 892 | } 893 | 894 | .flipInX { 895 | -webkit-backface-visibility: visible !important; 896 | backface-visibility: visible !important; 897 | animation-name: flipInX; 898 | } 899 | 900 | @keyframes flipInY { 901 | from { 902 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 903 | animation-timing-function: ease-in; 904 | opacity: 0; 905 | } 906 | 907 | 40% { 908 | transform: perspective(400px) rotate3d(0, 1, 0, -20deg); 909 | animation-timing-function: ease-in; 910 | } 911 | 912 | 60% { 913 | transform: perspective(400px) rotate3d(0, 1, 0, 10deg); 914 | opacity: 1; 915 | } 916 | 917 | 80% { 918 | transform: perspective(400px) rotate3d(0, 1, 0, -5deg); 919 | } 920 | 921 | to { 922 | transform: perspective(400px); 923 | } 924 | } 925 | 926 | .flipInY { 927 | -webkit-backface-visibility: visible !important; 928 | backface-visibility: visible !important; 929 | animation-name: flipInY; 930 | } 931 | 932 | @keyframes flipOutX { 933 | from { 934 | transform: perspective(400px); 935 | } 936 | 937 | 30% { 938 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 939 | opacity: 1; 940 | } 941 | 942 | to { 943 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 944 | opacity: 0; 945 | } 946 | } 947 | 948 | .flipOutX { 949 | animation-name: flipOutX; 950 | -webkit-backface-visibility: visible !important; 951 | backface-visibility: visible !important; 952 | } 953 | 954 | @keyframes flipOutY { 955 | from { 956 | transform: perspective(400px); 957 | } 958 | 959 | 30% { 960 | transform: perspective(400px) rotate3d(0, 1, 0, -15deg); 961 | opacity: 1; 962 | } 963 | 964 | to { 965 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 966 | opacity: 0; 967 | } 968 | } 969 | 970 | .flipOutY { 971 | -webkit-backface-visibility: visible !important; 972 | backface-visibility: visible !important; 973 | animation-name: flipOutY; 974 | } 975 | 976 | @keyframes lightSpeedIn { 977 | from { 978 | transform: translate3d(100%, 0, 0) skewX(-30deg); 979 | opacity: 0; 980 | } 981 | 982 | 60% { 983 | transform: skewX(20deg); 984 | opacity: 1; 985 | } 986 | 987 | 80% { 988 | transform: skewX(-5deg); 989 | opacity: 1; 990 | } 991 | 992 | to { 993 | transform: none; 994 | opacity: 1; 995 | } 996 | } 997 | 998 | .lightSpeedIn { 999 | animation-name: lightSpeedIn; 1000 | animation-timing-function: ease-out; 1001 | } 1002 | 1003 | @keyframes lightSpeedOut { 1004 | from { 1005 | opacity: 1; 1006 | } 1007 | 1008 | to { 1009 | transform: translate3d(100%, 0, 0) skewX(30deg); 1010 | opacity: 0; 1011 | } 1012 | } 1013 | 1014 | .lightSpeedOut { 1015 | animation-name: lightSpeedOut; 1016 | animation-timing-function: ease-in; 1017 | } 1018 | 1019 | @keyframes rotateIn { 1020 | from { 1021 | transform-origin: center; 1022 | transform: rotate3d(0, 0, 1, -200deg); 1023 | opacity: 0; 1024 | } 1025 | 1026 | to { 1027 | transform-origin: center; 1028 | transform: none; 1029 | opacity: 1; 1030 | } 1031 | } 1032 | 1033 | .rotateIn { 1034 | animation-name: rotateIn; 1035 | } 1036 | 1037 | @keyframes rotateInDownLeft { 1038 | from { 1039 | transform-origin: left bottom; 1040 | transform: rotate3d(0, 0, 1, -45deg); 1041 | opacity: 0; 1042 | } 1043 | 1044 | to { 1045 | transform-origin: left bottom; 1046 | transform: none; 1047 | opacity: 1; 1048 | } 1049 | } 1050 | 1051 | .rotateInDownLeft { 1052 | animation-name: rotateInDownLeft; 1053 | } 1054 | 1055 | @keyframes rotateInDownRight { 1056 | from { 1057 | transform-origin: right bottom; 1058 | transform: rotate3d(0, 0, 1, 45deg); 1059 | opacity: 0; 1060 | } 1061 | 1062 | to { 1063 | transform-origin: right bottom; 1064 | transform: none; 1065 | opacity: 1; 1066 | } 1067 | } 1068 | 1069 | .rotateInDownRight { 1070 | animation-name: rotateInDownRight; 1071 | } 1072 | 1073 | @keyframes rotateInUpLeft { 1074 | from { 1075 | transform-origin: left bottom; 1076 | transform: rotate3d(0, 0, 1, 45deg); 1077 | opacity: 0; 1078 | } 1079 | 1080 | to { 1081 | transform-origin: left bottom; 1082 | transform: none; 1083 | opacity: 1; 1084 | } 1085 | } 1086 | 1087 | .rotateInUpLeft { 1088 | animation-name: rotateInUpLeft; 1089 | } 1090 | 1091 | @keyframes rotateInUpRight { 1092 | from { 1093 | transform-origin: right bottom; 1094 | transform: rotate3d(0, 0, 1, -90deg); 1095 | opacity: 0; 1096 | } 1097 | 1098 | to { 1099 | transform-origin: right bottom; 1100 | transform: none; 1101 | opacity: 1; 1102 | } 1103 | } 1104 | 1105 | .rotateInUpRight { 1106 | animation-name: rotateInUpRight; 1107 | } 1108 | 1109 | @keyframes rotateOut { 1110 | from { 1111 | transform-origin: center; 1112 | opacity: 1; 1113 | } 1114 | 1115 | to { 1116 | transform-origin: center; 1117 | transform: rotate3d(0, 0, 1, 200deg); 1118 | opacity: 0; 1119 | } 1120 | } 1121 | 1122 | .rotateOut { 1123 | animation-name: rotateOut; 1124 | } 1125 | 1126 | @keyframes rotateOutDownLeft { 1127 | from { 1128 | transform-origin: left bottom; 1129 | opacity: 1; 1130 | } 1131 | 1132 | to { 1133 | transform-origin: left bottom; 1134 | transform: rotate3d(0, 0, 1, 45deg); 1135 | opacity: 0; 1136 | } 1137 | } 1138 | 1139 | .rotateOutDownLeft { 1140 | animation-name: rotateOutDownLeft; 1141 | } 1142 | 1143 | @keyframes rotateOutDownRight { 1144 | from { 1145 | transform-origin: right bottom; 1146 | opacity: 1; 1147 | } 1148 | 1149 | to { 1150 | transform-origin: right bottom; 1151 | transform: rotate3d(0, 0, 1, -45deg); 1152 | opacity: 0; 1153 | } 1154 | } 1155 | 1156 | .rotateOutDownRight { 1157 | animation-name: rotateOutDownRight; 1158 | } 1159 | 1160 | @keyframes rotateOutUpLeft { 1161 | from { 1162 | transform-origin: left bottom; 1163 | opacity: 1; 1164 | } 1165 | 1166 | to { 1167 | transform-origin: left bottom; 1168 | transform: rotate3d(0, 0, 1, -45deg); 1169 | opacity: 0; 1170 | } 1171 | } 1172 | 1173 | .rotateOutUpLeft { 1174 | animation-name: rotateOutUpLeft; 1175 | } 1176 | 1177 | @keyframes rotateOutUpRight { 1178 | from { 1179 | transform-origin: right bottom; 1180 | opacity: 1; 1181 | } 1182 | 1183 | to { 1184 | transform-origin: right bottom; 1185 | transform: rotate3d(0, 0, 1, 90deg); 1186 | opacity: 0; 1187 | } 1188 | } 1189 | 1190 | .rotateOutUpRight { 1191 | animation-name: rotateOutUpRight; 1192 | } 1193 | 1194 | @keyframes hinge { 1195 | 0% { 1196 | transform-origin: top left; 1197 | animation-timing-function: ease-in-out; 1198 | } 1199 | 1200 | 20%, 60% { 1201 | transform: rotate3d(0, 0, 1, 80deg); 1202 | transform-origin: top left; 1203 | animation-timing-function: ease-in-out; 1204 | } 1205 | 1206 | 40%, 80% { 1207 | transform: rotate3d(0, 0, 1, 60deg); 1208 | transform-origin: top left; 1209 | animation-timing-function: ease-in-out; 1210 | opacity: 1; 1211 | } 1212 | 1213 | to { 1214 | transform: translate3d(0, 700px, 0); 1215 | opacity: 0; 1216 | } 1217 | } 1218 | 1219 | .hinge { 1220 | animation-name: hinge; 1221 | } 1222 | 1223 | @keyframes jackInTheBox { 1224 | from { 1225 | opacity: 0; 1226 | transform: scale(0.1) rotate(30deg); 1227 | transform-origin: center bottom; 1228 | } 1229 | 1230 | 50% { 1231 | transform: rotate(-10deg); 1232 | } 1233 | 1234 | 70% { 1235 | transform: rotate(3deg); 1236 | } 1237 | 1238 | to { 1239 | opacity: 1; 1240 | transform: scale(1); 1241 | } 1242 | } 1243 | 1244 | .jackInTheBox { 1245 | animation-name: jackInTheBox; 1246 | } 1247 | 1248 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 1249 | 1250 | @keyframes rollIn { 1251 | from { 1252 | opacity: 0; 1253 | transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); 1254 | } 1255 | 1256 | to { 1257 | opacity: 1; 1258 | transform: none; 1259 | } 1260 | } 1261 | 1262 | .rollIn { 1263 | animation-name: rollIn; 1264 | } 1265 | 1266 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 1267 | 1268 | @keyframes rollOut { 1269 | from { 1270 | opacity: 1; 1271 | } 1272 | 1273 | to { 1274 | opacity: 0; 1275 | transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); 1276 | } 1277 | } 1278 | 1279 | .rollOut { 1280 | animation-name: rollOut; 1281 | } 1282 | 1283 | @keyframes zoomIn { 1284 | from { 1285 | opacity: 0; 1286 | transform: scale3d(.3, .3, .3); 1287 | } 1288 | 1289 | 50% { 1290 | opacity: 1; 1291 | } 1292 | } 1293 | 1294 | .zoomIn { 1295 | animation-name: zoomIn; 1296 | } 1297 | 1298 | @keyframes zoomInDown { 1299 | from { 1300 | opacity: 0; 1301 | transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); 1302 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 1303 | } 1304 | 1305 | 60% { 1306 | opacity: 1; 1307 | transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 1308 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 1309 | } 1310 | } 1311 | 1312 | .zoomInDown { 1313 | animation-name: zoomInDown; 1314 | } 1315 | 1316 | @keyframes zoomInLeft { 1317 | from { 1318 | opacity: 0; 1319 | transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); 1320 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 1321 | } 1322 | 1323 | 60% { 1324 | opacity: 1; 1325 | transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); 1326 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 1327 | } 1328 | } 1329 | 1330 | .zoomInLeft { 1331 | animation-name: zoomInLeft; 1332 | } 1333 | 1334 | @keyframes zoomInRight { 1335 | from { 1336 | opacity: 0; 1337 | transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); 1338 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 1339 | } 1340 | 1341 | 60% { 1342 | opacity: 1; 1343 | transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); 1344 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 1345 | } 1346 | } 1347 | 1348 | .zoomInRight { 1349 | animation-name: zoomInRight; 1350 | } 1351 | 1352 | @keyframes zoomInUp { 1353 | from { 1354 | opacity: 0; 1355 | transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); 1356 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 1357 | } 1358 | 1359 | 60% { 1360 | opacity: 1; 1361 | transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 1362 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 1363 | } 1364 | } 1365 | 1366 | .zoomInUp { 1367 | animation-name: zoomInUp; 1368 | } 1369 | 1370 | @keyframes zoomOut { 1371 | from { 1372 | opacity: 1; 1373 | } 1374 | 1375 | 50% { 1376 | opacity: 0; 1377 | transform: scale3d(.3, .3, .3); 1378 | } 1379 | 1380 | to { 1381 | opacity: 0; 1382 | } 1383 | } 1384 | 1385 | .zoomOut { 1386 | animation-name: zoomOut; 1387 | } 1388 | 1389 | @keyframes zoomOutDown { 1390 | 40% { 1391 | opacity: 1; 1392 | transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 1393 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 1394 | } 1395 | 1396 | to { 1397 | opacity: 0; 1398 | transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); 1399 | transform-origin: center bottom; 1400 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 1401 | } 1402 | } 1403 | 1404 | .zoomOutDown { 1405 | animation-name: zoomOutDown; 1406 | } 1407 | 1408 | @keyframes zoomOutLeft { 1409 | 40% { 1410 | opacity: 1; 1411 | transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); 1412 | } 1413 | 1414 | to { 1415 | opacity: 0; 1416 | transform: scale(.1) translate3d(-2000px, 0, 0); 1417 | transform-origin: left center; 1418 | } 1419 | } 1420 | 1421 | .zoomOutLeft { 1422 | animation-name: zoomOutLeft; 1423 | } 1424 | 1425 | @keyframes zoomOutRight { 1426 | 40% { 1427 | opacity: 1; 1428 | transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); 1429 | } 1430 | 1431 | to { 1432 | opacity: 0; 1433 | transform: scale(.1) translate3d(2000px, 0, 0); 1434 | transform-origin: right center; 1435 | } 1436 | } 1437 | 1438 | .zoomOutRight { 1439 | animation-name: zoomOutRight; 1440 | } 1441 | 1442 | @keyframes zoomOutUp { 1443 | 40% { 1444 | opacity: 1; 1445 | transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 1446 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 1447 | } 1448 | 1449 | to { 1450 | opacity: 0; 1451 | transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); 1452 | transform-origin: center bottom; 1453 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 1454 | } 1455 | } 1456 | 1457 | .zoomOutUp { 1458 | animation-name: zoomOutUp; 1459 | } 1460 | 1461 | @keyframes slideInDown { 1462 | from { 1463 | transform: translate3d(0, -100%, 0); 1464 | visibility: visible; 1465 | } 1466 | 1467 | to { 1468 | transform: translate3d(0, 0, 0); 1469 | } 1470 | } 1471 | 1472 | .slideInDown { 1473 | animation-name: slideInDown; 1474 | } 1475 | 1476 | @keyframes slideInLeft { 1477 | from { 1478 | transform: translate3d(-100%, 0, 0); 1479 | visibility: visible; 1480 | } 1481 | 1482 | to { 1483 | transform: translate3d(0, 0, 0); 1484 | } 1485 | } 1486 | 1487 | .slideInLeft { 1488 | animation-name: slideInLeft; 1489 | } 1490 | 1491 | @keyframes slideInRight { 1492 | from { 1493 | transform: translate3d(100%, 0, 0); 1494 | visibility: visible; 1495 | } 1496 | 1497 | to { 1498 | transform: translate3d(0, 0, 0); 1499 | } 1500 | } 1501 | 1502 | .slideInRight { 1503 | animation-name: slideInRight; 1504 | } 1505 | 1506 | @keyframes slideInUp { 1507 | from { 1508 | transform: translate3d(0, 100%, 0); 1509 | visibility: visible; 1510 | } 1511 | 1512 | to { 1513 | transform: translate3d(0, 0, 0); 1514 | } 1515 | } 1516 | 1517 | .slideInUp { 1518 | animation-name: slideInUp; 1519 | } 1520 | 1521 | @keyframes slideOutDown { 1522 | from { 1523 | transform: translate3d(0, 0, 0); 1524 | } 1525 | 1526 | to { 1527 | visibility: hidden; 1528 | transform: translate3d(0, 100%, 0); 1529 | } 1530 | } 1531 | 1532 | .slideOutDown { 1533 | animation-name: slideOutDown; 1534 | } 1535 | 1536 | @keyframes slideOutLeft { 1537 | from { 1538 | transform: translate3d(0, 0, 0); 1539 | } 1540 | 1541 | to { 1542 | visibility: hidden; 1543 | transform: translate3d(-100%, 0, 0); 1544 | } 1545 | } 1546 | 1547 | .slideOutLeft { 1548 | animation-name: slideOutLeft; 1549 | } 1550 | 1551 | @keyframes slideOutRight { 1552 | from { 1553 | transform: translate3d(0, 0, 0); 1554 | } 1555 | 1556 | to { 1557 | visibility: hidden; 1558 | transform: translate3d(100%, 0, 0); 1559 | } 1560 | } 1561 | 1562 | .slideOutRight { 1563 | animation-name: slideOutRight; 1564 | } 1565 | 1566 | @keyframes slideOutUp { 1567 | from { 1568 | transform: translate3d(0, 0, 0); 1569 | } 1570 | 1571 | to { 1572 | visibility: hidden; 1573 | transform: translate3d(0, -100%, 0); 1574 | } 1575 | } 1576 | 1577 | .slideOutUp { 1578 | animation-name: slideOutUp; 1579 | } 1580 | -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Recklesslmz/vue-sf/90210b120eb4c68a3e67c39ece9cbdba71e03850/src/assets/logo.png -------------------------------------------------------------------------------- /src/assets/sass/common.scss: -------------------------------------------------------------------------------- 1 | $commonColor:#159963; 2 | $commonGrey:#aaa; 3 | .clearBoth{ 4 | clear: both; 5 | } 6 | .content-state{ 7 | margin-top: 3rem; 8 | } 9 | -------------------------------------------------------------------------------- /src/common/js/common.js: -------------------------------------------------------------------------------- 1 | const name = 'lmz' 2 | 3 | 4 | export default { 5 | name 6 | } -------------------------------------------------------------------------------- /src/components/header.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 27 | 28 | 55 | -------------------------------------------------------------------------------- /src/components/label.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 21 | 81 | -------------------------------------------------------------------------------- /src/components/list.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 43 | 103 | -------------------------------------------------------------------------------- /src/components/messageHeader.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 48 | 111 | -------------------------------------------------------------------------------- /src/components/nav.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 45 | 77 | -------------------------------------------------------------------------------- /src/components/notice.vue: -------------------------------------------------------------------------------- 1 | 43 | 44 | 65 | 203 | -------------------------------------------------------------------------------- /src/components/search.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 21 | 52 | -------------------------------------------------------------------------------- /src/components/tab.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 65 | 102 | -------------------------------------------------------------------------------- /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 | import router from './router' 6 | import vuex from 'vuex' 7 | import axios from 'axios' 8 | import common from './common/js/common' 9 | import store from './store/index' 10 | import 'highlight.js/styles/googlecode.css' 11 | import './assets/css/animate.css' 12 | 13 | import MintUI from 'mint-ui' 14 | import 'mint-ui/lib/style.css' 15 | 16 | Vue.use(MintUI) 17 | Vue.prototype.commonUrl = common 18 | Vue.prototype.$http = axios 19 | 20 | Vue.config.productionTip = false 21 | 22 | /* eslint-disable no-new */ 23 | new Vue({ 24 | el: '#app', 25 | store, 26 | router, 27 | template: '', 28 | components: {App} 29 | }) 30 | -------------------------------------------------------------------------------- /src/page/article.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 30 | 43 | -------------------------------------------------------------------------------- /src/page/attention.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 31 | 46 | -------------------------------------------------------------------------------- /src/page/collection.vue: -------------------------------------------------------------------------------- 1 | 16 | 46 | 76 | -------------------------------------------------------------------------------- /src/page/latestNews.vue: -------------------------------------------------------------------------------- 1 | 23 | 50 | 123 | -------------------------------------------------------------------------------- /src/page/login.vue: -------------------------------------------------------------------------------- 1 | 38 | 39 | 78 | 79 | 169 | -------------------------------------------------------------------------------- /src/page/main.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 31 | 42 | -------------------------------------------------------------------------------- /src/page/message.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 37 | 43 | -------------------------------------------------------------------------------- /src/page/my.vue: -------------------------------------------------------------------------------- 1 | 45 | 46 | 92 | 93 | 178 | -------------------------------------------------------------------------------- /src/page/myInfo.vue: -------------------------------------------------------------------------------- 1 | 128 | 129 | 258 | 564 | -------------------------------------------------------------------------------- /src/page/myLecture.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 46 | 69 | -------------------------------------------------------------------------------- /src/page/privateLetter.vue: -------------------------------------------------------------------------------- 1 | 18 | 50 | 98 | -------------------------------------------------------------------------------- /src/page/register.vue: -------------------------------------------------------------------------------- 1 | 28 | 61 | 62 | 116 | -------------------------------------------------------------------------------- /src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | 4 | 5 | const Login = () => import('../page/Login.vue') 6 | const Main = () => import('../page/Main.vue') 7 | const My = () => import('../page/My.vue') 8 | const myInfo = () => import('../page/myInfo.vue') 9 | const article = () => import('../page/article.vue') 10 | const message = () => import('../page/message.vue') 11 | const collection = () => import('../page/collection.vue') 12 | const lecture = () => import('../page/myLecture.vue') 13 | const latestNews = () => import('../page/latestNews.vue') 14 | const Register = () => import('../page/Register.vue') 15 | const privateLetter = () => import('../page/privateLetter.vue') 16 | const attention = () => import('../page/attention.vue') 17 | 18 | Vue.use(Router) 19 | 20 | const router = new Router({ 21 | routes: [ 22 | { 23 | path: '/', 24 | name: 'Login', 25 | component: Login, 26 | }, 27 | { 28 | path: '/Register', 29 | name: 'Register', 30 | component: Register, 31 | }, 32 | { 33 | path: '/Main', 34 | name: 'Main', 35 | component: Main, 36 | }, 37 | { 38 | path: '/My', 39 | name: 'My', 40 | component: My, 41 | }, 42 | { 43 | path: '/myInfo', 44 | name: 'myInfo', 45 | component: myInfo, 46 | }, 47 | { 48 | path: '/article', 49 | name: 'article', 50 | component: article, 51 | beforeEnter: (to, from, next) => { 52 | document.getElementsByTagName('body')[0].style.background = '#fff' 53 | next() 54 | } 55 | }, 56 | { 57 | path: '/message', 58 | name: 'message', 59 | component: message, 60 | beforeEnter: (to, from, next) => { 61 | document.getElementsByTagName('body')[0].style.background = '#fff' 62 | next() 63 | } 64 | }, 65 | { 66 | path: '/collection', 67 | name: 'collection', 68 | component: collection, 69 | }, 70 | { 71 | path: '/lecture', 72 | name: 'lecture', 73 | component: lecture, 74 | beforeEnter: (to, from, next) => { 75 | document.getElementsByTagName('body')[0].style.background = '#fff' 76 | next() 77 | } 78 | }, 79 | { 80 | path: '/latestNews', 81 | name: 'latestNews', 82 | component: latestNews, 83 | }, 84 | { 85 | path: '/privateLetter', 86 | name: 'privateLetter', 87 | component: privateLetter, 88 | }, 89 | { 90 | path: '/attention', 91 | name: 'attention', 92 | component: attention, 93 | } 94 | 95 | ] 96 | }) 97 | 98 | router.beforeEach((to, from, next) => { 99 | document.getElementsByTagName('body')[0].style.background = '#f2f2f2' 100 | next() 101 | }) 102 | export default router 103 | 104 | 105 | -------------------------------------------------------------------------------- /src/store/actions.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by limuzi on 2017/6/20. 3 | */ 4 | import * as types from './sf-type' 5 | import axios from 'axios' 6 | const actions = { 7 | [types.MENU_TAB_LIST]({commit}){ 8 | axios.get('/api/tab') 9 | .then(function (response) { 10 | commit(types.MENU_TAB_LIST, response.data.data) 11 | }) 12 | .catch(function (error) { 13 | console.log(error); 14 | }); 15 | }, 16 | [types.NAV_TAB_LIST]({commit}){ 17 | axios.get('/api/nav') 18 | .then(function (response) { 19 | commit(types.NAV_TAB_LIST, response.data.data) 20 | }) 21 | .catch(function (error) { 22 | console.log(error); 23 | }); 24 | }, 25 | [types.GET_ARTICLE_LIST]({commit}){ 26 | axios.get('/api/article') 27 | .then(function (response) { 28 | commit(types.GET_ARTICLE_LIST, response.data.data) 29 | }) 30 | .catch(function (error) { 31 | console.log(error); 32 | }); 33 | }, 34 | [types.GET_LABEL_LIST]({commit}){ 35 | axios.get('/api/labelList') 36 | .then(function (response) { 37 | commit(types.GET_LABEL_LIST, response.data.data) 38 | }) 39 | .catch(function (error) { 40 | console.log(error); 41 | }); 42 | }, 43 | [types.GET_MESSAGE_LIST]({commit}){ 44 | axios.get('/api/message') 45 | .then(function (response) { 46 | console.log(response.data.data); 47 | commit(types.GET_MESSAGE_LIST, response.data.data) 48 | }) 49 | .catch(function (error) { 50 | console.log(error); 51 | }); 52 | } 53 | } 54 | 55 | export default actions 56 | -------------------------------------------------------------------------------- /src/store/getters.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by limuzi on 2017/6/20. 3 | */ 4 | const getters = { 5 | 6 | } 7 | 8 | export default getters 9 | -------------------------------------------------------------------------------- /src/store/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by limuzi on 2017/6/20. 3 | */ 4 | import Vue from 'vue' 5 | import Vuex from 'vuex' 6 | import state from './state' 7 | import mutations from './mutations' 8 | import actions from './actions' 9 | import getters from './getters' 10 | 11 | 12 | Vue.use(Vuex) 13 | 14 | 15 | 16 | export default new Vuex.Store({ 17 | mutations, 18 | actions, 19 | getters, 20 | state 21 | }) 22 | -------------------------------------------------------------------------------- /src/store/mutations.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by limuzi on 2017/6/20. 3 | */ 4 | import * as types from './sf-type' 5 | const mutations = { 6 | [types.MENU_TAB_LIST](state, info){ 7 | state.menuList = info 8 | }, 9 | [types.NAV_TAB_LIST](state, info){ 10 | state.navList = info 11 | }, 12 | [types.GET_ARTICLE_LIST](state, info){ 13 | state.articleList = info 14 | }, 15 | [types.GET_LABEL_LIST](state, info){ 16 | state.labelList = info 17 | }, 18 | [types.GET_MESSAGE_LIST](state, info){ 19 | state.messageList = info 20 | } 21 | 22 | } 23 | export default mutations 24 | -------------------------------------------------------------------------------- /src/store/sf-type.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by limuzi on 2017/6/20. 3 | */ 4 | export const MENU_TAB_LIST = 'MENU_TAB_LIST' //tab 5 | 6 | export const NAV_TAB_LIST = 'NAV_TAB_LIST'//nav 7 | 8 | export const GET_ARTICLE_LIST = 'GET_ARTICLE_LIST'//article 9 | 10 | export const GET_LABEL_LIST = 'GET_LABEL_LIST'//label 11 | 12 | export const GET_MESSAGE_LIST ='GET_MESSAGE_LIST'//message 13 | -------------------------------------------------------------------------------- /src/store/state.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by limuzi on 2017/6/20. 3 | */ 4 | const state = { 5 | menuList: {}, 6 | navList: {}, 7 | articleList: {}, 8 | labelList: {}, 9 | messageList:{} 10 | 11 | } 12 | export default state 13 | -------------------------------------------------------------------------------- /static/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Recklesslmz/vue-sf/90210b120eb4c68a3e67c39ece9cbdba71e03850/static/.gitkeep -------------------------------------------------------------------------------- /test/e2e/custom-assertions/elementCount.js: -------------------------------------------------------------------------------- 1 | // A custom Nightwatch assertion. 2 | // the name of the method is the filename. 3 | // can be used in tests like this: 4 | // 5 | // browser.assert.elementCount(selector, count) 6 | // 7 | // for how to write custom assertions see 8 | // http://nightwatchjs.org/guide#writing-custom-assertions 9 | exports.assertion = function (selector, count) { 10 | this.message = 'Testing if element <' + selector + '> has count: ' + count 11 | this.expected = count 12 | this.pass = function (val) { 13 | return val === this.expected 14 | } 15 | this.value = function (res) { 16 | return res.value 17 | } 18 | this.command = function (cb) { 19 | var self = this 20 | return this.api.execute(function (selector) { 21 | return document.querySelectorAll(selector).length 22 | }, [selector], function (res) { 23 | cb.call(self, res) 24 | }) 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /test/e2e/nightwatch.conf.js: -------------------------------------------------------------------------------- 1 | require('babel-register') 2 | var config = require('../../config') 3 | 4 | // http://nightwatchjs.org/gettingstarted#settings-file 5 | module.exports = { 6 | src_folders: ['test/e2e/specs'], 7 | output_folder: 'test/e2e/reports', 8 | custom_assertions_path: ['test/e2e/custom-assertions'], 9 | 10 | selenium: { 11 | start_process: true, 12 | server_path: require('selenium-server').path, 13 | host: '127.0.0.1', 14 | port: 4444, 15 | cli_args: { 16 | 'webdriver.chrome.driver': require('chromedriver').path 17 | } 18 | }, 19 | 20 | test_settings: { 21 | default: { 22 | selenium_port: 4444, 23 | selenium_host: 'localhost', 24 | silent: true, 25 | globals: { 26 | devServerURL: 'http://localhost:' + (process.env.PORT || config.dev.port) 27 | } 28 | }, 29 | 30 | chrome: { 31 | desiredCapabilities: { 32 | browserName: 'chrome', 33 | javascriptEnabled: true, 34 | acceptSslCerts: true 35 | } 36 | }, 37 | 38 | firefox: { 39 | desiredCapabilities: { 40 | browserName: 'firefox', 41 | javascriptEnabled: true, 42 | acceptSslCerts: true 43 | } 44 | } 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /test/e2e/runner.js: -------------------------------------------------------------------------------- 1 | // 1. start the dev server using production config 2 | process.env.NODE_ENV = 'testing' 3 | var server = require('../../build/dev-server.js') 4 | 5 | server.ready.then(() => { 6 | // 2. run the nightwatch test suite against it 7 | // to run in additional browsers: 8 | // 1. add an entry in test/e2e/nightwatch.conf.json under "test_settings" 9 | // 2. add it to the --env flag below 10 | // or override the environment flag, for example: `npm run e2e -- --env chrome,firefox` 11 | // For more information on Nightwatch's config file, see 12 | // http://nightwatchjs.org/guide#settings-file 13 | var opts = process.argv.slice(2) 14 | if (opts.indexOf('--config') === -1) { 15 | opts = opts.concat(['--config', 'test/e2e/nightwatch.conf.js']) 16 | } 17 | if (opts.indexOf('--env') === -1) { 18 | opts = opts.concat(['--env', 'chrome']) 19 | } 20 | 21 | var spawn = require('cross-spawn') 22 | var runner = spawn('./node_modules/.bin/nightwatch', opts, { stdio: 'inherit' }) 23 | 24 | runner.on('exit', function (code) { 25 | server.close() 26 | process.exit(code) 27 | }) 28 | 29 | runner.on('error', function (err) { 30 | server.close() 31 | throw err 32 | }) 33 | }) 34 | -------------------------------------------------------------------------------- /test/e2e/specs/test.js: -------------------------------------------------------------------------------- 1 | // For authoring Nightwatch tests, see 2 | // http://nightwatchjs.org/guide#usage 3 | 4 | module.exports = { 5 | 'default e2e tests': function (browser) { 6 | // automatically uses dev Server port from /config.index.js 7 | // default: http://localhost:8080 8 | // see nightwatch.conf.js 9 | const devServer = browser.globals.devServerURL 10 | 11 | browser 12 | .url(devServer) 13 | .waitForElementVisible('#app', 5000) 14 | .assert.elementPresent('.hello') 15 | .assert.containsText('h1', 'Welcome to Your Vue.js App') 16 | .assert.elementCount('img', 1) 17 | .end() 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /test/unit/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "mocha": true 4 | }, 5 | "globals": { 6 | "expect": true, 7 | "sinon": true 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /test/unit/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | 3 | Vue.config.productionTip = false 4 | 5 | // require all test files (files that ends with .spec.js) 6 | const testsContext = require.context('./specs', true, /\.spec$/) 7 | testsContext.keys().forEach(testsContext) 8 | 9 | // require all src files except main.js for coverage. 10 | // you can also change this to match only the subset of files that 11 | // you want coverage for. 12 | const srcContext = require.context('../../src', true, /^\.\/(?!main(\.js)?$)/) 13 | srcContext.keys().forEach(srcContext) 14 | -------------------------------------------------------------------------------- /test/unit/karma.conf.js: -------------------------------------------------------------------------------- 1 | // This is a karma config file. For more details see 2 | // http://karma-runner.github.io/0.13/config/configuration-file.html 3 | // we are also using it with karma-webpack 4 | // https://github.com/webpack/karma-webpack 5 | 6 | var webpackConfig = require('../../build/webpack.test.conf') 7 | 8 | module.exports = function (config) { 9 | config.set({ 10 | // to run in additional browsers: 11 | // 1. install corresponding karma launcher 12 | // http://karma-runner.github.io/0.13/config/browsers.html 13 | // 2. add it to the `browsers` array below. 14 | browsers: ['PhantomJS'], 15 | frameworks: ['mocha', 'sinon-chai', 'phantomjs-shim'], 16 | reporters: ['spec', 'coverage'], 17 | files: ['./index.js'], 18 | preprocessors: { 19 | './index.js': ['webpack', 'sourcemap'] 20 | }, 21 | webpack: webpackConfig, 22 | webpackMiddleware: { 23 | noInfo: true 24 | }, 25 | coverageReporter: { 26 | dir: './coverage', 27 | reporters: [ 28 | { type: 'lcov', subdir: '.' }, 29 | { type: 'text-summary' } 30 | ] 31 | } 32 | }) 33 | } 34 | -------------------------------------------------------------------------------- /test/unit/specs/Hello.spec.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Hello from '@/components/Hello' 3 | 4 | describe('Hello.vue', () => { 5 | it('should render correct contents', () => { 6 | const Constructor = Vue.extend(Hello) 7 | const vm = new Constructor().$mount() 8 | expect(vm.$el.querySelector('.hello h1').textContent) 9 | .to.equal('Welcome to Your Vue.js App') 10 | }) 11 | }) 12 | --------------------------------------------------------------------------------