Vue發(fā)布項目實例講解

項目完成之后，當然不能滿足于在我們的開發(fā)環(huán)境下跑一跑。我們可以打包發(fā)布到服務器上，讓大家一起來欣賞一下你的作品。

那么 vue 項目如何打包發(fā)布呢，新建的項目目錄下通常都有一個 README.md 的文件，里面就描述了發(fā)布的步驟：

下面這個是 vue-cli 3.x 創(chuàng)建的項目中的 README.md 文件內(nèi)容：

# 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 目錄，里面只有靜態(tài) html 和 js 文件。

打包

npm run build

運行上面的命令， 運行完成后就可以看到項目的根目錄下面多了一個 dist 目錄：

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

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

寫在最后

這個小項目其實瑕疵很多，包括登錄后的邏輯，發(fā)布文章時登錄的驗證等等，但這個項目畢竟是一個用來熟悉 vue框架的。因此若羽并沒有打算在這個項目上花太多功夫，讓其變成一個完整的、簡潔的、真實可用的博客系統(tǒng)（其實已經(jīng)完成大半的功能了），畢竟這樣對于新手來說引入了太多不相關(guān)的因素，不能很好的專注在如何使用vue上。相信從頭一步跟著文章學到這里的童鞋已經(jīng)能夠自己寫出來一個真正的博客系統(tǒng)了，除了后端接口以外，不過這里我們可以使用 postman的 mock功能，系列文章中也有相關(guān)教程。

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

后續(xù)的文章會開始實踐如何優(yōu)雅的寫代碼了。好的代碼會增加可讀性，降低團隊協(xié)作的溝通成本，同時也能增強項目的可維護性、可擴展性等等。

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

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

這不是優(yōu)秀，不是生存寶典，而是不負責任?。。?/p>

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

不關(guān)從事哪一行，都要努力讓自己變得更優(yōu)秀，而不是搗亂。

代碼越爛，那么越難以和別人溝通，如何進步？并且團隊其他人無法閱讀和維護，如何保持和同事在項目上的和諧？以后面試時，和面試官說曾經(jīng)有一個只有你自己才能維護的系統(tǒng)，自己用了多少手段讓同事沒辦法看懂代碼么？如此作為，實在損人不利己。

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

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

為自己的代碼負責，為自己負責。

從個人的角度：

• 可以讓自己的代碼更具可讀性，不再害怕歷史代碼
• 方便的與他人交流
• 鍛煉自己的思維，每一個變量名，函數(shù)名，文件名的思考都能讓自己的思路更加清晰，每一個文件存在的位置，讓自己對于項目的結(jié)構(gòu)有著更清晰的認知

這里推薦兩本書：

《代碼整潔之道》

《重構(gòu)改善既有代碼的設計》

很值得一看。

以上就是本次介紹的全部知識點內(nèi)容，感謝大家的閱讀和對億速云的支持。