vue2 0與express構建淘票票頁面

2021-07-26 23:08:08 字數 1390 閱讀 1906

寫這個專案的目的一是為了學習vue2.0相關的知識點,二是為了給他想要了解vue2.0的童鞋提供乙個學習demo。所以為了使這個專案更加完整,專案中加入乙個server服務,模擬伺服器環境,為前端提供資料**,當用npm run deploy命令執行前端環境時,就可以直接將前端資源部署到server服務裡。因此本專案有兩個環境,乙個是前端開發環境(埠是8080),乙個是server服務環境(埠是9090)。

主要技術棧:

git clone .git
開啟乙個終端(稱這個終端為a終端)進入到vue2.0-taopiaopiao目錄安裝依賴包

npm install
開啟另乙個乙個終端(稱這個終端為b終端)進入到server目錄安裝依賴包

npm install
啟動server服務(得先啟動後台服務,否則前端頁面沒有資料),在server目錄下執行以下命令,成功執行會終端會提示服務埠號為9090

npm run start
啟動前端開發服務,在vue2.0-taopiaopiao目錄裡執行以下命令,成功執行後,會自動開啟瀏覽器訪問前端開發環境,瀏覽位址是http://localhost:8080

npm run dev

npm run deploy

本專案是手動抓取淘票票部分資料,資料是16年12月份的,城市資料只有北上廣有資料,其它城市都是隨機從北上廣資料抽取過來的,電影資料也是部分有資料。抓取的資料存放在server目錄裡的database裡,供前端呼叫。

部分資料介面

引數說明: city可以為bj、sh、gz

引數說明: limit為每次請求的資料數量,offset為所有資料的偏移量

引數說明: city可以為bj、sh、gz

使用VUE2 0構建webpack專案

1 vue構建webpack專案需要依賴於node 和npm 需要先安裝。輸入node v回車 會出現node版本號 輸入npm v回車 會出現npm版本號 2 安裝vue npm install g vue cli g表示全域性安裝,vue cli是模組 或者使用 映象 npm install r...

Vue2 0 事件發射與接收

由於vue2.0 移除了1.0中的 dispatch 和 broadcast 這兩個元件之間通訊傳遞資料的方法 官方的給出的最簡單的公升級建議是使用集中的事件處理器,而且也明確說明了 乙個空的vue例項就可以做到,因為vue 例項實現了乙個事件分發介面.new vue 好的 這個時候 你就可以一勞永...

vue2 0學習記錄

1 在main.js可註冊全域性元件,vue.components 元件名稱 元件名 import 元件名 from components 元件檔案 3 元件的標籤名不可與系統的html標籤重複 4 父元件向子元件傳值 父元件有乙個陣列 users 在父元件模板中的子元件標籤中接收 users us...