DAY30 | 跟 Vue.js 認識的30天 - 使用 Vue CLI 建立 Vue 專案

發表於 更新於 分類於 ，

在之前有介紹過幾種安裝 Vue 、 Vue-Router 、Vuex 的方法，其中一種就是透過 NPM 安裝，但透過 Vue CLI 可以幫助我們快速的建立一個 Vue 專案，並且加入 Vue-Router 、Vuex 等插件。

安裝

建議 Node.js 版本要在 v10 以上，可以透過 node --version 查詢版本。

安裝 Vue CLI ，接下來的安裝指令都在 cmd 中輸入。

1
npm install -g @vue/cli @vue/cli-service-global

創建專案

輸入下列指令，進入 Vue CLI 的圖形化介面。

1
vue ui

進入 Vue CLI 的圖形化介面，如下 :point_down:

按下新增標籤建立專案，並依步驟建立專案配置。

建立專案後，透過 cmd 移到該專案位置，並輸入 :point_down: 即可在本地端啟動伺服器，檢視 Vue 專案頁面。

1
npm run serve

完成專案後，輸入 :point_down: 即可得到用於生產環境的資料夾。

1
npm run build

在 GitHub 上部署 Vue 專案

  1. 建立 vue.config.js 檔案，並寫入以下代碼。

如果要將專案部署到 https://github.com/<USERNAME>/<REPO>.git 上的話，那在生產模式下 GitHub Pages 網址就會是 https://<USERNAME>.github.io/<REPO>/ (Vue 專案中 /會導向/REPO/) 。

通常都是在 GitHub 上創建一個遠端資料庫(REPO)，假設遠端資料庫名為 toystore (也就是 https://github.com/Celeste6666/toystore.git) 的話，設置方法如下 :point_down: 。

1
2
3
4
5
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
  ? '/toystore/'
  : '/'
}
  1. 設定自動部署

在專案根目錄下創建 deploy.sh 檔案，要將專案部署到 https://github.com/Celeste6666/toystore.git 上的話，設置方法如下 :point_down: 。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
#!/usr/bin/env sh

# 当发生错误时中止脚本
set -e

# 构建
npm run build

# cd 到构建输出的目录下
cd dist

# 部署到自定义域域名
# echo 'www.example.com' > CNAME

git init
git add -A
git commit -m 'deploy'

# 部署到 https://<USERNAME>.github.io
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master

# 部署到 https://<USERNAME>.github.io/<REPO>
# 本地 master 分支資料部署到遠端 gh-pages 分支
git push -f https://github.com/Celeste6666/toystore.git master:gh-pages

cd -
  1. 執行自動部署

在 cmd 上輸入以下指令，即可自動部署。

1
sh deploy.sh

參考資料

Vue CLI

一個指令快速部署 Vue Cli 到 GitHub Pages