├── .babelrc ├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── .idea ├── .name ├── dictionaries │ └── ganhuan.xml ├── encodings.xml ├── jsLibraryMappings.xml ├── libraries │ └── yii_template_node_modules.xml ├── misc.xml ├── modules.xml ├── vcs.xml ├── watcherTasks.xml ├── workspace.xml └── yii-template.iml ├── BUILD-TASK.MD ├── Linux-Git.txt ├── PATH-DESC.MD ├── README.md ├── build ├── build.js ├── dev-client.js ├── dev-server.js ├── utils.js ├── webpack.base.conf.js ├── webpack.dev.conf.js └── webpack.prod.conf.js ├── config ├── dev.env.js ├── index.js ├── prod.env.js └── test.env.js ├── docs ├── App.vue ├── d3 │ ├── D3Index.vue │ └── Selection.vue ├── i18n │ ├── README.MD │ ├── app.js │ └── locales.js ├── libs │ ├── syntaxhighlighter.css │ └── syntaxhighlighter.js └── main.js ├── index.html ├── package.json ├── src ├── assets │ ├── jquery-vendor.js │ └── logo.png ├── components │ ├── ByeBye.vue │ └── Hello.vue ├── framework │ └── README.md └── main.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 └── webpack.MD /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015", "stage-2"], 3 | "plugins": ["transform-runtime"], 4 | "comments": false 5 | } 6 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | build/*.js 2 | config/*.js 3 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | parserOptions: { 4 | sourceType: 'module' 5 | }, 6 | // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style 7 | extends: 'standard', 8 | // required to lint *.vue files 9 | plugins: [ 10 | 'html' 11 | ], 12 | // add your custom rules here 13 | 'rules': { 14 | // allow paren-less arrow functions 15 | 'arrow-parens': 0, 16 | // allow debugger during development 17 | 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log 5 | selenium-debug.log 6 | test/unit/coverage 7 | test/e2e/reports 8 | *.swp 9 | *.tmp 10 | *.un~ -------------------------------------------------------------------------------- /.idea/.name: -------------------------------------------------------------------------------- 1 | yii-template -------------------------------------------------------------------------------- /.idea/dictionaries/ganhuan.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /.idea/encodings.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /.idea/jsLibraryMappings.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /.idea/libraries/yii_template_node_modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /.idea/misc.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | CoffeeScript 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 40 | 41 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /.idea/vcs.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /.idea/watcherTasks.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /.idea/workspace.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 22 | 23 | 24 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 52 | 53 | 80 | 81 | 82 | 83 | true 84 | 85 | 86 | 87 | 88 | 89 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 124 | 125 | 126 | 127 | 130 | 131 | 134 | 135 | 136 | 137 | 140 | 141 | 144 | 145 | 148 | 149 | 150 | 151 | 154 | 155 | 158 | 159 | 162 | 163 | 166 | 167 | 168 | 169 | 172 | 173 | 176 | 177 | 180 | 181 | 184 | 185 | 186 | 187 | 190 | 191 | 194 | 195 | 198 | 199 | 202 | 203 | 204 | 205 | 208 | 209 | 212 | 213 | 216 | 217 | 218 | 219 | 222 | 223 | 226 | 227 | 230 | 231 | 232 | 233 | 236 | 237 | 240 | 241 | 244 | 245 | 248 | 249 | 250 | 251 | 254 | 255 | 258 | 259 | 262 | 263 | 266 | 267 | 268 | 269 | 272 | 273 | 276 | 277 | 280 | 281 | 282 | 283 | 286 | 287 | 290 | 291 | 294 | 295 | 296 | 297 | 298 | 299 | 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | 309 | 310 | 311 | 312 | 313 | 314 | 315 | 316 | 317 | 318 | 319 | 320 | 321 | 322 | 323 | 324 | 325 | 326 | 327 | 328 | 329 | 330 | 331 | 332 | 333 | 334 | 335 | 336 | 337 | 338 | 339 | 340 | 341 | 342 | 343 | 344 | 349 | 350 | 351 | 352 | 353 | 354 | true 355 | 356 | 357 | 358 | 359 | 360 | 361 | 362 | 363 | 1467884811822 364 | 367 | 368 | 369 | 370 | 371 | 372 | 373 | 374 | 375 | 376 | 377 | 378 | 379 | 380 | 381 | 382 | 383 | 384 | 385 | 386 | 387 | 388 | 389 | 390 | 391 | 392 | 393 | 395 | 396 | 397 | 398 | 399 | 400 | 401 | 402 | 403 | 404 | 405 | 406 | 407 | 408 | 409 | 410 | 411 | 412 | 413 | 414 | 415 | 416 | 417 | 418 | 419 | 420 | 421 | 422 | 423 | 424 | 425 | 426 | 427 | 428 | 429 | 430 | 431 | 432 | 433 | 434 | 435 | 436 | 437 | 438 | 439 | 440 | 441 | 442 | 443 | 444 | 445 | 446 | 447 | 448 | 449 | 450 | 451 | 452 | 453 | 454 | 455 | 456 | 457 | 458 | 459 | 460 | 461 | 462 | 463 | 464 | 465 | 466 | 467 | 468 | 469 | 470 | 471 | 472 | 473 | 474 | 475 | 476 | 477 | 478 | 479 | 480 | 481 | 482 | 483 | 484 | 485 | 486 | 487 | 488 | 489 | 490 | 491 | 492 | 493 | 494 | 495 | 496 | 497 | 498 | 499 | 500 | 501 | 502 | 503 | 504 | 505 | 506 | 507 | 508 | 509 | 510 | 511 | 512 | 513 | 514 | 515 | 516 | 517 | 518 | 519 | 520 | 521 | 522 | 523 | 524 | 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 | 560 | 561 | 562 | 563 | 564 | 565 | 566 | 567 | 568 | 569 | 570 | 571 | 572 | 573 | 574 | 575 | 576 | 577 | 578 | 579 | 580 | 581 | 582 | 583 | 584 | 585 | 586 | 587 | 588 | 589 | 590 | 591 | 592 | 593 | 594 | 595 | 596 | 597 | 598 | 599 | 600 | 601 | 602 | 603 | 604 | 605 | 606 | 607 | 608 | 609 | 610 | 611 | 612 | 613 | 614 | 615 | 616 | 617 | 618 | 619 | 620 | 621 | 622 | 623 | 624 | 625 | 626 | 627 | 628 | 629 | 630 | 631 | 632 | 633 | 634 | 635 | 636 | 637 | 638 | 639 | 640 | 641 | 642 | 643 | 644 | 645 | 646 | 647 | 648 | 649 | 650 | 651 | 652 | 653 | 654 | 655 | 656 | 657 | 658 | 659 | 660 | 661 | 662 | 663 | 664 | 665 | 666 | 667 | 668 | 669 | 670 | 671 | 672 | 673 | 674 | 675 | 676 | 677 | 678 | 679 | 680 | 681 | 682 | 683 | 684 | 685 | 686 | 687 | 688 | 689 | 690 | 691 | 692 | 693 | 694 | 695 | 696 | 697 | 698 | 699 | 700 | 701 | 702 | 703 | 704 | 705 | 706 | 707 | 708 | 709 | 710 | 711 | 712 | 713 | 714 | 715 | 716 | 717 | 718 | 719 | 720 | 721 | 722 | 723 | 724 | 725 | 726 | 727 | 728 | 729 | 730 | 731 | 732 | 733 | 734 | 735 | 736 | 737 | 738 | 739 | 740 | 741 | 742 | 743 | 744 | 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 | -------------------------------------------------------------------------------- /.idea/yii-template.iml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /BUILD-TASK.MD: -------------------------------------------------------------------------------- 1 | 开发记录 2 | =========== 3 | 4 | ## 2016-07-11 5 | 1.添加JSDOC功能，自动生成API文档 6 | -------------------------------------------------------------------------------- /Linux-Git.txt: -------------------------------------------------------------------------------- 1 | Linux git客户端连接教程 2 | ====================== 3 | ## 1. 创建SSH证书 4 | > 输入如下命令，email地址输入自己的github注册邮箱 5 | ``` bash 6 | ssh-keygen -t rsa -b 4096 -C "xxx@example.com" 7 | ``` 8 | 在此过程中，命令交互信息首先会要求你确认文件名称与存放地址，点击回车即可;然后会要求你输入passphrase，随便输入一个即可，也可以不输入。 9 | 10 | ## 2. 将SSH证书添加SSH客户端 11 | > 如果之前修改了文件存放路径，则输入修改后的存放路径，默认路径为~/.ssh/id_rsa 12 | ``` bash 13 | ssh-add ~/.ssh/id_rsa 14 | ``` 15 | 在此过程中，输入之前的passphrase，点击回车确认，即可操作完成。 16 | 17 | ## 3. 将SSH证书添加github账户 18 | > 登录github，在账户的Settings中点击“SSH and GPG keys",然后再点击"New SSH key",在标题中输入证书的描述信息，在Key中输入SSH证书文件中的内容，点击"Add SSH key"就能完成操作。 19 | > 获取证书文件内容的方法如下： 20 | ``` bash 21 | cat ~/.ssh/id_rsa 22 | ``` 23 | 24 | ## 4. 测试证书是否创建成功 25 | > 如果显示欢迎信息，则表示操作成功，否则失败。 26 | ``` bash 27 | ssh -T git@github.com 28 | ``` 29 | 30 | ## 5. 下载代码 31 | > 第4步如果提示成功，即可下载代码，否则把流程重做一遍吧。 32 | -------------------------------------------------------------------------------- /PATH-DESC.MD: -------------------------------------------------------------------------------- 1 | 系统目录结构 2 | ============= 3 | ## build 4 | > 存放webpack的配置文件 5 | 6 | ## config 7 | > 存放本地服务的配置信息 8 | 9 | ## dist 10 | > webpack构建时的输出目录 11 | 12 | ## docs 13 | > 文档、主程序的存放目录 14 | 15 | ## node_modules 16 | > 开发架包、编译架包的存放目录 17 | 18 | ## src 19 | > 自定义组件、通用服务等源文件存放目录 20 | 1. assets,静态资源的存放路径 21 | 2. components,自定义组件的存放路径 22 | 3.framework，框架通用服务与组件的存放路径 23 | 24 | ## static 25 | > 暂未使用 26 | 27 | ## test 28 | > 单元测试、自动测试文件的存放目录 29 | 30 | ## index.html 31 | > 应用的唯一页面，作为访问程序的入口 32 | 33 | ## package.json 34 | > 应用的npm配置信息 -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # yii-template 2 | 3 | > 基于nodejs开发的前端项目模板，依赖nodejs开发环境，为自定义组件、技术研究、二次开发以及代码讲解开发的项目母版，其他各项目都对此进行fork 4 | 5 | ## 编译过程 6 | 7 | ``` bash 8 | # 安装依赖 9 | npm install 10 | 11 | # 启动热加载服务，访问地址http://localhost:8080, 默认会调用docs目录下的main.js 12 | npm run dev 13 | 14 | # 在生产模式下构建项目，内容包括代码校验、压缩以及混淆， 15 | npm run build 16 | 17 | # 运行单元测试 18 | npm run unit 19 | 20 | # 运行e2e测试 21 | npm run e2e 22 | 23 | # 运行所有的测试 24 | npm test 25 | ``` 26 | 27 | ## 对CSS、SASS的支持 28 | ``` html 29 | # 外部样式的引用，在vue文件中直接输入 30 | 31 | 32 | # 对SASS的支持，在vue文件直接引用 33 | 36 | 37 | # 在JS中直接引入CSS文件,暂不支持 38 | import "../node_modules/bootstrap/dist/css/bootstrap.css"//错误 39 | 40 | ``` 41 | 42 | ## 静态资源 43 | ``` html 44 | # 与vue文件放在一起，直接引用 45 | 46 | 47 | # 放在static目录下，所有模块公用,但只会以相对地址解析，不能解析别名，暂不支持 48 | 49 | 50 | 51 | # 相对地址，指相对于当前vue文件的地址，并生成转换后的绝对地址 52 | 53 | 54 | 55 | # 绝对地址，将不会做任何替换操作，直接嵌入到页面中 56 | 57 | 58 | ``` 59 | 60 | ## 别名与引用的组件 61 | ``` javascript 62 | # 别名，可精确到文件地址，并能支持带后缀的键值 63 | /*在build/webpack.base.conf.js文件中定义*/ 64 | resolve: { 65 | alias: { 66 | "bootstrap.css" : projectRoot + '/node_modules/bootstrap/dist/css/bootstrap.css' 67 | } 68 | } 69 | # 引用的组件时，尽可能带上后缀，能大量减少编译错误 70 | import App from './App.vue' 71 | ``` 72 | 73 | ##Eslint,默认启用,要求较为严格，可关闭 74 | ``` javascript 75 | /*在build/webpack.base.conf.js文件中定义，注释下面这段代码即可关闭*/ 76 | preLoaders: [ 77 | { 78 | test: /\.vue$/, 79 | loader: 'eslint', 80 | include: projectRoot, 81 | exclude: [/node_modules/, /docs/] 82 | }, 83 | { 84 | test: /\.js$/, 85 | loader: 'eslint', 86 | include: projectRoot, 87 | exclude: [/node_modules/, /docs/] 88 | } 89 | ], 90 | ``` 91 | 92 | ## 文档与组件 93 | ``` javascript 94 | # 文档放置在docs文件夹下，承担了两部分的任务，一方面担任DEMO演示，一方面担任使用说明 95 | entry: { 96 | app: './docs/main.js' 97 | } 98 | 99 | # 组件放置在src文件夹下，一般用于技术研究与自定义组件 100 | /*只需要单独发布组件时，需要将app指向为src目录，如下*/ 101 | entry: { 102 | app: './src/main.js' 103 | } 104 | # 105 | ``` 106 | 107 | ## 文档语法高亮 108 | ``` html 109 | # 用法1 110 | 119 | 120 | # 用法2 121 | 
122 | function foo() {
123 | }
124 |
125 | 126 | # 用法3 127 | 
128 |    h1.container {
129 | 	height : 100px;
130 | 	font-size : 12px;
131 |     }
132 |
133 | 134 | # 用法4 135 | 
136 |    h1.container {
137 | 	height : 100px;
138 | 	font-size : 12px;
139 |     }
140 |
141 | 142 | # 用法5 143 | 
144 |   

145 |       
146 |       
147 |   

148 |
149 | ``` 150 | 151 | ## 生产模式 152 | > 生产模式下会把所有的文件都打包到dist目录下，包括CSS、JS以及应用的相关图片，生成应用的绝对地址都会指向根目录，可通过webpack进行修改。 153 | 154 | ## 浏览器支持 155 | 1.Chrome 21+
156 | 2.Opera 12.1+
157 | 3.Firefox 22+
158 | 4.Safari 6.1+
159 | 5.IE 10+ 160 | 161 | ## 最小分辨率支持 162 | > 1024 * 768 163 | 164 | ##使用的相关技术 165 | 1.[Webpack](http://vuejs-templates.github.io/webpack/)
166 | 2.[vue-loader](http://vuejs.github.io/vue-loader)
167 | 3.[vue](http://cn.vuejs.org/)
168 | 4.[syntaxhighlighter](https://github.com/syntaxhighlighter/syntaxhighlighter)
169 | 5.[bootstrap](http://getbootstrap.com/) 170 | 171 | 172 | 173 | -------------------------------------------------------------------------------- /build/build.js: -------------------------------------------------------------------------------- 1 | // https://github.com/shelljs/shelljs 2 | require('shelljs/global') 3 | env.NODE_ENV = 'production' 4 | 5 | var path = require('path') 6 | var config = require('../config') 7 | var ora = require('ora') 8 | var webpack = require('webpack') 9 | var webpackConfig = require('./webpack.prod.conf') 10 | 11 | console.log( 12 | ' Tip:\n' + 13 | ' Built files are meant to be served over an HTTP server.\n' + 14 | ' Opening index.html over file:// won\'t work.\n' 15 | ) 16 | 17 | var spinner = ora('building for production...') 18 | spinner.start() 19 | 20 | var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory) 21 | rm('-rf', assetsPath) 22 | mkdir('-p', assetsPath) 23 | cp('-R', 'static/', assetsPath) 24 | 25 | webpack(webpackConfig, function (err, stats) { 26 | spinner.stop() 27 | if (err) throw err 28 | process.stdout.write(stats.toString({ 29 | colors: true, 30 | modules: false, 31 | children: false, 32 | chunks: false, 33 | chunkModules: false 34 | }) + '\n') 35 | }) 36 | -------------------------------------------------------------------------------- /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 | var path = require('path') 2 | var express = require('express') 3 | var webpack = require('webpack') 4 | var config = require('../config') 5 | var proxyMiddleware = require('http-proxy-middleware') 6 | var webpackConfig = process.env.NODE_ENV === 'testing' 7 | ? require('./webpack.prod.conf') 8 | : require('./webpack.dev.conf') 9 | 10 | // default port where dev server listens for incoming traffic 11 | var port = process.env.PORT || config.dev.port 12 | // Define HTTP proxies to your custom API backend 13 | // https://github.com/chimurai/http-proxy-middleware 14 | var proxyTable = config.dev.proxyTable 15 | 16 | var app = express() 17 | var compiler = webpack(webpackConfig) 18 | 19 | var devMiddleware = require('webpack-dev-middleware')(compiler, { 20 | publicPath: webpackConfig.output.publicPath, 21 | stats: { 22 | colors: true, 23 | chunks: false 24 | } 25 | }) 26 | 27 | var hotMiddleware = require('webpack-hot-middleware')(compiler) 28 | // force page reload when html-webpack-plugin template changes 29 | compiler.plugin('compilation', function (compilation) { 30 | compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) { 31 | hotMiddleware.publish({ action: 'reload' }) 32 | cb() 33 | }) 34 | }) 35 | 36 | // proxy api requests 37 | Object.keys(proxyTable).forEach(function (context) { 38 | var options = proxyTable[context] 39 | if (typeof options === 'string') { 40 | options = { target: options } 41 | } 42 | app.use(proxyMiddleware(context, options)) 43 | }) 44 | 45 | // handle fallback for HTML5 history API 46 | app.use(require('connect-history-api-fallback')()) 47 | 48 | // serve webpack bundle output 49 | app.use(devMiddleware) 50 | 51 | // enable hot-reload and state-preserving 52 | // compilation error display 53 | app.use(hotMiddleware) 54 | 55 | // serve pure static assets 56 | var staticPath = path.posix.join(config.build.assetsPublicPath, config.build.assetsSubDirectory) 57 | app.use(staticPath, express.static('./static')) 58 | 59 | module.exports = app.listen(port, function (err) { 60 | if (err) { 61 | console.log(err) 62 | return 63 | } 64 | console.log('Listening at http://localhost:' + port + '\n') 65 | }) 66 | -------------------------------------------------------------------------------- /build/utils.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var config = require('../config') 3 | var ExtractTextPlugin = require('extract-text-webpack-plugin') 4 | 5 | exports.assetsPath = function (_path) { 6 | return path.posix.join(config.build.assetsSubDirectory, _path) 7 | } 8 | 9 | exports.cssLoaders = function (options) { 10 | options = options || {} 11 | // generate loader string to be used with extract text plugin 12 | function generateLoaders (loaders) { 13 | var sourceLoader = loaders.map(function (loader) { 14 | var extraParamChar 15 | if (/\?/.test(loader)) { 16 | loader = loader.replace(/\?/, '-loader?') 17 | extraParamChar = '&' 18 | } else { 19 | loader = loader + '-loader' 20 | extraParamChar = '?' 21 | } 22 | return loader + (options.sourceMap ? extraParamChar + 'sourceMap' : '') 23 | }).join('!') 24 | 25 | if (options.extract) { 26 | return ExtractTextPlugin.extract('vue-style-loader', sourceLoader) 27 | } else { 28 | return ['vue-style-loader', sourceLoader].join('!') 29 | } 30 | } 31 | 32 | // http://vuejs.github.io/vue-loader/configurations/extract-css.html 33 | return { 34 | css: generateLoaders(['css']), 35 | postcss: generateLoaders(['css']), 36 | less: generateLoaders(['css', 'less']), 37 | sass: generateLoaders(['css', 'sass?indentedSyntax']), 38 | scss: generateLoaders(['css', 'sass']), 39 | stylus: generateLoaders(['css', 'stylus']), 40 | styl: generateLoaders(['css', 'stylus']) 41 | } 42 | } 43 | 44 | // Generate loaders for standalone style files (outside of .vue) 45 | exports.styleLoaders = function (options) { 46 | var output = [] 47 | var loaders = exports.cssLoaders(options) 48 | for (var extension in loaders) { 49 | var loader = loaders[extension] 50 | output.push({ 51 | test: new RegExp('\\.' + extension + '$'), 52 | loader: loader 53 | }) 54 | } 55 | return output 56 | } 57 | -------------------------------------------------------------------------------- /build/webpack.base.conf.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var webpack = require('webpack') 3 | var config = require('../config') 4 | var utils = require('./utils') 5 | var projectRoot = path.resolve(__dirname, '../') 6 | 7 | module.exports = { 8 | plugins: [ 9 | /* new webpack.ProvidePlugin({ 10 | d3: "jquery", 11 | $: "jquery" 12 | }),*/ 13 | 14 | /** 15 | new webpack.optimize.CommonsChunkPlugin({ 16 | name : "vendor", 17 | filename : "vendor.js", 18 | minChunks : Infinity 19 | }) 20 | **/ 21 | ], 22 | 23 | entry: { 24 | /** 25 | * 在需要打包组件系统时，将此处改为./src/main.js 26 | */ 27 | //app: './src/main.js' 28 | //vendor: ["jquery"], 29 | app: './docs/main.js' 30 | }, 31 | output: { 32 | path: config.build.assetsRoot, 33 | publicPath: config.build.assetsPublicPath, 34 | filename: '[name].js' 35 | }, 36 | /** 37 | externals: { 38 | // require("jquery") is external and available 39 | // on the global var jQuery 40 | "jquery": "jQuery" 41 | }, 42 | **/ 43 | resolve: { 44 | extensions: ['', '.js', '.vue'], 45 | fallback: [path.join(__dirname, '../node_modules')], 46 | /** 47 | * 别名 48 | */ 49 | alias: { 50 | 'src': path.resolve(__dirname, '../src'), 51 | 'assets': path.resolve(__dirname, '../src/assets'), 52 | 'components': path.resolve(__dirname, '../src/components'), 53 | "bootstrap.css" : projectRoot + '/node_modules/bootstrap/dist/css/bootstrap.css', 54 | //"jquery" : projectRoot + '/node_modules/jquery/dist/jquery.js', 55 | //"d3": projectRoot + '/node_modules/d3/build/d3.js', 56 | "syntaxhighlighter.js" : projectRoot + '/docs/libs/syntaxhighlighter.js', 57 | "syntaxhighlighter.css" : projectRoot + '/docs/libs/syntaxhighlighter.css', 58 | } 59 | }, 60 | resolveLoader: { 61 | fallback: [path.join(__dirname, '../node_modules')] 62 | }, 63 | module: { 64 | /** **/ 65 | preLoaders: [ 66 | { 67 | test: /\.vue$/, 68 | loader: 'eslint', 69 | include: projectRoot, 70 | exclude: [/node_modules/, /docs/] 71 | }, 72 | { 73 | test: /\.js$/, 74 | loader: 'eslint', 75 | include: projectRoot, 76 | exclude: [/node_modules/, /docs/] 77 | } 78 | ], 79 | 80 | loaders: [ 81 | /*导入全局jQuery*/ 82 | { 83 | test: require.resolve('jquery'), 84 | loader: 'expose?jQuery!expose?$' 85 | }, 86 | { 87 | test: /\.vue$/, 88 | loader: 'vue' 89 | }, 90 | { 91 | test: /\.js$/, 92 | loader: 'babel', 93 | include: projectRoot, 94 | exclude: /node_modules/ 95 | }, 96 | { 97 | test: /\.json$/, 98 | loader: 'json' 99 | }, 100 | { 101 | test: /\.html$/, 102 | loader: 'vue-html' 103 | }, 104 | { 105 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 106 | loader: 'url', 107 | query: { 108 | limit: 10000, 109 | name: utils.assetsPath('img/[name].[hash:7].[ext]') 110 | } 111 | }, 112 | { 113 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 114 | loader: 'url', 115 | query: { 116 | limit: 10000, 117 | name: utils.assetsPath('fonts/[name].[hash:7].[ext]') 118 | } 119 | } 120 | ] 121 | }, 122 | eslint: { 123 | formatter: require('eslint-friendly-formatter') 124 | }, 125 | vue: { 126 | loaders: utils.cssLoaders() 127 | } 128 | } 129 | -------------------------------------------------------------------------------- /build/webpack.dev.conf.js: -------------------------------------------------------------------------------- 1 | var config = require('../config') 2 | var webpack = require('webpack') 3 | var merge = require('webpack-merge') 4 | var utils = require('./utils') 5 | var baseWebpackConfig = require('./webpack.base.conf') 6 | var HtmlWebpackPlugin = require('html-webpack-plugin') 7 | 8 | // add hot-reload related code to entry chunks 9 | Object.keys(baseWebpackConfig.entry).forEach(function (name) { 10 | baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name]) 11 | }) 12 | 13 | module.exports = merge(baseWebpackConfig, { 14 | module: { 15 | loaders: utils.styleLoaders() 16 | }, 17 | // eval-source-map is faster for development 18 | devtool: '#eval-source-map', 19 | plugins: [ 20 | new webpack.DefinePlugin({ 21 | 'process.env': config.dev.env 22 | }), 23 | // https://github.com/glenjamin/webpack-hot-middleware#installation--usage 24 | new webpack.optimize.OccurenceOrderPlugin(), 25 | new webpack.HotModuleReplacementPlugin(), 26 | new webpack.NoErrorsPlugin(), 27 | // https://github.com/ampedandwired/html-webpack-plugin 28 | new HtmlWebpackPlugin({ 29 | filename: 'index.html', 30 | template: 'index.html', 31 | inject: true 32 | }) 33 | ] 34 | }) 35 | -------------------------------------------------------------------------------- /build/webpack.prod.conf.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var config = require('../config') 3 | var utils = require('./utils') 4 | var webpack = require('webpack') 5 | var merge = require('webpack-merge') 6 | var baseWebpackConfig = require('./webpack.base.conf') 7 | var ExtractTextPlugin = require('extract-text-webpack-plugin') 8 | var HtmlWebpackPlugin = require('html-webpack-plugin') 9 | var JsDocPlugin = require('jsdoc-webpack-plugin') 10 | var env = process.env.NODE_ENV === 'testing' 11 | ? require('../config/test.env') 12 | : config.build.env 13 | 14 | var webpackConfig = merge(baseWebpackConfig, { 15 | module: { 16 | loaders: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: true }) 17 | }, 18 | devtool: config.build.productionSourceMap ? '#source-map' : false, 19 | output: { 20 | path: config.build.assetsRoot, 21 | /** 22 | filename: utils.assetsPath('js/[name].js'), 23 | chunkFilename: utils.assetsPath('js/[id].js') 24 | **/ 25 | filename: utils.assetsPath('js/[name].[chunkhash].js'), 26 | chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') 27 | 28 | }, 29 | vue: { 30 | loaders: utils.cssLoaders({ 31 | sourceMap: config.build.productionSourceMap, 32 | extract: true 33 | }) 34 | }, 35 | plugins: [ 36 | // http://vuejs.github.io/vue-loader/workflow/production.html 37 | new webpack.DefinePlugin({ 38 | 'process.env': env 39 | }), 40 | /** 41 | new JsDocPlugin({ 42 | conf: './build/jsdoc.conf' 43 | }), 44 | **/ 45 | new webpack.optimize.UglifyJsPlugin({ 46 | compress: { 47 | warnings: false 48 | } 49 | }), 50 | new webpack.optimize.OccurenceOrderPlugin(), 51 | // extract css into its own file 52 | new ExtractTextPlugin(utils.assetsPath('css/[name].[contenthash].css')), 53 | // generate dist index.html with correct asset hash for caching. 54 | // you can customize output by editing /index.html 55 | // see https://github.com/ampedandwired/html-webpack-plugin 56 | new HtmlWebpackPlugin({ 57 | filename: process.env.NODE_ENV === 'testing' 58 | ? 'index.html' 59 | : config.build.index, 60 | template: 'index.html', 61 | inject: true, 62 | minify: { 63 | removeComments: true, 64 | collapseWhitespace: true, 65 | removeAttributeQuotes: true 66 | // more options: 67 | // https://github.com/kangax/html-minifier#options-quick-reference 68 | }, 69 | // necessary to consistently work with multiple chunks via CommonsChunkPlugin 70 | chunksSortMode: 'dependency' 71 | }), 72 | // split vendor js into its own file 73 | new webpack.optimize.CommonsChunkPlugin({ 74 | name: 'vendor', 75 | minChunks: function (module, count) { 76 | // any required modules inside node_modules are extracted to vendor 77 | return ( 78 | module.resource && 79 | /\.js$/.test(module.resource) && 80 | module.resource.indexOf( 81 | path.join(__dirname, '../node_modules') 82 | ) === 0 83 | ) 84 | } 85 | }), 86 | // extract webpack runtime and module manifest to its own file in order to 87 | // prevent vendor hash from being updated whenever app bundle is updated 88 | new webpack.optimize.CommonsChunkPlugin({ 89 | name: 'manifest', 90 | chunks: ['vendor'] 91 | }) 92 | ] 93 | }) 94 | 95 | if (config.build.productionGzip) { 96 | var CompressionWebpackPlugin = require('compression-webpack-plugin') 97 | 98 | webpackConfig.plugins.push( 99 | new CompressionWebpackPlugin({ 100 | asset: '[path].gz[query]', 101 | algorithm: 'gzip', 102 | test: new RegExp( 103 | '\\.(' + 104 | config.build.productionGzipExtensions.join('|') + 105 | ')$' 106 | ), 107 | threshold: 10240, 108 | minRatio: 0.8 109 | }) 110 | ) 111 | } 112 | 113 | module.exports = webpackConfig 114 | -------------------------------------------------------------------------------- /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 | }, 19 | dev: { 20 | env: require('./dev.env'), 21 | port: 8080, 22 | proxyTable: {} 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /docs/App.vue: -------------------------------------------------------------------------------- 1 | 2 | 3 | 31 | 32 | 47 | -------------------------------------------------------------------------------- /docs/d3/D3Index.vue: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /docs/d3/Selection.vue: -------------------------------------------------------------------------------- 1 | 102 | 109 | -------------------------------------------------------------------------------- /docs/i18n/README.MD: -------------------------------------------------------------------------------- 1 | 项目的国际化支持 2 | =============== 3 | 国际化不仅能显著提高产品的区域适应性，还能够担负起维护字符串常量的重任，减少后期维护的工作量，如统一将“新增”按钮改为“添加”按钮，有国际化文件的话，只需要修改一处，既方便又快捷。 4 | ## 1.添加国际化文件 5 | > 在docs/i18n中添加国际化文件,按时区依次进行注册，如下： 6 | ``` javascript 7 | export default { 8 | zh_CN : { 9 | title : '应用基础框架', 10 | collapse : '收起菜单' 11 | }, 12 | en_US : { 13 | title : 'Base Framework', 14 | collapse : 'collapse {msg}' 15 | } 16 | } 17 | ``` 18 | ## 2.注册国际化文件 19 | > 打开docs/i18n/locales.js文件，引用刚刚创建的国际化文件，并按时区依次添加，如下： 20 | ``` javascript 21 | export default { 22 | zh_CN : { 23 | app : app.zh_CN 24 | }, 25 | en_US : { 26 | app : app.en_US 27 | } 28 | } 29 | ``` 30 | ## 3.使用国际化 31 | 3.1 直接在页面中使用 32 | ``` html 33 |

{{{ $t('app.title') }}}

34 |

{{ $t('app.collapse', { msg: "菜单"}) }}

35 | ``` 36 | 3.2 在js文件中使用 37 | ``` javascript 38 | //将会得到与页面中同样的字符串 39 | let title = Vue.t('app.title') 40 | let collapse = Vue.t('app.collapse', {msg: "菜单"}) 41 | let collapse = this.$t('app.collapse', {msg: "菜单"}) 42 | ``` 43 | 44 | ## 参考文档 45 | >1. [vue-i18n](https://github.com/kazupon/vue-i18n) -------------------------------------------------------------------------------- /docs/i18n/app.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 系统自身的国际化文件 3 | * 按时区依次进行注册 4 | */ 5 | export default { 6 | 7 | zh_CN : { 8 | title : '应用基础框架', 9 | collapse : '收起菜单' 10 | } 11 | } -------------------------------------------------------------------------------- /docs/i18n/locales.js: -------------------------------------------------------------------------------- 1 | import app from './app.js' 2 | 3 | /** 4 | * 按时区依次进行注册 5 | * app ： 系统自身国际化信息 6 | */ 7 | export default { 8 | 9 | zh_CN : { 10 | app : app.zh_CN 11 | }, 12 | 13 | en_US : { 14 | 15 | } 16 | } -------------------------------------------------------------------------------- /docs/libs/syntaxhighlighter.css: -------------------------------------------------------------------------------- 1 | .syntaxhighlighter a, 2 | .syntaxhighlighter div, 3 | .syntaxhighlighter code, 4 | .syntaxhighlighter table, 5 | .syntaxhighlighter table td, 6 | .syntaxhighlighter table tr, 7 | .syntaxhighlighter table tbody, 8 | .syntaxhighlighter table thead, 9 | .syntaxhighlighter table caption, 10 | .syntaxhighlighter textarea { 11 | -moz-border-radius: 0 0 0 0 !important; 12 | -webkit-border-radius: 0 0 0 0 !important; 13 | background: none !important; 14 | border: 0 !important; 15 | bottom: auto !important; 16 | float: none !important; 17 | height: auto !important; 18 | left: auto !important; 19 | line-height: 1.1em !important; 20 | margin: 0 !important; 21 | outline: 0 !important; 22 | overflow: visible !important; 23 | padding: 0 !important; 24 | position: static !important; 25 | right: auto !important; 26 | text-align: left !important; 27 | top: auto !important; 28 | vertical-align: baseline !important; 29 | width: auto !important; 30 | box-sizing: content-box !important; 31 | font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; 32 | font-weight: normal !important; 33 | font-style: normal !important; 34 | font-size: 1em !important; 35 | min-height: inherit !important; 36 | min-height: auto !important; } 37 | 38 | .syntaxhighlighter { 39 | width: 100% !important; 40 | margin: 1em 0 1em 0 !important; 41 | position: relative !important; 42 | overflow: auto !important; 43 | font-size: 1em !important; } 44 | .syntaxhighlighter .container:before, .syntaxhighlighter .container:after { 45 | content: none !important; } 46 | .syntaxhighlighter.source { 47 | overflow: hidden !important; } 48 | .syntaxhighlighter .bold { 49 | font-weight: bold !important; } 50 | .syntaxhighlighter .italic { 51 | font-style: italic !important; } 52 | .syntaxhighlighter .line { 53 | white-space: pre !important; } 54 | .syntaxhighlighter table { 55 | width: 100% !important; } 56 | .syntaxhighlighter table caption { 57 | text-align: left !important; 58 | padding: .5em 0 0.5em 1em !important; } 59 | .syntaxhighlighter table td.code { 60 | width: 100% !important; } 61 | .syntaxhighlighter table td.code .container { 62 | position: relative !important; } 63 | .syntaxhighlighter table td.code .container textarea { 64 | box-sizing: border-box !important; 65 | position: absolute !important; 66 | left: 0 !important; 67 | top: 0 !important; 68 | width: 100% !important; 69 | height: 100% !important; 70 | border: none !important; 71 | background: white !important; 72 | padding-left: 1em !important; 73 | overflow: hidden !important; 74 | white-space: pre !important; } 75 | .syntaxhighlighter table td.gutter .line { 76 | text-align: right !important; 77 | padding: 0 0.5em 0 1em !important; } 78 | .syntaxhighlighter table td.code .line { 79 | padding: 0 1em !important; } 80 | .syntaxhighlighter.nogutter td.code .container textarea, .syntaxhighlighter.nogutter td.code .line { 81 | padding-left: 0em !important; } 82 | .syntaxhighlighter.show { 83 | display: block !important; } 84 | .syntaxhighlighter.collapsed table { 85 | display: none !important; } 86 | .syntaxhighlighter.collapsed .toolbar { 87 | padding: 0.1em 0.8em 0em 0.8em !important; 88 | font-size: 1em !important; 89 | position: static !important; 90 | width: auto !important; 91 | height: auto !important; } 92 | .syntaxhighlighter.collapsed .toolbar span { 93 | display: inline !important; 94 | margin-right: 1em !important; } 95 | .syntaxhighlighter.collapsed .toolbar span a { 96 | padding: 0 !important; 97 | display: none !important; } 98 | .syntaxhighlighter.collapsed .toolbar span a.expandSource { 99 | display: inline !important; } 100 | .syntaxhighlighter .toolbar { 101 | position: absolute !important; 102 | right: 1px !important; 103 | top: 1px !important; 104 | width: 11px !important; 105 | height: 11px !important; 106 | font-size: 10px !important; 107 | z-index: 10 !important; } 108 | .syntaxhighlighter .toolbar span.title { 109 | display: inline !important; } 110 | .syntaxhighlighter .toolbar a { 111 | display: block !important; 112 | text-align: center !important; 113 | text-decoration: none !important; 114 | padding-top: 1px !important; } 115 | .syntaxhighlighter .toolbar a.expandSource { 116 | display: none !important; } 117 | .syntaxhighlighter.ie { 118 | font-size: .9em !important; 119 | padding: 1px 0 1px 0 !important; } 120 | .syntaxhighlighter.ie .toolbar { 121 | line-height: 8px !important; } 122 | .syntaxhighlighter.ie .toolbar a { 123 | padding-top: 0px !important; } 124 | .syntaxhighlighter.printing .line.alt1 .content, 125 | .syntaxhighlighter.printing .line.alt2 .content, 126 | .syntaxhighlighter.printing .line.highlighted .number, 127 | .syntaxhighlighter.printing .line.highlighted.alt1 .content, 128 | .syntaxhighlighter.printing .line.highlighted.alt2 .content { 129 | background: none !important; } 130 | .syntaxhighlighter.printing .line .number { 131 | color: #bbbbbb !important; } 132 | .syntaxhighlighter.printing .line .content { 133 | color: black !important; } 134 | .syntaxhighlighter.printing .toolbar { 135 | display: none !important; } 136 | .syntaxhighlighter.printing a { 137 | text-decoration: none !important; } 138 | .syntaxhighlighter.printing .plain, .syntaxhighlighter.printing .plain a { 139 | color: black !important; } 140 | .syntaxhighlighter.printing .comments, .syntaxhighlighter.printing .comments a { 141 | color: #008200 !important; } 142 | .syntaxhighlighter.printing .string, .syntaxhighlighter.printing .string a { 143 | color: blue !important; } 144 | .syntaxhighlighter.printing .keyword { 145 | color: #006699 !important; 146 | font-weight: bold !important; } 147 | .syntaxhighlighter.printing .preprocessor { 148 | color: gray !important; } 149 | .syntaxhighlighter.printing .variable { 150 | color: #aa7700 !important; } 151 | .syntaxhighlighter.printing .value { 152 | color: #009900 !important; } 153 | .syntaxhighlighter.printing .functions { 154 | color: #ff1493 !important; } 155 | .syntaxhighlighter.printing .constants { 156 | color: #0066cc !important; } 157 | .syntaxhighlighter.printing .script { 158 | font-weight: bold !important; } 159 | .syntaxhighlighter.printing .color1, .syntaxhighlighter.printing .color1 a { 160 | color: gray !important; } 161 | .syntaxhighlighter.printing .color2, .syntaxhighlighter.printing .color2 a { 162 | color: #ff1493 !important; } 163 | .syntaxhighlighter.printing .color3, .syntaxhighlighter.printing .color3 a { 164 | color: red !important; } 165 | .syntaxhighlighter.printing .break, .syntaxhighlighter.printing .break a { 166 | color: black !important; } 167 | 168 | .syntaxhighlighter { 169 | background-color: white !important; } 170 | .syntaxhighlighter .line.alt1 { 171 | background-color: white !important; } 172 | .syntaxhighlighter .line.alt2 { 173 | background-color: white !important; } 174 | .syntaxhighlighter .line.highlighted.alt1, .syntaxhighlighter .line.highlighted.alt2 { 175 | background-color: #e0e0e0 !important; } 176 | .syntaxhighlighter .line.highlighted.number { 177 | color: black !important; } 178 | .syntaxhighlighter table caption { 179 | color: black !important; } 180 | .syntaxhighlighter table td.code .container textarea { 181 | background: white; 182 | color: black; } 183 | .syntaxhighlighter .gutter { 184 | color: #afafaf !important; } 185 | .syntaxhighlighter .gutter .line { 186 | border-right: 3px solid #6ce26c !important; } 187 | .syntaxhighlighter .gutter .line.highlighted { 188 | background-color: #6ce26c !important; 189 | color: white !important; } 190 | .syntaxhighlighter.printing .line .content { 191 | border: none !important; } 192 | .syntaxhighlighter.collapsed { 193 | overflow: visible !important; } 194 | .syntaxhighlighter.collapsed .toolbar { 195 | color: #00f !important; 196 | background: #fff !important; 197 | border: 1px solid #6ce26c !important; } 198 | .syntaxhighlighter.collapsed .toolbar a { 199 | color: #00f !important; } 200 | .syntaxhighlighter.collapsed .toolbar a:hover { 201 | color: #f00 !important; } 202 | .syntaxhighlighter .toolbar { 203 | color: #fff !important; 204 | background: #6ce26c !important; 205 | border: none !important; } 206 | .syntaxhighlighter .toolbar a { 207 | color: #fff !important; } 208 | .syntaxhighlighter .toolbar a:hover { 209 | color: #000 !important; } 210 | .syntaxhighlighter .plain, .syntaxhighlighter .plain a { 211 | color: black !important; } 212 | .syntaxhighlighter .comments, .syntaxhighlighter .comments a { 213 | color: #008200 !important; } 214 | .syntaxhighlighter .string, .syntaxhighlighter .string a { 215 | color: blue !important; } 216 | .syntaxhighlighter .keyword { 217 | font-weight: bold !important; 218 | color: #006699 !important; } 219 | .syntaxhighlighter .preprocessor { 220 | color: gray !important; } 221 | .syntaxhighlighter .variable { 222 | color: #aa7700 !important; } 223 | .syntaxhighlighter .value { 224 | color: #009900 !important; } 225 | .syntaxhighlighter .functions { 226 | color: #ff1493 !important; } 227 | .syntaxhighlighter .constants { 228 | color: #0066cc !important; } 229 | .syntaxhighlighter .script { 230 | font-weight: bold !important; 231 | color: #006699 !important; 232 | background-color: none !important; } 233 | .syntaxhighlighter .color1, .syntaxhighlighter .color1 a { 234 | color: gray !important; } 235 | .syntaxhighlighter .color2, .syntaxhighlighter .color2 a { 236 | color: #ff1493 !important; } 237 | .syntaxhighlighter .color3, .syntaxhighlighter .color3 a { 238 | color: red !important; } 239 | -------------------------------------------------------------------------------- /docs/main.js: -------------------------------------------------------------------------------- 1 | import VueI18n from 'vue-i18n' 2 | import locales from './i18n/locales.js' 3 | import Vue from 'vue' 4 | import App from './App.vue' 5 | import 'syntaxhighlighter.js' 6 | //使用国际化文件 7 | let app = { 8 | 9 | /** 10 | * 初始化i18n 11 | */ 12 | initI18n () { 13 | Vue.use(VueI18n) 14 | Vue.config.lang = 'zh_CN' 15 | Object.keys(locales).forEach(function (lang) { 16 | Vue.locale(lang, locales[lang]) 17 | }) 18 | }, 19 | 20 | /** 21 | * 启动Vue主程序 22 | */ 23 | initApp () { 24 | new Vue({ 25 | el: 'body', 26 | components: { 27 | App 28 | } 29 | }) 30 | }, 31 | 32 | /** 33 | * 运行应用程序 34 | */ 35 | run () { 36 | this.initI18n() 37 | this.initApp() 38 | } 39 | 40 | } 41 | app.run() 42 | 43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | yii-template 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "yii-template", 3 | "version": "1.0.0", 4 | "description": "代码模板", 5 | "author": "蚁方阵", 6 | "private": true, 7 | "scripts": { 8 | "dev": "node build/dev-server.js", 9 | "build": "node build/build.js", 10 | "unit": "karma start test/unit/karma.conf.js --single-run", 11 | "e2e": "node test/e2e/runner.js", 12 | "test": "npm run unit && npm run e2e", 13 | "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs" 14 | }, 15 | "dependencies": { 16 | "babel-runtime": "^6.0.0", 17 | "bootstrap": "^3.3.6", 18 | "d3": "^4.1.1", 19 | "highcharts": "^4.2.5", 20 | "jquery": "^3.1.0", 21 | "page": "^1.7.1", 22 | "vue": "^1.0.21", 23 | "vue-i18n": "^4.0.1" 24 | }, 25 | "devDependencies": { 26 | "babel-core": "^6.0.0", 27 | "babel-loader": "^6.0.0", 28 | "babel-plugin-transform-runtime": "^6.0.0", 29 | "babel-preset-es2015": "^6.0.0", 30 | "babel-preset-stage-2": "^6.0.0", 31 | "chai": "^3.5.0", 32 | "chromedriver": "^2.21.2", 33 | "connect-history-api-fallback": "^1.1.0", 34 | "cross-spawn": "^2.1.5", 35 | "css-loader": "^0.23.0", 36 | "eslint": "^2.10.2", 37 | "eslint-config-standard": "^5.1.0", 38 | "eslint-friendly-formatter": "^2.0.5", 39 | "eslint-loader": "^1.3.0", 40 | "eslint-plugin-html": "^1.3.0", 41 | "eslint-plugin-promise": "^1.0.8", 42 | "eslint-plugin-standard": "^1.3.2", 43 | "eventsource-polyfill": "^0.9.6", 44 | "expose-loader": "^0.7.1", 45 | "express": "^4.13.3", 46 | "extract-text-webpack-plugin": "^1.0.1", 47 | "file-loader": "^0.8.4", 48 | "function-bind": "^1.0.2", 49 | "html-webpack-plugin": "^2.8.1", 50 | "http-proxy-middleware": "^0.12.0", 51 | "inject-loader": "^2.0.1", 52 | "ink-docstrap": "^1.2.1", 53 | "isparta-loader": "^2.0.0", 54 | "jsdoc": "^3.4.0", 55 | "jsdoc-webpack-plugin": "0.0.1", 56 | "json-loader": "^0.5.4", 57 | "karma": "^0.13.15", 58 | "karma-coverage": "^0.5.5", 59 | "karma-mocha": "^0.2.2", 60 | "karma-phantomjs-launcher": "^1.0.0", 61 | "karma-sinon-chai": "^1.2.0", 62 | "karma-sourcemap-loader": "^0.3.7", 63 | "karma-spec-reporter": "0.0.24", 64 | "karma-webpack": "^1.7.0", 65 | "lolex": "^1.4.0", 66 | "mocha": "^2.4.5", 67 | "nightwatch": "^0.8.18", 68 | "node-sass": "^3.8.0", 69 | "ora": "^0.2.0", 70 | "phantomjs-prebuilt": "^2.1.3", 71 | "sass-loader": "^4.0.0", 72 | "selenium-server": "2.53.0", 73 | "shelljs": "^0.6.0", 74 | "sinon": "^1.17.3", 75 | "sinon-chai": "^2.8.0", 76 | "style-loader": "^0.13.1", 77 | "url-loader": "^0.5.7", 78 | "vue-hot-reload-api": "^1.2.0", 79 | "vue-html-loader": "^1.0.0", 80 | "vue-loader": "^8.3.0", 81 | "vue-style-loader": "^1.0.0", 82 | "webpack": "^1.12.2", 83 | "webpack-dev-middleware": "^1.4.0", 84 | "webpack-hot-middleware": "^2.6.0", 85 | "webpack-merge": "^0.8.3" 86 | } 87 | } 88 | -------------------------------------------------------------------------------- /src/assets/jquery-vendor.js: -------------------------------------------------------------------------------- 1 | import $ from 'jquery' 2 | window.$ = $ 3 | window.jQuery = $ 4 | export default $ 5 | -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yiifaa/yii-template/7c144be0ffb20fcc633959ea2c2d04800e54937a/src/assets/logo.png -------------------------------------------------------------------------------- /src/components/ByeBye.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 79 | -------------------------------------------------------------------------------- /src/components/Hello.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 62 | -------------------------------------------------------------------------------- /src/framework/README.md: -------------------------------------------------------------------------------- 1 | 系统通用组件与服务 2 | ========================== 3 | 4 | ## components 5 | > 用于存放系统通用组件 6 | 7 | ## utils 8 | > 用于存放系统工具类 9 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import byeBye from './components/ByeBye.vue' 2 | import hello from './components/Hello.vue' 3 | 4 | let comps = { 5 | byeBye, 6 | hello 7 | } 8 | export default comps 9 | 10 | -------------------------------------------------------------------------------- /static/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yiifaa/yii-template/7c144be0ffb20fcc633959ea2c2d04800e54937a/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 | // http://nightwatchjs.org/guide#settings-file 2 | module.exports = { 3 | "src_folders": ["test/e2e/specs"], 4 | "output_folder": "test/e2e/reports", 5 | "custom_assertions_path": ["test/e2e/custom-assertions"], 6 | 7 | "selenium": { 8 | "start_process": true, 9 | "server_path": "node_modules/selenium-server/lib/runner/selenium-server-standalone-2.53.0.jar", 10 | "host": "127.0.0.1", 11 | "port": 4444, 12 | "cli_args": { 13 | "webdriver.chrome.driver": require('chromedriver').path 14 | } 15 | }, 16 | 17 | "test_settings": { 18 | "default": { 19 | "selenium_port": 4444, 20 | "selenium_host": "localhost", 21 | "silent": true 22 | }, 23 | 24 | "chrome": { 25 | "desiredCapabilities": { 26 | "browserName": "chrome", 27 | "javascriptEnabled": true, 28 | "acceptSslCerts": true 29 | } 30 | }, 31 | 32 | "firefox": { 33 | "desiredCapabilities": { 34 | "browserName": "firefox", 35 | "javascriptEnabled": true, 36 | "acceptSslCerts": true 37 | } 38 | } 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /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 | // 2. run the nightwatch test suite against it 6 | // to run in additional browsers: 7 | // 1. add an entry in test/e2e/nightwatch.conf.json under "test_settings" 8 | // 2. add it to the --env flag below 9 | // or override the environment flag, for example: `npm run e2e -- --env chrome,firefox` 10 | // For more information on Nightwatch's config file, see 11 | // http://nightwatchjs.org/guide#settings-file 12 | var opts = process.argv.slice(2) 13 | if (opts.indexOf('--config') === -1) { 14 | opts = opts.concat(['--config', 'test/e2e/nightwatch.conf.js']) 15 | } 16 | if (opts.indexOf('--env') === -1) { 17 | opts = opts.concat(['--env', 'chrome']) 18 | } 19 | 20 | var spawn = require('cross-spawn') 21 | var runner = spawn('./node_modules/.bin/nightwatch', opts, { stdio: 'inherit' }) 22 | 23 | runner.on('exit', function (code) { 24 | server.close() 25 | process.exit(code) 26 | }) 27 | 28 | runner.on('error', function (err) { 29 | server.close() 30 | throw err 31 | }) 32 | -------------------------------------------------------------------------------- /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 | browser 7 | .url('http://localhost:8080') 8 | .waitForElementVisible('#app', 5000) 9 | .assert.elementPresent('.logo') 10 | .assert.containsText('h1', 'Hello World!') 11 | .assert.elementCount('p', 3) 12 | .end() 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /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 | // Polyfill fn.bind() for PhantomJS 2 | /* eslint-disable no-extend-native */ 3 | Function.prototype.bind = require('function-bind') 4 | 5 | // require all test files (files that ends with .spec.js) 6 | var 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 | var 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 path = require('path') 7 | var merge = require('webpack-merge') 8 | var baseConfig = require('../../build/webpack.base.conf') 9 | var utils = require('../../build/utils') 10 | var webpack = require('webpack') 11 | var projectRoot = path.resolve(__dirname, '../../') 12 | 13 | var webpackConfig = merge(baseConfig, { 14 | // use inline sourcemap for karma-sourcemap-loader 15 | module: { 16 | loaders: utils.styleLoaders() 17 | }, 18 | devtool: '#inline-source-map', 19 | vue: { 20 | loaders: { 21 | js: 'isparta' 22 | } 23 | }, 24 | plugins: [ 25 | new webpack.DefinePlugin({ 26 | 'process.env': require('../../config/test.env') 27 | }) 28 | ] 29 | }) 30 | 31 | // no need for app entry during tests 32 | delete webpackConfig.entry 33 | 34 | // make sure isparta loader is applied before eslint 35 | webpackConfig.module.preLoaders = webpackConfig.module.preLoaders || [] 36 | webpackConfig.module.preLoaders.unshift({ 37 | test: /\.js$/, 38 | loader: 'isparta', 39 | include: path.resolve(projectRoot, 'src') 40 | }) 41 | 42 | // only apply babel for test files when using isparta 43 | webpackConfig.module.loaders.some(function (loader, i) { 44 | if (loader.loader === 'babel') { 45 | loader.include = path.resolve(projectRoot, 'test/unit') 46 | return true 47 | } 48 | }) 49 | 50 | module.exports = function (config) { 51 | config.set({ 52 | // to run in additional browsers: 53 | // 1. install corresponding karma launcher 54 | // http://karma-runner.github.io/0.13/config/browsers.html 55 | // 2. add it to the `browsers` array below. 56 | browsers: ['PhantomJS'], 57 | frameworks: ['mocha', 'sinon-chai'], 58 | reporters: ['spec', 'coverage'], 59 | files: ['./index.js'], 60 | preprocessors: { 61 | './index.js': ['webpack', 'sourcemap'] 62 | }, 63 | webpack: webpackConfig, 64 | webpackMiddleware: { 65 | noInfo: true 66 | }, 67 | coverageReporter: { 68 | dir: './coverage', 69 | reporters: [ 70 | { type: 'lcov', subdir: '.' }, 71 | { type: 'text-summary' } 72 | ] 73 | } 74 | }) 75 | } 76 | -------------------------------------------------------------------------------- /test/unit/specs/Hello.spec.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Hello from 'src/components/Hello' 3 | 4 | describe('Hello.vue', () => { 5 | it('should render correct contents', () => { 6 | const vm = new Vue({ 7 | template: '
', 8 | components: { Hello } 9 | }).$mount() 10 | expect(vm.$el.querySelector('.hello h1').textContent).to.contain('Hello World!') 11 | }) 12 | }) 13 | -------------------------------------------------------------------------------- /webpack.MD: -------------------------------------------------------------------------------- 1 | Webpack引入jquery及其插件的几种方法 2 | 3 | ## 直接引入[难以引入插件] 4 | ``` javascript 5 | // 可以直接引入jquery,但没有全局的jQuery变量 6 | import $ from 'jquery' 7 | // 如果此时直接引入jquery 插件，则失败,如 8 | import 'jquery-ui' // 错误，将会找不到jquery-ui注册的相关方法 9 | ``` 10 | 11 | ## ProvidePlugin[难以引入插件] 12 | 在webpack中添加插件ProvidePlugin 13 | ``` javascript 14 | plugins: [ 15 | new webpack.ProvidePlugin({ 16 | $: "jquery", 17 | jQuery: "jquery" 18 | }), 19 | ] 20 | // $函数会自动添加到当前模块的上下文，无需显示声明 21 | ``` 22 | 问题是依旧没有全局的$函数，所以导入插件依旧会失败，并且如果有eslint这样的preLoads，调用语句也难以通过语法校验(因为没有声明$就直接使用)，仅这一点，对于我这样的代码处女座就难以接受。 23 | 24 | ## expose-loader[推荐使用] 25 | 不需要任何其他的插件配合，只要将下面的代码添加到所有的loader之前 26 | ``` javascript 27 | { 28 | test: require.resolve('jquery'), 29 | loader: 'expose?jQuery!expose?$' 30 | } 31 | ``` 32 | 引用时改为如下方式 33 | ``` javascript 34 | import $ from 'expose?$!jquery' 35 | import 'jquery-ui' //插件可用 36 | ``` 37 | imports-loader、script-loader同样可达到此效果，配置与功能都非常相似，在此不一一说明。 38 | 39 | ## 包装jquery[推荐使用] 40 | 此方法只依赖于自己，完全不需要任何其他插件与加载器，创建jquery的包装对象jquery-vendor.js 41 | ``` javascript 42 | import $ from 'jquery' 43 | window.$ = $ 44 | window.jQuery = $ 45 | export default $ 46 | ``` 47 | 以后引用jquery时指向jquery-vendor.js 48 | ``` javascript 49 | import $ from '../assets/jquery-vendor.js' 50 | import 'jquery-ui' 51 | // 此时UI的方法全部可用，如果需要引用bootstrap，可参照此方法 52 | 53 | ``` 54 | 为了调用方便，可在webpack配置文件中创建jquery-vendor.js的别名 55 | ``` javascript 56 | 57 | alias: { 58 | jquery : 'src/assets/jquery-vendor.js' // 将其指向jquery-vendor.js所在位置 59 | } 60 | ``` 61 | 62 | 63 | --------------------------------------------------------------------------------