夕小姐这个人啊
你好，我是「前端雨爸」，希望我的回答对你有所帮助。
我认为要写出漂亮的代码，不光光是使用 Vue 这一语言的问题。任何编程语言，甚至哪怕我们手写文字都是一样的。
字如其人，相信代码也能反映出这人的功底水平。
我想说，有这方面困扰的同学在这两方面努力：
脚手架
向主流的前端框架，都有自带的脚手架工具，像 vue 就有 vue-cli，我们完全可以用它来帮助我们第一时间生成“规范”的项目结构。
你看下如下项目目录的结构，是不是很快能定位所要的文件？
对于初学者来说，这样可以说是最佳实践了。当你经验越来越丰富，团队有更高的需要时，可以再完善修改。
编程语言设计思想
编程语言中，有一个概念叫做模板代码，通俗的讲：就是一大堆类似，或者 Ctrl C，Ctrl V 的重复代码。
你想象下，项目里一堆组件在加载后都做着同样的事情（比如，加载用户信息），项目小没事，凡是一个大项目，可能一个需求的变更，会涉及到多个文件的更改，在没有高覆盖的测试体系下，这是相当恐怖的。
所以，就 Vue 而言，你可能就要思考：是否可以多用用 extends、或者 mixins 之类的属性 api 了。
你可以在我的头条号里，找到类似的文章：
最后
代码不光光自己看的舒服，更要让协作者，或者团队成员都赏心悦目。
有些东西不是一时间就能登峰造极的，需要平时逐步积累。希望大家的 coding 水平很越来越强。
欢迎关注「前端雨爸」，让我们一同在前端路上成长进步。
前端雨爸
本文参考自油管上某个国外大神的公开演讲视频，学习了一下觉得很不错，所以在项目中也使用了这些不错的技巧。
下面就分享几个简单的技巧让你写出的vue.js代码更优雅
如果参数比较多，比如上图
- 关键字筛选，
- 区域筛选，
- 设备ID筛选，
- 分页数，
- 每页几条数据，
可能会是这样：
不过这么写，明显有问题，主要是watch了很多参数，而且函数的处理都差不多，可以修改一下，通过methods处理。
当然这么写，需要在模板里面每个参数change的地方绑定事件，并传递参数值,比如分页change时：
相比上面的各种watch，代码明显少了很多，但是还有一个问题，那就是要在template的很多地方绑定change事件。
最后，当然是使用我们重点推荐的computed + watch了。
2. 使用mixin提取公共部分
- 很多列表页其实使用的很多属性都是一样的，比如：
- 分页 page
- 数量 size
- 搜索关键 字keyword
- 表格数据 tableData
这些公共的部分其实可以通过mixin来提取出来。
在要用到的页面。
3. 自动注册全局组件
正常情况下，我们需要使用一个我们自己封装的组件时，需要先引入，再注册，最后才能在template模板中使用。
当有多个页面需要用到这些组件时，那么就需要在每个需要的页面重复这些步骤。
为了简化这些步骤，可以考虑把这些组件作为全局组件来使用，这样每个页面需要时，就可以直接使用了。
不过还有一个问题，那就是需要我们手动的全局注册。
当组件多了以后，手动注册也变得繁琐起来，可以通过require.context()实现自动注册组件。
4. 自动注册vuex模块
之前我们是这么注册vuex模块的：
可以发现每个模块都要我们手动导入，然后加入到module里面，如此重复。
当模块不多还好，假如项目大了，有50个模块，那就得要做很多重复的工作。 跟注册组件一样，我们还是利用require.context来实现。
AI智慧
首先编码方面，template部分使用pug语法，可以简化大部分标签的书写。css部分可以选用less之类的包，在写样式时用大括号嵌套，每个块的样式分离开。每个组件的样式应该写在组件内部，并加上scoped标记避免污染其他组件，应该尽量避免定义使用全局样式。script部分建议用上vue-class-component，用装饰器的语法，代码结构一目了然，也可以用ts。当然vue代码要好看，合理设计结构很重要，将可复用的部分抽象成组件，将逻辑代码和功能代码分离。定时重构项目，将可复用的部分单独分离开来，做成npm包发布，或者使用bit来管理公共组件，实现多项目复用。
合理利用格式化工具，在项目根目录定义prettier的配置文件，本地或者全局安装prettier的包，在提交git或者发布代码前，做一次全局格式化，紧接着可以再做一下eslint的autofix，然后再打包发布。当然如果使用了vscode的话，设置下保存时自动格式化也是可以的。
李小花你怎么搞得
子组件向父组件传值，为了增加回调函数的复用性，事件绑定采用函数式编程，但是总是不能正确调用实例方法返回的函数：12345678910111213<slidedown>data () { message: { prodMoneyOff: ''}}, methods: {receiveData (item) { let _self = thisconsole.log(`选择的item是${item}`) return function (val) { console.log(`传递的值是 ${val}`)_self.message[item] = val}}} ------------- 如果我回答对你有帮助，请关注我一下。或有其他问题也可以关注我，给我发私信
柚子爱唱歌
格式化一下代码吧，主要还是看用的什么IDE
我只是一个码农
说说自己的亲身经经历吧。公司当时新起了一个项目用于前端开发人少，就让后端开发的同事用vue画页面，完成前端功能的开发，给了一周的学习时间，大概知道怎么回事就上手写了，不知道就百度，复杂的ui设计就让专业的前端给我们开发思路，那段时间整个工作量可能都在前端，出了好多问题，因为才开始上手写，也不懂得什么封装，什么组件化，只想着赶紧把功能完成。到了今年公司前端有了人力，我们后端开发的就不用写前端了，代码经过好几个迭代的重构，现在的代码写的很工整，能漂亮，有的自己已经看不懂了，所以还是得让专业人干专业事。
