小白也能看懂的前端知识之六：新手怎么用vue开发及易犯错误

一、拿到一个vue项目我们首先应该考虑什么：

1. 目前的vue-cli3的版本引入了UI界面，很好用。基本上sass、element、vue-router、vuex、eslint、axios是标配。
2. 考虑哪些部分可以封装成组件：
   功能独立又可复用的部分应该封装，比如各种input、select、时间筛选、dialog提示弹窗
3. 考虑哪些样式是公共的，用同一个类名，写在公共样式里。减小组件体积
4. 考虑哪些值要放在store里，哪些用组件传值（这个很重要，因为有时组件传值很麻烦，有时用store很麻烦），哪些用$eventBus
5. 重置样式表：重置margin、padding、font-family、border-color、box-sizing、a标签样式
6. 公共样式：滚动条、主题色、按钮样式及hover样式，中后台的项目每个页面布局都差不多，布局也可以写在这里，个别页面添加类重写样式
7. class命名建议：
   外层container，内层content
   文字label，数据value，文本text
   头部header，主体body，底部或者按钮区域footer
   标题title，主体main-content
   左右布局：left-side，right-side
   8.组件命名建议：
   用来确认、取消的弹窗用dialog开头
   功能独立的浮窗用mask开头
   js中用大驼峰MyDialog, html中用-连接my-dialog

二、新手常犯的错误：

1. 在html代码里写this，在js里忘记写this。导致报错
2. 分不清用computed还是watch。watch是监听一个变量，常用于触发事件，或者直接修改一个变量的值。computed是有一个返回值，如果html里面用到这个值尽量用computed。
3. 函数事件全部卸载mounted里。mounted里应该只写函数执行，函数生命全写在method里
4. 所有函数都写在vue文件里。应该是把公用函数单独写在一个js文件里，在需要的组件中引入。如果大部分组件都用到，写在store文件里也是可以的
5. vue在js中使用图片等外部资源的时候不能直接写路径，因为vue会把它识别为字符串，应该先引入import imgSubmitfrom ‘submit.png’ 再使用imgSubmit这个变量

如果有错误，请留言。有想看的内容请留言，我来写。谢谢