By

筆記

  • Gulp：自動化工具，可將繁瑣重複工作自動化，可依需求做細部調整。

  • Webpack：打包工具，會將檔案轉譯後做極致壓縮，打包成一包。適用於 SPA (Single Page Application)。

  • 使用 Vue CLI 前務必安裝 Node.js。

  • Vue CLI 安裝指令 npm install -g vue-cli，Mac 在前方需加上 sudo。

  • 輸入 vue -V 可查看版本， vue -h 可查看可用指令。

  • 輸入 vue list 可查看可用套件包。

  • 輸入 vue init webpack 專案名稱 使用 webpack 套件包初始化專案，專案資料夾以專案名稱命名。

  • 輸入 npm install 安裝 package.json 中所列出的套件，並產生新的資料夾 node_modules。

  • 在 package.json 的 scripts 中可看到預設的指令，輸入 npm run dev 啟動服務並開啟網頁；npm run build 可進行編譯壓縮打包儲存到 dist 資料夾中，網頁上架只要上傳 dist 中的檔案即可。

  • build 資料夾是 webpack 的設定。

  • .gitignore 設定忽略上傳 Github 的檔案或資料夾。

  • src 資料夾中才是寫 Code 的地方。
    • main.js: 套件 import 的設定。
    • App.vue: 分頁會塞到 <router-view></router-view> 中。
    • \router\index.js： 依照網址路徑，指定顯示對應的元件。
    • \components\Hello.vue： 元件內容。
    • assets：存放靜態檔案，例如css, 圖片。
  • 新增頁面：
    • 在 components 資料夾新增一個 vue 檔，例如 Chatroom.vue。
    • 在 \router\index.js 上方 import Chatroom from '@/components/Chatroom' (無需副檔名)。
    • 在 \router\index.js 的 routes 陣列中新增 path。
{
  path: '/Chatroom',
  name: 'Chatroom', // name 可以移除
  component: Chatroom
}
  • 使用 Bootstrap 4
    • 安裝 npm install sass-loader bootstrap node-sass --save。
    • 在 App.vue 中 <style> 改為 <style lang="scss">。
    • 在 <style lang="scss"> 中只保留 @import "~bootstrap/scss/bootstrap" 即可。
  • 切換頁面超連結
    • Vue CLI 官網建議使用 取代
    • <router-link class="nav-link" :to="'Chatroom'">Chatroom</router-link>
  • 新增 Navbar
    • 在 \components\partials\ 新增 Navbar.vue。
<template>
  <nav class="navbar navbar-toggleable-md navbar-light bg-faded sticky-top">
    <a class="navbar-brand" href="#">Navbar</a>
  
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item">
          <router-link class="nav-link" :to="{ path: '/hello' }">入口頁面</router-link>
        </li>
        <li class="nav-item">
          <router-link class="nav-link" :to="{ path: '/static' }">樣板頁面</router-link>
        </li>
        <li class="nav-item">
          <router-link class="nav-link" :to="{ path: '/chatroom' }">聊天室</router-link>
        </li>
      </ul>
    </div>
  </nav>
</template>

<script>
export default {
  name: 'navbar',
  data() {
    return {
      data: ''
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
  • App.vue
<template>
  <div id="app">
    <Navbar></Navbar>  
    <router-view></router-view>
  </div>
</template>

<script>
import Navbar from './components/partials/Navbar'
export default {
  name: 'app',
  components: {
    Navbar
  }
}
</script>

參考