基於vue搭建乙個簡易版豆瓣

前段日子業餘時看了下vue，想著怎麼也得寫個例項來加深一下，於是便基於vue構建了乙個簡易版豆瓣。由於工作中使用的並不是vue框架，對vue的了解也不夠深入，這也是本人第一次寫技術博文，因此，有紕漏之處還請大家批評指正。

專案簡介：本專案主要是基於vue，構建乙個簡易版豆瓣，實現將讀書、電影、**、同城活動等內容按不同型別顯示的功能。

技術棧：vue + vuex + vue-router + axios + webpack + es6，本專案使用vue-cli搭建，以vue為基礎，使用vuex管理資料、vue-router分發路由、axios請求資料。

開發環境：node v8.1.2，npm 5.0.3，瀏覽器：google chrome 65.0.3325.146/firefox 58.0.2

執行專案前，請確保本機已經正確安裝好node環境。

git clone

npm install

npm run dev

執行完畢後，根據命令列視窗提示在瀏覽器輸入訪問位址即可。

本專案主要分為四大模組：讀書、電影、**、同城活動，以下是各個模組的部分截圖：

如果你還沒有接觸過vue，可以先看看vue官方教程，畢竟官方文件才是最好的學習資料。如果你對es6語法還不是很熟，也可以看看阮一峰老師的ecmascript 6入門，當然，邊做專案時邊學習才是最高效的。以下是我自己在本專案的開發流程與思路，僅供參考：

因此，一開始，我們先設定好這個頁面的路由，再根據頁面結構大致建立為三個空的元件，存放在相應位置上，再將路由對映到這些元件上，**如下。關於路由的具體設定可以參見vue-router官方文件，更多關於路由的設定可以參見源**。

const baseheader = () => import('../components/common/baseheader.vue')
const booktag = () => import('../components/book/booktag.vue')
const booktagcontent = () => import('../components/book/booktagcontent.vue')
export default new router(,}]
})

以上便是我個人在專案的開發流程，當然只是個人經驗，實際開發中並不一定要按照這個流程進行。

通過上述的設定，主要有兩個作用，乙個是簡化url，請求時省略字首，乙個是在本機開啟乙個服務**你的請求，以解決跨域問題，詳情可參見proxytable設定，這樣，我們這樣傳送網路請求：

const actions = , ) 
}).then(response => )
commit(types.set_current_tag_books, )})}
}

這是本人第一次寫技術部落格，還是有些戰戰兢兢，寫的不好的地方，所以還請大家多批評指正。另外，歡迎向star本專案哦~

基於vue搭建乙個簡易版豆瓣

寫乙個自己的簡易版vue

從頭實現乙個簡易版React（一）

實現乙個簡易版的Tomcat 十二

基於vue搭建乙個簡易版豆瓣

寫乙個自己的簡易版vue

從頭實現乙個簡易版React（一）

實現乙個簡易版的Tomcat 十二

相關推薦