2018年10月21日 星期日

Vue CLI 3-基礎(2)建立專案

Creating a Project建立專案

vue create

執行下面指令建立新專案:
vue create hello-world
警告
如果你在Windows使用Git Bash with minTTY, 互動命令列不會生效。你必須使用 winpty vue.cmd create hello-world.
你需要選擇一個preset。預設preset包含basic Babel + ESLint 設定,或選 "Manually select features" 去挑選你需要的功能:
CLI preview
預設設定適合快入建立新專案的雛形,手動設定適合正式環境導向的專案
CLI preview
如果選擇手動選取功能,最終可儲存你的選項作為preset,之後就可以重複使用。 我們會再下個章節討論presets 及plugins 。
~/.vuerc
儲存的presets將存到使用者家目錄下,名為.vuerc 的JSON 檔。如果你想要修改存起來的presets / options,你可以去編修此檔。
在專案建立過程,你也可選擇想要的套件管理器(package manager),或使用 or  Taobao npm registry mirror 。你的選擇會被存到~/.vuerc
 vue create 指令有很多選項可以用 :
vue create --help
Usage: create [options] <app-name>

create a new project powered by vue-cli-service


Options:

  -p, --preset <presetName>       Skip prompts and use saved or remote preset
  -d, --default                   Skip prompts and use default preset
  -i, --inlinePreset <json>       Skip prompts and use inline JSON string as preset
  -m, --packageManager <command>  Use specified npm client when installing dependencies
  -r, --registry <url>            Use specified npm registry when installing dependencies (only for npm)
  -g, --git [message|false]       Force / skip git initialization, optionally specify initial commit message
  -f, --force                     Overwrite target directory if it exists
  -c, --clone                     Use git clone when fetching remote preset
  -x, --proxy                     Use specified proxy when creating project
  -h, --help                      output usage information

使用GUI

你也可透過 vue ui 命令使用圖形化介面建立及管理專案:
vue ui
上面的命令會在瀏覽器打開圖形化介面,並導引你專案建立過程:
UI preview

 2.x 模版Templates (Legacy)

Vue CLI 3 使用相同的 vue 指令,所以覆蓋了 Vue CLI 2 (vue-cli)。如果你仍需要使用就版的 vue init 功能,你可以安裝global橋接 :
npm install -g @vue/cli-init
# vue init now works exactly the same as vue-cli@2.x
vue init webpack my-project

2018年10月19日 星期五

Vue CLI 3-基礎(1)快速建立雛形

Instant Prototyping快速建立雛形

你可以用單一 *.vue 檔案加上 vue serve 及 vue build指令快速建立雛形,但是需要先安裝額外擴充套件: 
npm install -g @vue/cli-service-global
 vue serve 的缺點是仰賴全域的相依,在不同機器上無法保證一致性。因此這只是用於快速雛形開發。

vue serve

Usage: serve [options] [entry]

serve a .js or .vue file in development mode with zero config


Options:

  -o, --open  Open browser
  -c, --copy  Copy local url to clipboard
  -h, --help  output usage information
只需要一個 App.vue 檔案:
<template>
  <h1>Hello!</h1>
</template>
在 App.vue 檔案所在目錄執行:
vue serve
vue serve 會使用跟用vue create建立專案時,相同的預設設定 (webpack, babel, postcss & eslint)  ,會自動推導相同目錄裡的入口檔案(entry file)  - 可能會是  main.jsindex.jsApp.vue or app.vue.其中之一。
你也可以明確指定想要的入口檔案:
vue serve MyComponent.vue
如果有需要,也可提供 index.htmlpackage.json,安裝並使用本地端依賴,或甚至用對應的config檔案設定babel, postcss & eslint 。

vue build

Usage: build [options] [entry]

build a .js or .vue file in production mode with zero config


Options:

  -t, --target <target>  Build target (app | lib | wc | wc-async, default: app)
  -n, --name <name>      name for lib or web-component (default: entry filename)
  -d, --dest <dir>       output directory (default: dist)
  -h, --help             output usage information
You 你也可以用vue build指令將目標檔案打包成production bundle,並用來部署(deployment):
vue build MyComponent.vue
vue build 也能夠將元件(component)建構成library或是web component。查閱 Build Targets 了解構多細節

2018年10月18日 星期四

Vue CLI 3-安裝Installation

安裝vue cli

警告
package 名稱由 vue-cli 改成 @vue/cli 。如果你有全域(globally)安裝先前的 vue-cli(1.x or 2.x) package,你需要用 npm uninstall vue-cli -g 或 yarn global remove vue-cli先移除掉
Node 版本需求
Vue CLI 需要 Node.js version 8.9 或以上 (8.11.0+ 推薦)。你可以使用 nvm 或 nvm-windows.在同一台機記上管理多版本的Node
使用下面指令安裝新的package:
npm install -g @vue/cli
# OR
yarn global add @vue/cli
安裝後,你就可以在命命列使用 vue 指令了。 你可以輸入 vue,來驗證有無安裝成功,有的話會顯示所有可用的指令。

下面指令可檢查是否有正確版本 (3.x)
vue --version

Vue CLI 3-Overview簡介

Vue CLI 是用來快速開發Vue.js的系統,提供:
  • 互動式專案架設--透過 @vue/cli.
  • 零設定快速建立雛形--透過 @vue/cli + @vue/cli-service-global.
  • 執行時情的相依性(dependency) (@vue/cli-service) :
    • 可升級;
    • 建立在webpack之上;
    • 可透過專案設定檔設定;
    • 可透過plugins擴充
  • 官方擴充套件(plugin)整合前端生態系最佳的工具集合.
  • 有完整使用者介面GUI來建立及管理Vue.js專案
Vue CLI目標是要成為Vue生態中的標準工具,確保各種build tools可以一起順暢的運作,讓開發者可以專注在app開發而不用花很多時間調整設定,同時保留彈性可以去做細微調整。

Components of the System系統元件


CLI

CLI (@vue/cli) 是全域安裝的 npm package ,提供 vue 指令於命令列使用。  透過 vue create 可快速架構新專案,或是透過 vue serve快速為新idea做出雛形。你也可以透過 vue ui使用圖形化介面管理你的專案。

CLI Service

CLI Service (@vue/cli-service) 是開發相依性(dependency)用@vue/cli建立的專案,都會在本機端安裝的一個npm package
CLI Service是建立於 webpack 及 webpack-dev-server之上,包含:
  • 用來載入其他CLI plugin的核心service;
  • 優化過的內部 webpack 設定檔(config) ;
  •  vue-cli-service binary , 包含基本的 servebuild and inspect 指令
如果你熟悉 create-react-app@vue/cli-service 大致相當於 react-scripts
 CLI Service 有更詳盡的說明

CLI Plugins

CLI Plugins 是用來讓你的Vue CLI專案有其他功能的npm packages , 如 Babel/TypeScript 轉譯transpilation, ESLint 整合, 單元測試(unit testing), 及 end-to-end 測試. 很容易就能辨認出  Vue CLI plugin ,因為他們的名稱都會用 @vue/cli-plugin- (內建 plugins) 或 vue-cli-plugin- (社群 plugins)當開頭。
當你執行 vue-cli-service 指令 , 會自動解析及載入專案內package.json上列出的CLI Plugins 。
Plugins可以在專案建立時就加入,或是之後再加入。也可以放在可重複使用的presets中。我們會在 Plugins and Presets章節深入討論。

2018年10月9日 星期二

Coursera上的零基礎Python 入門專項課程學習過程(持續更新)


上禮拜開始上Coursera上的Python課程,記錄一下過程及心得
課程網址:
https://www.coursera.org/specializations/python

此專項課程描述:
學習使用Python编程並分析數據。 開發數據搜集、數據整理、數據分析及數據視覺話相關程序。


1.Programming for Everybody (Getting Started with Python)
花費時間:5天左右 (2018/10/9完成)
證書:



心得:
有學過程式的,應該都能很快完成,教學影片很有趣,還有很多bonus影片可以看,例如訪問Python的作者Guido van Rossum,跟 Arduino的Co-founder等等,老師也到世界各地去辦QA workshop,也應用了autograder去檢查你寫的程式,搭配免費的電子書,很佛心,不想花錢的話也可以旁聽全部課程,只是要交作業跟拿證書的話就必須要付費,一個月大概約49美金。

workshop影片


網路自學文章/心得/推薦課程






一座島


交大資工-台大資工所的學生所寫的紀錄
https://island.shaform.com/zh/

你所不知道的矽谷-異類矽谷

這個blog作者以矽谷為主題
寫了一系列的文章
跟我們平常看到的都不太一樣

沒法去矽谷當工程師
至少也看看矽谷人的生活 XD

https://sosreader.com/n/bass/5bbacbb2fd89780001de2019

2018年10月8日 星期一

六角諮詢室

由於年紀也不小了,但對於寫程式自認還有熱情在
之前有點機運,去進修時被找去當講師開課
開啟了一段假日當講師的生活
說實話,備課壓力真的不小,尤其是要準備各種可能被同學提問的問題
前端,後端,資料庫要在短短10小時內教完並且用框架弄出一個作品
但那段期間進步超快,收穫很多,果然壓力是進步的原動力

六角學院-jQuery筆記(1)


JS有各瀏覽器間相容性的問題
jQuery幫你處理掉這問題了

可連到jQuery去測試看看jQury的用法
https://jquery.com/

在他們官網打開開發人員工具,就可直接使用$( )來選取HTML元素

這是因為官網有載入jQuery library







(‘a’).hide() 是設定style = “display:none ;” 

相對應的是 .show()

設定為display: block 


幫link改成連到不同網址




$(‘a’).slideUp()  會把所有<a>都有一個往上捲動的消失效果
$(‘a’).slideUp(5500) 表示動畫效果會持續5.5秒

$(‘a’).slideDown()  會把所有<a>都有一個往下捲動的出現效果

$('a').fadeOut(2200) 淡出
$('a').fadeIn(2200)    淡入