L16-Vue-项目-黑马头条

目录

• 开发文档 - 黑马头条
  • src目录树
  • src文件
    • @/main.js
    • @/router/index.js
    • @/store/index.js
    • @/views/login/index.vue
    • @/views/layout/index.vue
    • @/api/user.js
    • @/utils/request.js
    • @/utils/storage.js
  • 今日内容-2022-05-20
  • 今日内容-2022-05-23

开发文档 - 黑马头条

src目录树

D:.
│  App.vue
│  main.js
│
├─api
│      user.js
│
├─assets
├─components
├─router
│      index.js
│
├─store
│      index.js
│
├─styles
│      icon.css
│      icon.less
│      index.css
│      index.less
│
├─utils
│      request.js
│
└─views
    │  test.vue
    │
    └─login
            index.vue

src文件

@/main.js

入口文件

事件	函数 / 模块	说明
挂载	router
	store
	render: h => h(App)

@/router/index.js

路由文件

路径	组件	说明
/login	() => import('@/views/login')	登录组件

​

@/store/index.js

Vuex

构造器	属性 / 方法	参数	说明
state	user		user登录信息
mutations	setUser(state, user)	state: Object state构造器 user: Object user登录信息对象	设置user
actions

@/views/login/index.vue

登录组件

事件	方法	异步	说明
表单提交	onLogin()	是
发送验证码	onSend()	是

@/views/layout/index.vue

[TODO]

@/api/user.js

用户相关请求模块

事件	方法	参数	type	说明
用户登录	login(data)	data: { mobile: Number, code: String }	POST
发送验证码	sendSms(mobile)	mobile: String	GET

@/utils/request.js

工具方法 - axios请求模块

对象	说明
request	axios请求对象

@/utils/storage.js

封装 本地存储

事件	方法	参数	说明
获取localStorage	getItem(key)	key: String
设置localStorage	setItem(key, val)	key: String val: String
移除localStorage	removeItem(key)	key: String

今日内容-2022-05-20

1. @/views/layout/index.vue 个人中心 - TabBar - 布局layout

   

2. 复习：css中background-size的几个参数(cover, )的区别

   

   contain: 以长宽中较长的边为准，有白边，不会剪切图片，不会拉伸图片
   cover: 以长宽中较短的边为准，没有白边，会剪切图片，不会拉伸图片
   fill: 没有白边，不会剪切图片，会拉伸图片
   

3. 复习：flex布局中justify-content的几个参数( flex-start | flex-end |center | space-between | space-around )的区别

   flex-start | flex-end |center

   

   space-between | space-around

   

4. flex布局时使用align-items，当前盒子要给一个height高度

5. PS测量失败

今日内容-2022-05-23

1. 取消之前设置的max-width

2. flex布局下，可以通过为子元素设置 flex-shrink: 0 让其不参与flex子元素的空间计算