一、拿到一个vue项目我们首先应该考虑什么:
- 目前的vue-cli3的版本引入了UI界面,很好用。基本上sass、element、vue-router、vuex、eslint、axios是标配。
- 考虑哪些部分可以封装成组件:
功能独立又可复用的部分应该封装,比如各种input、select、时间筛选、dialog提示弹窗 - 考虑哪些样式是公共的,用同一个类名,写在公共样式里。减小组件体积
- 考虑哪些值要放在store里,哪些用组件传值(这个很重要,因为有时组件传值很麻烦,有时用store很麻烦),哪些用$eventBus
- 重置样式表:重置margin、padding、font-family、border-color、box-sizing、a标签样式
- 公共样式:滚动条、主题色、按钮样式及hover样式,中后台的项目每个页面布局都差不多,布局也可以写在这里,个别页面添加类重写样式
- class命名建议:
外层container,内层content
文字label,数据value,文本text
头部header,主体body,底部或者按钮区域footer
标题title,主体main-content
左右布局:left-side,right-side
8.组件命名建议:
用来确认、取消的弹窗用dialog开头
功能独立的浮窗用mask开头
js中用大驼峰MyDialog, html中用-连接my-dialog
二、新手常犯的错误:
- 在html代码里写this,在js里忘记写this。导致报错
- 分不清用computed还是watch。watch是监听一个变量,常用于触发事件,或者直接修改一个变量的值。computed是有一个返回值,如果html里面用到这个值尽量用computed。
- 函数事件全部卸载mounted里。mounted里应该只写函数执行,函数生命全写在method里
- 所有函数都写在vue文件里。应该是把公用函数单独写在一个js文件里,在需要的组件中引入。如果大部分组件都用到,写在store文件里也是可以的
- vue在js中使用图片等外部资源的时候不能直接写路径,因为vue会把它识别为字符串,应该先引入import imgSubmitfrom ‘submit.png’ 再使用imgSubmit这个变量
如果有错误,请留言。有想看的内容请留言,我来写。谢谢