在 Node JS 使用 vue-cli 3 快速開發網頁與佈署到 github-pages ( vuejs + vue-cli-plugin-element + bootstrap-vue )
- 程式碼在 github: https://github.com/polinwei/vue-demo
- 執行在 github-pages: https://polinwei.github.io/vue-demo
在 Node JS 開發環境設定 談到如何建立一個基本的 node.js 的開發環境,基本的概念瞭解後,現在使用 vue-cli 3 來快速開發網頁,這對於每個專案來說,就不需像 Node JS 開發環境設定 這樣對不同的 node modules 作一堆的環境參數設定。
參考影片檔 https://www.vuemastery.com/courses/real-world-vue-js/vue-cli/
- 安裝 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 /Router /Vues & 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 + Prettier
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 dedicated config files : 將所有設定放在各自的設定檔裡
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')
- 驗證
- 建立一個檔案
src\components\elementForm.vue
,程式碼如 https://element.eleme.io/#/en-US/component/form#validation - 修改 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 或 yarn global add 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 # npm 佈署到 github-pages vcg # 或用 yarn 佈署到 github-pages yarn vcg
你必須 登入 才能發表評論。