DAY01-黑马头条PC
01-项目-简单介绍
今日头条，新闻客户端。不仅是浏览新闻的功能，发布新闻GPT改写。发布新闻用户，PC管理系统。登录欢迎页面内容管理素材管理发布文章评论管理粉丝管理个人设置
02-项目-准备工作
vue 基础
vue-router 路由
vue-cli 脚手架
axios 请求
后台服务在外网 api文档
element-ui
用户界面 组件库但是有自己样式风格。饿了么UI 基于VUE最流行的UI组件库学习 组件的使用套路https://element.eleme.cn/#/zh-CN
03-项目-初始化
是项目的初始化 使用 vue-cli 3.0
vue create hm-toutiao-79
第一步：选择自定义创建方式
第二步：需要的插件，babel转换ES6 linter使用代码风格检查工具 css预处理器
第三步：选中less
第四步：选择代码风格 standard 标准风格
第五步：检查代码风格的时机 保存的时候校验 提交的时候也校验
第六步：选择刚才的插件的配置存储位置，单独生成文件来记录
第七步：是否保存操作记录 是： 刚才的操作取个名字 否 不记录 n 回车即可。
开始装包…
结束后：
# 切换目录
cd hm-toutiao-79
# 运行项目
npm run serve
配置文件了解：
src目录
├─api 接口
├─assets 静态文件
│ └─images
├─components 公用组件
├─directive 指令
├─filter 过滤器
├─router 路由
├─store 本地存储
├─utils 公用工具函数模块
└─views 路由组件
└─App.vue 根组件
└─main.js 入口文件
参考即可，目录细分功能，后期好维护。
05-项目-分支管理
通过vue-cli创建的项目，初始化了git，默认已经做过一次提交。分支功能：
多人协同开发，每个人拥有一个或者多个分支，合并到同一个分支。单人开发，使用不同的分支开发不同功能，方便管理功能代码。在空文件夹添加.gitkeep,推送到远端仓库
假如 登录功能
git branch login 创建分支git checkout login 切换分支开发 多次提交
git add .git commit -m ‘备注’…完毕：
git push 远程仓库地址 login （推送分支）git checkout master （切换分支）git merge login （合并分支）期望：每一次提交记录，github上查看，比对功能实现步骤修改了那些文件。
06-项目-使用element-ui
安装
# --save 保存到生产依赖 -S
# --save-dev 保存到开发依赖 -D
# npm 5.0 版本以上省略 默认安装到生产依赖
npm i element-ui -S
使用
import Vue from 'vue';
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
+Vue.use(ElementUI);
new Vue({
el: '#app',
render: h => h(App)
});
验证：
App
07-项目-配置vscode的eslint插件
配置之前：如果使用了格式化插件，在保存的时候不使用这个插件来格式化代码。在设置中加上如下配置即可：
"eslint.validate": [
"java",
"javareact",
{
"language": "html",
"autoFix": true
},
{
"language": "vue",
"autoFix": true
}
],
"eslint.autoFixOnSave": true,
08-项目-使用vue-router
封装router模块
安装 npm i vue-routerrouter文件夹导入 import VueRouter from ‘vue-router’注册
import Vue from ‘vue’Vue.use(VueRouter )实例化
const router = new VueRouter({routes:[]})router文件夹导出
export default router使用router模块
导入vue使用中加 router选项即可
09-项目-路由规则分析
路径功能路由级别/login登录一级路由/首页一级路由└ /欢迎页面二级路由└ /article内容管理二级路由└ /image素材管理二级路由└ /publish发布文章二级路由└ /comment评论管理二级路由└ /fans粉丝管理二级路由└ /setting个人设置二级路由
10-登录模块-路由及组件创建
组件：views/login/index.vue
<>
export default {}
路由：router/index.js
const router = new VueRouter({
// 路由规则
routes: [
// name: 'login' 给当前路由取名
// 跳转使用：$router.push('/login') 或者 $router.push({name:'login'})
+ { path: '/login', name: 'login', component: Login }
]
})
定义渲染位置：App.vue
11-登录模块-基础布局
全屏容器
卡片组件
logo
<>
export default {}
12-style标签的scoped的作用
style scoped lang=‘less’scoped 作用是：让style下的样式仅在当组件下生效当组件
在组件内部出现过的标签 属于当前组件。俗话：在当前组件暴露的标签原理：
data-v-xxxx 的属性 唯一标识只会给当前组件的标签加上编译后的样式 .container[data-v-xxxxx]
/* 其他组件的样式 怎么去修改？ */
.el-card__body[data-v-xxxxx]{
background: green;
}
结论：定义一个全局样式 styles/index.less
13-登录模块-绘制表单
分析：
最终代码：
总结：使用element-ui组件的方式
根据需要找组件看组件的示例，符合需求。
找到：
示例代码分析代码自己需求使用参考提供的事例demo
找符合要求的例子分析它的源代码遇见不认识的属性 函数 事件提供详细的说明文档 属性说明 函数说明 事件说明没找到：
参考组件使用文档
属性事件函数