Leo's Space

我寫故我在

0%

Vue Cli-簡介

發表於 更新於 分類於 Disqus：
文章字數： 883 所需閱讀時間 ≈ 1 分鐘

Vue Cli 介紹

  1. 基於 Webpack 所建置的開發工具
    • Webpack: 現在前端技術發展快速，多了很多 Preprocess (前處理器)工具與框架，像是Scss,Vue， 但是瀏覽器只看得懂(js,css,html)，因此Webpack 就出現了，它幫我們編譯Preprocess 成瀏覽器得懂的內容然後打包成一包 dis 發布檔，直接讓後端上傳到 server。
  2. 方便使用各種第三方套件(BS4,Vue Router)
  3. 可以運行 Sass,Bebel 等編譯工具
  4. 便於開發 SPA 網頁工具
  5. 快速搭建開發環境

Vue Cli 建構

  1. 安裝 Node.js

    1
    node -v //確認 node 安裝成功

  2. 安裝 Vue Cli

    1
    npm install vue-cli -g // 以全域方式安裝 vue-cli 2.版本

  3. 啟用 webpack

    1
    2
    3
    4

    vue list  // 列出可用樣板
    vue init webpack test // vue init 樣板名稱 專案名稱


  1. 安裝模組

    1
    2
    npm install //安裝package.json內相依套件 
    // 安裝完後就會多一個 node_modules 的資料夾

  2. 執行測試環境

    1
    npm run dev //執行測試環境

  1. 正式發布檔

    1
    npm run build // 目錄會多 dis 資料夾 裡面的檔案是正式要放到 server的

Vue Cli 資料夾結構

  1. 主檔案結構

  1. 被注入程式的 index.html

  1. scr

    • main.js 是所有 Vue.js 的進入點 entry，程式會注入到 index.html

    • assets 資料夾裡面放會被編譯的檔案，像是圖檔小於某個大小，圖檔會用 base64 編譯

  2. satic 資料夾內檔案不會被編譯

  3. dis 資料夾

    • 裡面的 index.hml 是正式發布的檔案，需要用 server 執行

  1. build 資料夾
    • 裡面有 webpack 的設定檔
  2. config 資料夾
    • 裡面有設定環境變數的檔案
  3. node_modules
    • 裡面為所有安裝的套件，套件清單在 package.json
  4. .babelrc
    • ES6 語法不能在所有瀏覽器上執行，透過 Beble 可以編譯 ES6 成為大部分瀏覽器可以了解的語法
  5. .postcssrc.js
    • css 前處理器的編譯器