夕小姐這個人啊
你好，我是「前端雨爸」，希望我的回答對你有所幫助。
我認為要寫出漂亮的代碼，不光光是使用 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設計就讓專業的前端給我們開發思路，那段時間整個工作量可能都在前端，出了好多問題，因為才開始上手寫，也不懂得什麼封裝，什麼組件化，只想著趕緊把功能完成。到了今年公司前端有了人力，我們後端開發的就不用寫前端了，代碼經過好幾個迭代的重構，現在的代碼寫的很工整，能漂亮，有的自己已經看不懂了，所以還是得讓專業人幹專業事。
