快捷導(dǎo)航

Vue發(fā)布項(xiàng)目實(shí)例講解

更新時(shí)間：2019年07月17日 08:40:57 作者：若羽。

在本篇文章里小編給各位分享的是關(guān)于Vue發(fā)布項(xiàng)目的實(shí)例內(nèi)容以及知識(shí)點(diǎn)講解，需要的朋友們參考下。

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

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

下面這個(gè)是 vue-cli 3.x 創(chuàng)建的項(xià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

這運(yùn)行這一條命令就可以將項(xiàng)目打包成一個(gè) dist 目錄，里面只有靜態(tài) html 和 js 文件。

打包

npm run build

運(yùn)行上面的命令，運(yùn)行完成后就可以看到項(xiàng)目的根目錄下面多了一個(gè) dist 目錄：

打開(kāi)我們可以看到一個(gè) index.html，但是你直接打開(kāi)是一片空白的。

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

寫(xiě)在最后

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

所有文章中的接口均是來(lái)自 postman 的 mock 功能噢。

后續(xù)的文章會(huì)開(kāi)始實(shí)踐如何優(yōu)雅的寫(xiě)代碼了。好的代碼會(huì)增加可讀性，降低團(tuán)隊(duì)協(xié)作的溝通成本，同時(shí)也能增強(qiáng)項(xiàng)目的可維護(hù)性、可擴(kuò)展性等等。

從另一方面來(lái)看，代碼能寫(xiě)的更好，為什么要寫(xiě)的差呢？

請(qǐng)務(wù)必?zé)o視網(wǎng)絡(luò)中流傳的所謂代碼越爛越好，最好寫(xiě)到只有自己才能看得懂的地步，才會(huì)成為公司不可或缺的中流砥柱。

這不是優(yōu)秀，不是生存寶典，而是不負(fù)責(zé)任?。?！

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

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

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

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

因此，若羽在這里倡導(dǎo)并向大家提出建議：

為自己的代碼負(fù)責(zé)，為自己負(fù)責(zé)。

從個(gè)人的角度：