Vue.js學習記錄-8-Vue去哪兒網專案實戰:首頁開發-環境搭建
阿新 • • 發佈:2018-11-12
專案實戰
1. 首頁開發
-
環境搭建
開發環境:node.js、Vue-cli腳手架工具
開發IDE:VScode
版本控制工具:Git
檢查環境搭建結果:
關於Vue-cli: Vue提供的官方命令列工具,可用於快速搭建大型單頁應用。該工具為現代化的前端開發工作流提供了開箱即用的構建配置。只需幾分鐘可建立並啟動一個帶熱載入、儲存時靜態檢查以及可用於生產環境的構件配置的專案:
# 全域性安裝 vue-cli npm install --global vue-cli # 建立一個基於 webpack 模板的新專案 vue init webpack my-project # 進入專案資料夾 cd my-project # 安裝依賴 -- 依賴將在專案路徑下預設安裝到node-modules資料夾下 npm install xx --save # 啟動專案 npm run dev / npm run start
名詞解釋:
-
單頁應用和多頁應用
-
多頁應用:頁面跳轉請求 - 返回HTML
- 優點:首屏時間快,SEO效果好
- 缺點:頁面且緩慢
-
單頁應用:判斷頁面跳轉 - 通過JS清空當前載入HTML - DOM元素新的HTML渲染
- 優點:頁面切換快
- 缺點:首屏時間慢(html + js 請求),SEO效果差
-
-
webpack打包工具
它做的事情是,分析你的專案結構,找到JavaScript模組以及其它的一些瀏覽器不能直接執行的拓展語言(Scss,TypeScript等),並將其轉換和打包為合適的格式供瀏覽器使用。
-
-
專案結構
在使用vue-cli建立的專案中,我們關注的重點是src目錄。
main.js 入口檔案 App.vue 根元件 router 路由資訊 components 元件資訊 assets 資原始檔
首頁開發的準備工作:
1. 在src目錄下建立pages/home資料夾 2. 在home資料夾下建立components資料夾以及Home.vue檔案 3. components資料夾存放構建首頁的各種元件,Home.vue檔案統一管理這些子元件。(Home模組父元件)
vue檔案結構:
//模板區域 <template> <div> </div> </template> //指令碼區域 <script> export default { //基於元件開發,data必須是函式方法返回形式 data() { return { } }, methods: { }, components: { } } </script> //樣式區域 <style> </style>
元件開發須知:由於元件式的UI介面的開發資料是靜態的。所以,下文中首先介紹的是基於axios的ajax請求進行在Home.vue資料請求,後續開發基於模擬請求到的資料。此外,元件式的UI介面開發中很多重複步驟,這裡不做過多贅述,會在Header元件開發中詳細說明,後續元件開發將粗略帶過。