L16-Vue-项目-黑马头条

开发文档 - 黑马头条

开发文档 - 黑马头条

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

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

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

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

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

flex-start | flex-end |center

space-between | space-around
flex布局时使用align-items，当前盒子要给一个height高度
PS测量失败