使用 Vue Cli 來建置Vue專案


Posted by hoyi-23 on 2021-08-15

Vue Cli 在幹嘛?

Cli 就是一個下指令的工具。我們可以運用它去執行我們的專案。

主要分為三大方向:

  1. Cli - 運用指令去建立專案,並提供 Cli UI 的介面方便操做。
  2. Cli Service - 主要基於webpack。把我們的程式碼compile好變成網頁看得懂的樣子等等。
  3. Cli Plugin - 使用Vue指令安裝不同的Plugin (例如 ESlint、Babel等等)

安裝Cli & 建立Vue環境

打開終端機,輸入以下指令:

@next會安裝最新版本

npm install -g @vue/cli@next
//-g 將Cli安裝於全域
vue --version
//查看版本

建立專案

這大概是最常用的指令了~
直接用Vue指令建立專案

vue create hello-world

輸入指令後,它會問你你想要建立哪個版本?

使用上下鍵選取並按enter確認,接下來它就會自動安裝一個基本的Vue專案下來啦!


執行專案

接下來它就叫你前往Vue的資料夾,並執行專案
你應該會看到這個樣子
終端機:

資料夾結構:

cd hello-world
npm run serve

輸入後,它會跑出兩個網址:

接下來把 local 的網址貼上瀏覽器,就可以看到專案啦!

npm run build

而最下方你會看到To create a production build, run npm run build.
這就是當你完成開發時,可以利用這裡的build指令。
輸入後,Vue Cli 會透過@Vue/compiler-sfc與共種loaders將SFC的.vue檔案轉譯成瀏覽器看得懂的js檔案。
打包後的檔案會出現在dist/目錄下

npm run

npm run是一個小工具,點開package.json,裡面你可以找到

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

我們輸入npm run時,就是在跑這個script。
npm run serve 就是執行了 "serve": "vue-cli-service serve",
它提供一個小型的server,讓我們方便的去做簡單的測試。
vue-cli-service serve的另一個優點是,hot module replacement也就是可以即時更新。


相關文章: 運用 Cli 部署 Vue專案 到 GitHub Pages


Vue UI

使用指令開啟 Vue ui 介面
在Vue ui 上面,我們可以在這裡 新增 / 執行 / 管理 專案

vue ui

主要是 Vue ui 提供了一個網頁介面,讓我們可以調整專案(包括 Plugin/dependencies 等)


關於 Cli Service

前面提到 Cli Service 幾個重要的指令 npm run serve 等。加速我們的開發,
那 Cli service 為什麼可以做到這些呢? 我們要來了解一下 Cli Service 的核心

Cli Service 的核心

  1. Webpack
  2. Webpack-dev-server

webpack 與 Vue cli 的關係

關於 webpack

不了解webpack的,可以先轉讀這篇文章。
Webpack 5 筆記文章


Webpack 的基本概念很簡單,就是幫我們整理所有的檔案並轉譯成瀏覽器看得懂的程式碼。

Cli Service就是把 webpack 當作自己的核心,所以 Vue cli 就有一些webpack的功能。
Vue cli 除了將 webpack 融入自己的核心,還做了一下 config 設定。

像是我們使用的指令Vue create就是有運用到webpack核心,再配上適當的設定值,所以我們就可以用Vue create建立一個初始化的Vue專案


#VueCli







Related Posts

PHP 和 MySQL 的互動 1 : 連線

PHP 和 MySQL 的互動 1 : 連線

CSS保健室|font-feature-settings

CSS保健室|font-feature-settings

[FE201] SCSS

[FE201] SCSS


Comments