└── README.md /README.md: -------------------------------------------------------------------------------- 1 | ## 简介 2 | ### 基于Vue+Element实现真实后台管理系统 3 | 本教程只是vue全家桶简单的一部分，主要为了在实际开发中快速上手，同时能够快速掌握Vue构建工具。 4 | 5 | 由于本人水平有限，如果有不足或者错误的地方，希望能提出意见和建议。 6 | 7 | 这是鄙人第一个教程，所有您的鼓励对我尤为重要，所有不要吝惜你的star。 8 | ## 环境搭建 9 | 1.安装Node.js,从[node.js官网](https://nodejs.org/zh-cn/)根据自己的需求对应下载并安装，很简单过程不赘述，安装完成之后，打开命令行工具(win+r，然后输入cmd)，输入 node -v，如下图，如果出现相应的版本号，则说明安装成功。 10 | 11 | ![](https://raw.githubusercontent.com/Kathybren/img/master/images/3868852-e27ffe7726909c64.png) 12 | 13 | 说明一下官网下载安装node.js后，就已经自带npm（包管理工具）了，另需要注意的是node版本要高于4.0，npm的版本最好是3.x.x以上，以免对后续产生影响。 14 | 15 | ![](https://raw.githubusercontent.com/Kathybren/img/master/images/3868852-e27ffe7726909c64.png) 16 | 17 | 2.安装webpack，打开命令行工具输入：npm install webpack -g，安装完成之后输入 webpack -v，如下图，如果出现相应的版本号，则说明安装成功。 18 | 说明一下，由于很多都是国外的，如果网速比较慢可以安装淘宝镜像（不懂可自行百度） 19 | 20 | ![](https://raw.githubusercontent.com/Kathybren/img/master/images/3868852-78ae4207e9848e99.png) 21 | 22 | 3.安装vue-cli脚手架构建工具，打开命令行工具输入：npm install vue-cli -g，安装完成之后输入 vue -V（注意这里是大写的“V”），如下图，如果出现相应的版本号，则说明安装成功。 23 | 24 | ![](https://raw.githubusercontent.com/Kathybren/img/master/images/3868852-6efbfe25b7a6f757.png) 25 | 26 | ## 准备工作完成后就可以开始vue-cli项目 27 | 在硬盘上找一个文件夹放工程用的。这里有两种方式指定到相关目录：①cd 目录路径 ②如果以安装git的，在相关目录右键选择Git Bash Here 28 | 29 | 1.vue init webpack vue-system 通过webpack初始化一个项目，根据提示做出相应的选择，个人建议安装vue-router、ESLint(代码规范，建议养成习惯) 30 | 31 | 2. 32 | ``` 33 | cd vue-system 34 | npm install 35 | npm run dev 36 | ``` 37 | 38 | ![](https://raw.githubusercontent.com/Kathybren/img/master/images/QQ%E6%88%AA%E5%9B%BE20171110155148.png) 39 | 40 | 3.恭喜你已经成功一大步 41 | ## 配置脚手架 42 | 43 | 1.打开.eslintrc.js文件，在rules下配置 44 | ``` 45 | 'eol-last': 0, // 不检测文件末尾有空行 46 | 'space-before-function-paren': 0 47 | ``` 48 | 2.如果需要使用scss可 49 | ``` 50 | npm install node-sass --save-dev 51 | npm install sass-loader --save-dev 52 | ``` 53 | 3.引入Element ui 54 | ``` 55 | npm i element-ui -S 56 | ``` 57 | 58 | 配置element-ui。 59 | 60 | 在src下的main.js引入element-ui 61 | 62 | ```src/main.js``` 63 | 64 | ``` 65 | import ElementUI from 'element-ui' 66 | import 'element-ui/lib/theme-chalk/index.css' 67 | 68 | Vue.use(ElementUI) 69 | ``` 70 | 4.重置样式 71 | 在src新建common文件夹，放一些公共样式配置等 72 | ``` 73 | cd common 74 | mkdir css 75 | touch ./css/reset.css 76 | ``` 77 | 在reset.css里面写重置样式 78 | 然后在main.js引入 79 | ``` 80 | src/main.js 81 | ``` 82 | ``` 83 | import './common/css/reset.css' 84 | ``` 85 | 先配置这么多，后面面需要什么再根据自己的需求就行配置 86 | ## 从登陆页开始 87 | ### 创建登陆页面 88 | 89 | ``` 90 | cd src 91 | mkdir pages 92 | touch ./pages/Login.vue 93 | ``` 94 | 95 | ```src/pages/Login.vue``` 96 | 97 | ``` 98 | 103 | ``` 104 | 105 | 注意template下只能有一个根 106 | 107 | 2.配置路由 108 | 109 | 进入src下的App.vue，删除脚手架自带的组件，剩余如下 110 | 111 | ``` 112 | 117 | 118 | 123 | ``` 124 | 125 | 然后进入router下的index.js删除多余项剩下 126 | 127 | ```src/router/index.js``` 128 | ``` 129 | import Vue from 'vue' 130 | import Router from 'vue-router' 131 | 132 | Vue.use(Router) 133 | 134 | export default new Router({ 135 | routes: [ 136 | ] 137 | }) 138 | ``` 139 | ok一切准备就绪 140 | 141 | 引入Login组件，然后配置路由 142 | 143 | ``` 144 | import Login from '../pages/Login' 145 | 146 | routes: [ 147 | { 148 | path: '/', 149 | redirect: '/login' 150 | }, 151 | { 152 | path: '/login', 153 | name: 'Login', 154 | component: Login 155 | } 156 | ] 157 | ``` 158 | 159 | 然后 ```npm run dev```你会发现浏览器出现Login 160 | 161 | 填充登陆页面 162 | 163 | template部分 164 | ``` 165 |
166 |
167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 177 |

Tips : 用户名和密码随便填。

178 | 179 |
180 |
181 | ``` 182 | script部分 183 | ``` 184 | 214 | ``` 215 | 样式部分 216 | ``` 217 | 241 | ``` 242 | 这时浏览器会出现 243 | 244 | ![](https://raw.githubusercontent.com/Kathybren/img/master/images/QQ%E6%88%AA%E5%9B%BE20171113131331.png) 245 | 246 | ### 开始内容部分 247 | 首先内容区会分成3个部分头部、侧边栏和显示内容区域 248 | 在src下的components建立Header、Home、Slider组件 249 | ``` 250 | touch ./src/components/Header.vue 251 | touch ./src/components/Home.vue 252 | touch ./src/components/Slider.vue 253 | ``` 254 | 编写Header组件 255 | ```src/components/Header.vue``` 256 | 257 | template部分 258 | ``` 259 | 276 | ``` 277 | script部分 278 | ``` 279 | 297 | ``` 298 | 样式部分 299 | ``` 300 | 326 | ``` 327 | 2.编写Slider组件 328 | ```src/components/Slider.vue``` 329 | 330 | template部分 331 | ``` 332 | 362 | ``` 363 | script部分 364 | ``` 365 | 405 | ``` 406 | 说明一下items是想要展示的选项 407 | 408 | 样式部分 409 | ``` 410 | 424 | ``` 425 | 3.编写Home组件 426 | ```src/components/Home.vue``` 427 | 428 | template部分 429 | ``` 430 | 441 | ``` 442 | script部分 443 | ``` 444 | 453 | ``` 454 | 样式部分 455 | ``` 456 | 472 | ``` 473 | 配置路由 474 | ``` 475 | import Home from '../components/Home' 476 | { 477 | path: '/home', 478 | name: 'Home', 479 | component: Home 480 | } 481 | ``` 482 | 重启服务然后登陆 483 | 484 | 你会发现 485 | 486 | ![](https://raw.githubusercontent.com/Kathybren/img/master/images/QQ%E6%88%AA%E5%9B%BE20171113162555.png) 487 | 488 | ### 新建各个选项页面 489 | ```src/pages``` 490 | ``` 491 | mkdir Base 492 | mkdir Introduction 493 | mkdir Axios 494 | touch ./pages/Base/Base.vue 495 | touch ./pages/Introduction/Introduction.vue 496 | touch ./pages/Axios/Axios.vue 497 | ``` 498 | 配置路由 499 | ```src/router/index.js``` 500 | ``` 501 | import Introduction from '../pages/Introduction/Introduction' 502 | import Base from '../pages/Base/Base' 503 | import Axios from '../pages/Axios/Axios' 504 | ``` 505 | ``` 506 | routes: [ 507 | { 508 | path: '/', 509 | redirect: '/login' 510 | }, 511 | { 512 | path: '/login', 513 | name: 'Login', 514 | component: Login 515 | }, 516 | { 517 | path: '/home', 518 | name: 'Home', 519 | component: Home, 520 | children: [ 521 | { 522 | path: '/', 523 | name: 'Introduction', 524 | component: Introduction 525 | }, 526 | { 527 | path: '/base', 528 | name: 'Base', 529 | component: Base 530 | }, 531 | { 532 | path: '/axios', 533 | name: 'Axios', 534 | component: Axios 535 | } 536 | ] 537 | } 538 | ] 539 | ``` 540 | 配置完成。可以在各个页面填写内容 541 | 542 | 其他就不赘述了，想要什么功能，直接去element-ui拷贝 543 | 544 | 下面主要说明一下Axios 545 | 546 | 1.安装axios 547 | 548 | ```npm install axios``` 549 | 550 | 一般数据请求这块，会统一做个封装 551 | 552 | 在src新建api文件夹,然后分别建index.js、confing.js 553 | ``` 554 | mkdir api 555 | touch ./api/index.js 556 | touch ./api/config.js 557 | ``` 558 | 配置axios 559 | 560 | ```src/api/config.js``` 561 | ``` 562 | import axios from 'axios' 563 | import qs from 'qs' // POST传参序列化 564 | axios.defaults.timeout = 5000 565 | // axios.defaults.headers.post['Content-Type'] = 'application/x-www=form-urlencoded' 566 | 567 | export default { 568 | fetchGet(url, params) { 569 | return new Promise((resolve, reject) => { 570 | axios.get(url, params).then(res => { 571 | resolve(res.data) 572 | }).catch(error => { 573 | reject(error) 574 | }) 575 | }) 576 | }, 577 | fetchPost(url, data = {}) { 578 | return new Promise((resolve, reject) => { 579 | axios.post(url, qs.stringify(data)).then(res => { 580 | resolve(res.data) 581 | }).catch(error => { 582 | reject(error) 583 | }) 584 | }) 585 | } 586 | } 587 | ``` 588 | 2.如果请求一个接口怎么办？ 589 | 590 | 以下是在qq音乐上随便找的一个接口 591 | 592 | 因为存在跨域，这里用代理解决， 593 | 594 | 打开根目录下的fonfig/index配置一下proxyTable 595 | ``` 596 | proxyTable: { 597 | '/api': { 598 | target: 'https://c.y.qq.com', 599 | changeOrigin: true, 600 | pathRewrite: { 601 | '^/api': '' 602 | } 603 | } 604 | } 605 | ``` 606 | 3.打开src下的api/index.js 607 | 608 | ```src/api/index.js``` 609 | ``` 610 | import http from './config' 611 | export const getList = (params) => { 612 | return http.fetchPost('/api/v8/fcg-bin/v8.fcg', params) 613 | } 614 | ``` 615 | 4.请求数据 616 | 617 | 打开Axios文件 618 | 619 | ```src/pages/Axios/Axios.vue``` 620 | ``` 621 | 626 | 661 | 666 | ``` 667 | 点一下看看控制台。 668 | 669 | OK!基础教程到此结束，如果对你有些许帮助，请不要吝惜你的star --------------------------------------------------------------------------------