├── .idea ├── .name ├── encodings.xml ├── jsLibraryMappings.xml ├── libraries │ └── vuedemo_node_modules.xml ├── misc.xml ├── modules.xml ├── vuedemo.iml ├── watcherTasks.xml └── workspace.xml ├── dist ├── build.js ├── build.js.map └── logo.png ├── index.html ├── package.json ├── src ├── App.vue ├── assets │ ├── imgs │ │ └── logo.png │ ├── sass │ │ ├── reset.sass │ │ └── reset.scss │ └── styles │ │ └── base.css ├── components │ └── header.vue ├── main.js ├── routes.js └── views │ ├── about.vue │ └── home.vue └── webpack.config.js /.idea/.name: -------------------------------------------------------------------------------- 1 | vuedemo -------------------------------------------------------------------------------- /.idea/encodings.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /.idea/jsLibraryMappings.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /.idea/libraries/vuedemo_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 | -------------------------------------------------------------------------------- /.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /.idea/vuedemo.iml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /.idea/watcherTasks.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 16 | 23 | 24 | -------------------------------------------------------------------------------- /.idea/workspace.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | 16 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 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 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 126 | 127 | 128 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | true 153 | 154 | 155 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 193 | 194 | 195 | 196 | 199 | 200 | 203 | 204 | 205 | 206 | 209 | 210 | 213 | 214 | 217 | 218 | 219 | 220 | 223 | 224 | 227 | 228 | 231 | 232 | 235 | 236 | 237 | 238 | 241 | 242 | 245 | 246 | 249 | 250 | 253 | 254 | 255 | 256 | 259 | 260 | 263 | 264 | 267 | 268 | 271 | 272 | 275 | 276 | 277 | 278 | 281 | 282 | 285 | 286 | 289 | 290 | 293 | 294 | 297 | 298 | 299 | 300 | 303 | 304 | 307 | 308 | 311 | 312 | 315 | 316 | 319 | 320 | 321 | 322 | 325 | 326 | 329 | 330 | 333 | 334 | 335 | 336 | 337 | 338 | 339 | 340 | 341 | 342 | 343 | 344 | 345 | 346 | 347 | 348 | 349 | 350 | 351 | 352 | 353 | 354 | 355 | 356 | 357 | 358 | 359 | 360 | 361 | 362 | 363 | 364 | 365 | 366 | 367 | 372 | 373 | 374 | 375 | 376 | 377 | 378 | 379 | 380 | 381 | 382 | 383 | 384 | 385 | 386 | 387 | 388 | $PROJECT_DIR$ 389 | true 390 | 391 | bdd 392 | 393 | DIRECTORY 394 | 395 | false 396 | 397 | 398 | 399 | 400 | 401 | 402 | 403 | 1488873536802 404 | 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 | 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 | -------------------------------------------------------------------------------- /dist/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MVPVP/vueDemo/29ceb64ff28dd7e68beb765a9b27be57cf5c2d62/dist/logo.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 |
9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vuedemo", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", 9 | "build": "webpack" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "dependencies": { 15 | "vue": "^2.2.1" 16 | }, 17 | "devDependencies": { 18 | "babel-core": "^6.23.1", 19 | "babel-loader": "^6.4.0", 20 | "babel-preset-es2015": "^6.22.0", 21 | "cross-env": "^3.2.3", 22 | "css-loader": "^0.26.2", 23 | "file-loader": "^0.10.1", 24 | "node-sass": "^4.5.0", 25 | "sass": "^0.5.0", 26 | "sass-loader": "^6.0.2", 27 | "scss-loader": "0.0.1", 28 | "style-loader": "^0.13.2", 29 | "url-loader": "^0.5.8", 30 | "vue-loader": "^11.1.4", 31 | "vue-router": "^2.3.0", 32 | "vue-style-loader": "^2.0.3", 33 | "vue-template-compiler": "^2.2.1", 34 | "webpack": "^2.2.1", 35 | "webpack-dev-server": "^2.4.1" 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 2 | 17 | 18 | 33 | 34 | 60 | -------------------------------------------------------------------------------- /src/assets/imgs/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MVPVP/vueDemo/29ceb64ff28dd7e68beb765a9b27be57cf5c2d62/src/assets/imgs/logo.png -------------------------------------------------------------------------------- /src/assets/sass/reset.sass: -------------------------------------------------------------------------------- 1 | 2 | $redColor:#f00; 3 | h1{ 4 | color:$redColor; 5 | } 6 | -------------------------------------------------------------------------------- /src/assets/sass/reset.scss: -------------------------------------------------------------------------------- 1 | $redColor:#f00; 2 | h2{ 3 | color:$redColor; 4 | } -------------------------------------------------------------------------------- /src/assets/styles/base.css: -------------------------------------------------------------------------------- 1 | h1{ 2 | color: #999; 3 | } -------------------------------------------------------------------------------- /src/components/header.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by Administrator on 2017/3/7. 3 | */ 4 | //main.js这是项目的核心文件。全局的配置都在这个文件里面配置 5 | import Vue from 'vue' 6 | import App from './App.vue' 7 | import router from './routes.js' 8 | 9 | import './assets/styles/base.css' 10 | //import './assets/sass/reset.scss'//报错暂时不用sass 11 | 12 | Vue.config.debug = true;//开启错误提示 13 | 14 | new Vue({ 15 | router, 16 | el: '#appIndex', 17 | render: h => h(App) 18 | }) 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /src/routes.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by Administrator on 2017/3/7. 3 | */ 4 | 5 | // 引用模板 6 | import Vue from 'vue'; 7 | import Router from 'vue-router'; 8 | import indexPage from './components/header.vue' 9 | import homePage from './views/home.vue' 10 | import aboutPage from './views/about.vue' 11 | 12 | Vue.use(Router) 13 | 14 | export default new Router({ 15 | routes:[ 16 | { 17 | path:'/', 18 | component:homePage 19 | }, 20 | { 21 | path:'/about', 22 | component:aboutPage 23 | } 24 | ] 25 | }) -------------------------------------------------------------------------------- /src/views/about.vue: -------------------------------------------------------------------------------- 1 | //about.vue 2 | 24 | 41 | -------------------------------------------------------------------------------- /src/views/home.vue: -------------------------------------------------------------------------------- 1 | //index.vue 2 | 12 | 13 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var webpack = require('webpack') 3 | 4 | module.exports = { 5 | entry: './src/main.js',//值可以是字符串、数组或对象 6 | output: { 7 | path: path.resolve(__dirname, './dist'),//Webpack结果存储 8 | publicPath: '/dist/',//懵懂，懵逼，//然而“publicPath”项则被许多Webpack的插件用于在生产模式和开发模式下下更新内嵌到css、html，img文件里的url值 9 | filename: 'build.js' 10 | }, 11 | module: { 12 | rules: [ 13 | { 14 | test: /\.vue$/, 15 | loader: 'vue-loader', 16 | options: { 17 | loaders: { 18 | } 19 | // other vue-loader options go here 20 | } 21 | }, 22 | { 23 | test: /\.js$/, 24 | loader: 'babel-loader', 25 | exclude: /node_modules/ 26 | }, 27 | { 28 | test: /\.(png|jpg|gif|svg)$/, 29 | loader: 'file-loader', 30 | options: { 31 | name: '[name].[ext]?[hash]' 32 | } 33 | } 34 | //自己加的 35 | , 36 | { 37 | test: /\.css$/, 38 | loader: "style-loader!css-loader" 39 | } 40 | , 41 | { 42 | test: /\.(scss|sass)$/, 43 | loader: "style-loader!css-loader!sass-loader!sass!scss-loader!vue-style-loader" 44 | } 45 | ] 46 | }, 47 | resolve: { 48 | alias: { 49 | 'vue$': 'vue/dist/vue.esm.js' 50 | } 51 | }, 52 | devServer: {//webpack-dev-server配置 53 | historyApiFallback: true,//不跳转 54 | noInfo: true, 55 | inline: true,//实时刷新 56 | hot:true 57 | }, 58 | performance: { 59 | hints: false 60 | }, 61 | devtool: '#eval-source-map' 62 | } 63 | 64 | if (process.env.NODE_ENV === 'production') { 65 | module.exports.devtool = '#source-map' 66 | // http://vue-loader.vuejs.org/en/workflow/production.html 67 | module.exports.plugins = (module.exports.plugins || []).concat([ 68 | new webpack.DefinePlugin({ 69 | 'process.env': { 70 | NODE_ENV: '"production"' 71 | } 72 | }), 73 | new webpack.optimize.UglifyJsPlugin({ 74 | sourceMap: true, 75 | compress: { 76 | warnings: false 77 | } 78 | }), 79 | new webpack.LoaderOptionsPlugin({ 80 | minimize: true 81 | }) 82 | ]) 83 | } 84 | --------------------------------------------------------------------------------