在 Node JS 使用 vue-cli 3 快速開發網頁與佈署到 github-pages

在 Node JS 使用 vue-cli 3 快速開發網頁與佈署到 github-pages ( vuejs + vue-cli-plugin-element + bootstrap-vue )

1. 程式碼在 github: https://github.com/polinwei/vue-demo
2. 執行在 github-pages: https://polinwei.github.io/vue-demo

在 Node JS 開發環境設定 談到如何建立一個基本的 node.js 的開發環境，基本的概念瞭解後，現在使用 vue-cli 3 來快速開發網頁，這對於每個專案來說，就不需像 Node JS 開發環境設定 這樣對不同的 node modules 作一堆的環境參數設定。

• 安裝 vue-cli 3 並建立一個專案

$ npm install -g @vue/cli
$ vue create vue_demo

1.) 選擇 Manually select features 手動選

Vue CLI v4.3.1
? Please pick a preset:
  default (babel, eslint)
> Manually select features

2.) 選擇 Babel & Linter / Formatter

Vue CLI v4.3.1
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

3.) 選擇 ESLint with error prevention only

Vue CLI v4.3.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Linter
? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

4.) 選擇 Lint on save

Vue CLI v4.3.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Linter
? Pick a linter / formatter config: Basic
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save
 ( ) Lint and fix on commit

5.) 選擇 In package.json : 將所有設定統一放在 package.json 裡

Vue CLI v4.3.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Linter
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.?
  In dedicated config files
> In package.json

6.) 安裝好後，可以進入專案目錄: vue_demo ，執行 npm run serve 進入網頁

⚓  Running completion hooks...

Generating README.md...

Successfully created project vue_demo.
Get started with the following commands:

 $ cd vue_demo
 $ npm run serve

所有 node modules node modules 的設定統一放在 package.json 裡, 它的初始目錄結構如下圖，public\index.html 是主要的 HTML 入口檔案，src\App.vue 則是 Vue 的主要程式入口，src\main.js 則是 javascript 的主要引入檔案。

• 加入 ElementUI & bootstrap-vue

vue add element

? How do you want to import Element? Fully import
? Do you wish to overwrite Element's SCSS variables? No
? Choose the locale you want to load zh-TW

⚓  Running completion hooks...
✔  Successfully installed plugin: vue-cli-plugin-element

vue add bootstrap-vue

⚓  Running completion hooks...
✔  Successfully invoked generator for plugin: vue-cli-plugin-bootstrap-vue

這時候，這兩個 module  應該在 src\main.js 有註冊了

import '@babel/polyfill'
import 'mutationobserver-shim'
import Vue from 'vue'
import './plugins/bootstrap-vue'
import App from './App.vue'
import './plugins/element.js'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

• 驗證

1. 建立一個檔案 src\components\elementForm.vue ，程式碼如 https://element.eleme.io/#/en-US/component/form#validation
2. 修改 App.vue 如下：

<template>
  <div id="app">    
      <img src="./assets/logo.png">   
      <div>
        <p>
          If Element is successfully added to this project, you'll see an
          <code v-text="'<el-button>'"></code>
          below
        </p>
        <el-button>el-button</el-button>
      </div>
    
    <div class="row">
      <div class="col-sm-6">
        <HelloWorld msg="Welcome to Your Vue.js App"/>
      </div>
      <div class="col-sm-6">
        <elementForm />
      </div>
    </div>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import elementForm from './components/elementForm'

export default {
  name: 'app',
  components: {
    HelloWorld,
    elementForm
  }
}
</script>

執行 npm run serve 就可以進入 http://localhost:8080/ 查看，是不是很快就建立好一個網頁了呢?

• 佈署到 github-pages : 以佈署到  https://polinwei.github.io/vue-demo 為例

1.) 建立佈署文件: vue.config.js

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/vue-demo/'
    : '/'
}

2.) 安裝下列套件與佈署到 github-pages

# 安裝套件
npm install -g vue-cli-ghpages

# 執行編譯
npm run build

# 佈署到 github pages
vue-cli-ghpages #可以使用簡寫 vcg

它會自動建立一個 gh-pages 的分支 ( Branch ) ，並且可以在 https://polinwei.github.io/vue-demo 觀看。方便吧!!

• 若程式有修改時的重新佈署

# commit 所有程式
git commit -a

# 推到雲端
git push

# 編譯程式
npm run build

# 佈署到 github-pages
vcg