## Develop on Vue CLI ##### Steve Jian --- ## Vue CLI? ---- Vue CLI 是一个基於 Vue 進行快速開發的完整系统 可以幫創建好許多本來要自己弄的資料夾、檔案 ---- 上次社課的 Vue 操作是在文字編輯器上編寫並在瀏覽器上執行 Vue CLI 使前端在 NodeJS 環境上開發增加開發的方便 --- ## Instll Vue CLI install: ```bash= $ sudo npm install -g @vue/cli ``` check: ```bash= $ vue --version ``` --- ## Vue CLI 創建專案 可用指令的方式創立專案 或以 Vue CLI 圖形工具創立 ---- 啟動圖形工具: ```bash= #移至暫存區 $ cd /tmp #在暫存區啟動Vue CLI圖形工具 $ vue ui ``` ----  ----  ---- 在 /tmp 創立專案  ---- 依照需求設定  ----  ----  ---- * Bable: 可將ES6中較新的語法轉為大部分Browser 支援的ES5 * PWA: 使專案支援Progressive Web App (漸進式網路應用程式) * Router Vue的路由管理工具 ---- * Vuex 管理Vue項目的全局狀態 * Lint/Formatter 使用ESlint檢查語法和 以Prettier格式化code ----  ---- 新增專案,不保存預設  ---- 專案產生後可以到專案的 Dashboard  ---- 用 VS code 打開 /tmp/first-vue  --- ## 專案內檔案及目錄結構 ----  ---- * public 任何放置在public文件夾的靜態資源都會被簡單的複製，而不是通過webpack。需要通過絕對路徑來引用它們 * src 專案的原始碼都放在這裡 * babel.config.js babel的設定檔 (Vue CLI已經設定好了通常不建議亂動) ---- * vue.config.js Vue的設定檔 可以參考[這裡](https://cli.vuejs.org/zh/config/#vue-config-js)設定 * dist 經webpack打包產生的輸出資料夾 (執行npm run build才會產生) * src/assets 放會被編譯的靜態檔案 ---- * src/components 網頁元件的最小單位都放在這裡 * src/router/index.js vue-router設定檔 設定專案的路由 * src/store/index.js vuex設定檔 設定及管理專案全局狀態樹 ---- * src/views 各頁面的原碼 頁面使用到的components在這裡組裝 * src/App.vue 所有頁面都是在App.vue下進行切換的。也是整個專案的關鍵，負責構建定義及頁面元件歸集 * src/main.js 程式入口檔案，初始化vue實例並使用需要的外掛,載入各種公共元件 ----  --- ## .vue檔 .vue檔是vue CLI編寫元件或頁面使用的副檔名 ---- 主要由```<template>```、```<script>```、```<style>``` 三個tag組成  ---- * ```<template>``` 頁面或元件的html模板 該標籤內使用html5語法 * ```<script>``` 頁面或元件的控制區 該標籤內使用js語法 * ```<style>``` 頁面或元件的html模板樣式 該標籤內使用CSS語法 --- @/src/view/Home.vue  --- ## v-bind & v-model ---- v-bind 屬性綁定: 在後方可加入一變數或表達式 ```htmlmixed= <template> <div id="app"> <input type="checkbox" v-bind:checked="selected"> </div> </template> <script> export default { data: { selected: true, } } </script> ```  ---- v-model 雙向綁定: 就像是結合了v-bind 跟 v-on一樣，初始綁定並呈現資料外還會監聽事件來做資料更新 ```htmlmixed= <template> <div id="app"> <input v-model="num" /> <h1>{{num}}</h1> </div> <template> <script> export default { data: { num: null, } } </script> ``` ----  --- ## 練習時間~ clone 或 pull [這個](https://github.com/steve5631/EX.code/tree/vue)並觀察這個專案的 各功能的用法及原理 ----  --- 前端的開發除了功能的實現之外UI及UX也非常重要 可以嘗試在Vue專案上結合CSS framework 像是Bootstrap或Vuetify等框架來美化專案 --- # *fin*