淺入深出Vue：釋出專案

專案完成之後，當然不能滿足於在我們的開發環境下跑一跑。我們可以打包釋出到伺服器上，讓大家一起來欣賞一下你的作品。

那麼 vue 專案如何打包釋出呢，新建的專案目錄下通常都有一個 README.md 的檔案，裡面就描述了釋出的步驟：

下面這個是 vue-cli 3.x 建立的專案中的 README.md 檔案內容：

# firstpage

## Project setup

npm install

### Compiles and hot-reloads for development

npm run serve

### Compiles and minifies for production

npm run build

### Run your tests

npm run test

### Lints and fixes files

npm run lint

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

這裡描述了常用的指令，我們需要的那一條就是：

npm run build

這執行這一條命令就可以將專案打包成一個 dist 目錄，裡面只有靜態 html 和 js 檔案。

打包

npm run build

執行上面的命令， 執行完成後就可以看到專案的根目錄下面多了一個 dist 目錄：

開啟我們可以看到一個 index.html，但是你直接開啟是一片空白的。

這裡就需要將其託管到一個 web容器中，比如 iis, apache, nginx等等，有興趣的童鞋可以自己搭建上述中的一個然後將打包的目錄上傳上去看看效果。

寫在最後

這個小專案其實瑕疵很多，包括登入後的邏輯，釋出文章時登入的驗證等等，但這個專案畢竟是一個用來熟悉 vue框架的。因此若羽並沒有打算在這個專案上花太多功夫，讓其變成一個完整的、簡潔的、真實可用的部落格系統（其實已經完成大半的功能了），畢竟這樣對於新手來說引入了太多不相關的因素，不能很好的專注在如何使用vue上。相信從頭一步跟著文章學到這裡的童鞋已經能夠自己寫出來一個真正的部落格系統了，除了後端介面以外，不過這裡我們可以使用 postman的 mock功能，系列文章中也有相關教程。

所有文章中的介面均是來自 postman 的 mock 功能噢。

後續的文章會開始實踐如何優雅的寫程式碼了。好的程式碼會增加可讀性，降低團隊協作的溝通成本，同時也能增強專案的可維護性、可擴充套件性等等。

從另一方面來看，程式碼能寫的更好，為什麼要寫的差呢？

請務必無視網路中流傳的所謂程式碼越爛越好，最好寫到只有自己才能看得懂的地步，才會成為公司不可或缺的中流砥柱。

這不是優秀，不是生存寶典，而是不負責任！！！

成為公司中流砥柱、受部門領導和同事認可或者是更優秀的人，不是想著取巧，而是要真材實料（不一定是編碼能力，比如能很好協調和同事之間的關係，可以為領匯出謀劃策，可以為團隊帶來歡樂、技術提升等等）。

不關從事哪一行，都要努力讓自己變得更優秀，而不是搗亂。

程式碼越爛，那麼越難以和別人溝通，如何進步？並且團隊其他人無法閱讀和維護，如何保持和同事在專案上的和諧？以後面試時，和麵試官說曾經有一個只有你自己才能維護的系統，自己用了多少手段讓同事沒辦法看懂程式碼麼？如此作為，實在損人不利己。

這樣達到中流砥柱的背後，不過是窮途末路後的掙扎而已。如此行為，誰還能信任你，哪天埋個雷把大家都 boom 了麼。

因此，若羽在這裡倡導並向大家提出建議：

• 為自己的程式碼負責，為自己負責。

從個人的角度：

• 可以讓自己的程式碼更具可讀性，不再害怕歷史程式碼

• 方便的與他人交流

• 鍛鍊自己的思維，每一個變數名，函式名，檔名的思考都能讓自己的思路更加清晰，每一個檔案存在的位置，讓自己對於專案的結構有著更清晰的認知

這裡推薦兩本書：

• 《程式碼整潔之道》

• 《重構改善既有程式碼的設計》

很值得一看。