（一）今日头条后台管理项目

01-项目-简单介绍

​ （理解今日头条）的后台管理系统，个人的后台管理系统，发布文章新闻不便利，需要这个PC的系统。

• 登录
• 欢迎页面
• 发布文章
• 素材管理
• 内容管理
• 粉丝管理
• 评论管理
• 个人设置

02-项目-准备工作

• vue基础
• vue的插件 vue-router
• 需要数据 axios
• 需要后台接口
• 使用UI框架 element-ui 饿了么前端团队UI组件库
  • 基于 vue 的框架
  • 快速构建一个PC端的后台管理系统界面
• vue-cli 2个版本
  • 使用 3.0 版本

03-项目-初始化

使用是3.0 版本初始化项目：

安装：

# 安装过旧版本 先卸载 npm un vue-cli -gnpm install -g @vue/cli

初始化：

vue create hm-toutiao-77

步骤：

1. 自定义创建项目

babel是转换ES6语法插件

linter 约束代码风格插件 eslint

css 预处理器

2. 选中less这个预处理器

3. 选择标准的 语法风格

4. 保存代码检查代码风格 和 提交代码检查并尝试修复

5. 将插件的配置信息记录在各自的配置文件内

6. 意思：是否保存刚才的操作记录，将来创建新项目的时候，直接创建。

创建完毕后：

切换到 项目 目录 执行 启动项目

npm run serve

访问：http://localhost:8080 即可

04-项目-结构说明

了解外层目录：

重点src目录：

├─api#封装axios├─assets│├─fonts│└─images├─components #公用级别组件├─directive #指令├─filter #过滤器├─router #路由├─store #本地存储├─style #less└─views #路由级别组件└─App.vue 根组件└─main.js 入口文件

05-项目-分支管理

• master 上线分支
• 其他分支 开发功能

分支作用:

• 一个人分功能模块分别去进行开发
• 多个人拥有不同的分支，同时进行开发，协同开发。

https://gitee.com/stolenbytime/jay01

项目的代码托管github:

1. 创建远程仓库 保证是空仓库
2. 提交本地仓库代码：

# 给你的仓库地址去别名git remote add origin git@github.com:zhousg/hm-toutiao-77.git# 提交到origin地址git push -u origin master

06-项目-使用element-ui

安装：

# -S 等同 --save作用：包的依赖记录在生产依赖匹配项中npm i element-ui -S

完整引入：

import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

校验：

<div id="app">App <el-button type="success">成功按钮</el-button></div>

07-项目-配置vscode的eslint插件

安装：

配置：

"eslint.validate": ["javascript","javascriptreact",{"language": "html","autoFix": true},{"language": "vue","autoFix": true}],"eslint.autoFixOnSave": true,

设置按钮—》右上角｛｝----》添加内容。

08-项目-使用vue-router

安装：

# npm 5.0 上 是不要带上 -S --savenpm i vue-router 

定义router的初始化代码：

// 定义router对象导出给main.js使用import VueRouter from 'vue-router'import Vue from 'vue'Vue.use(VueRouter)const router = new VueRouter({// 路由规则配置routes: []})export default router

在vue根实例挂载router对象

// @ 是某一个路径别名src路径别名在vue-cli创建的项目下才可是呀// 目录下是有默认索引文件 index.js 就是索引文件.js .vue .jsonimport router from '@/router'

new Vue({+router,render: h => h(App)}).$mount('#app')

09-项目-路由规则分析

约定路由规则：

10-登录模块-路由及组件创建

开始一个新的功能：

• 创建分支 git branch login
• 切换分支 git checkout login
• coding (每完成一个小功能，提交一次代码)
• 切换master分支 git checkout master
• 合并分支 git merge login

创建组件：

<template><div class='container'>Login</div></template><script>export default {}</script><style scoped lang='less'></style>

配置路由：

// 路由规则配置// name的作用给当前路由规则取名$router.push('/login')或者 $router.push({name:'login'})routes: [{ path: '/login', name: 'login', component: Login }]

定义出口：

<div id="app"><router-view></router-view></div>

11-登录模块-基础布局

<template><div class='container'><el-card class="my-card"><img src="../../assets/images/logo_index.png" alt=""></el-card></div></template><script>export default {}</script><style scoped lang='less'>.container{position: absolute;width: 100%;height: 100%;// 背景图定位 / 背景图尺寸 contain 等比缩放完整在容器内显示cover等比缩放完全铺面容器background: url(../../assets/images/login_bg.jpg) no-repeat center / cover}.my-card{width: 400px;height: 350px;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-60%);img{display: block;width: 200px;margin: 0 auto;}}</style>

注意： index.less 的文件写全局样式

import '@/style/index.less'

###12-style标签的scoped的作用

• scoped 作用域 作用范围
• style 的样式仅仅在当前组件下生效
• https://vue-loader.vuejs.org/zh/guide/scoped-css.html

原理：

• data-v-37dfd6fc 属性在当前组件暴露的标签上会自动加上
• 当前组件的唯一标识
• 发现：
  • .container -----> .container[data-v-37dfd6fc]
• 如果修改 非当前组件标签下的样式
  • 去全局样式修改

13-登录模块-绘制表单