專案實戰

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元件開發中詳細說明，後續元件開發將粗略帶過。