# Vuejs 開發相關工具及安裝
###### tags: `Vuejs`
## VS Code
> *[安裝連結](https://code.visualstudio.com/)*

### 入門說明
1. 建立新資料夾
2.
第一種方式：點擊資料夾右鍵 ***"Open With Code"*** 。([設定教學](https://blog.johnwu.cc/article/right-click-open-visual-studio-code.html))
第二種方式：直接執行**VS Code**， ***"檔案" > "開啟資料夾"***

### 延伸模組(Marketplace)
+ **Chinese (Traditional) Language Pack for Visual Studio Code**
+ 中文 (繁體) 語言套件，讓 VS Code 提供本地化的使用者介面
+ **HTML Snippets**：
+ HTML Code Snippets
+ [自訂Code Snippets教學](https://www.uuu.com.tw/Public/content/article/20/20200106.htm)
+ *Vetur*
+ 檢查vue語法錯誤與校驗由vue-language-server支援
+ **Volar (Vue3版的Vetur，安裝Volar就不用安裝Vetur了)**
+ 檢查vue語法錯誤與校驗由vue-language-server支援
+ **Vue 3 Snippets**：
+ 基於最新的Vue 2 及Vue 3的API添加Code Snippets

## node.js
> [下載](https://nodejs.org/en/download/)

建議安裝LTS版本(v16.14.0)，其餘版本不確定是否可以正常安裝Vue3開發相關套件

## 線上套件庫
> 可下載各種JavaScript套件來使用，打開CMD操作。

- **NPM *(Node Package Manager)***
輸入 **"npm -v"** 檢查是否有安裝

npm -v

若沒有安裝可執行下列命令：

npm install npm -g

- **Yarn**
新的package管理器，比起npm安裝起來更為快速!
於cmd執行：

npm install -g yarn

檢查是否安裝成功：

yarn -version

### Yarn 優點
- 快速： 下載的套件模組會存入快取，不需要再重複下載，且 Yarn 可以平行處理多個執行。
- 可靠： 使用 yarn.lock 提高一致性與穩定性。

## Vue3安裝
> [中文教學](https://www.javascriptc.com/vue3js/)
### 1.獨立版本
> [下載vue.js](https://unpkg.com/vue@3.2.31/dist/vue.global.js)
### 2.使用CDN方法
1. Staticfile CDN(國內)

<script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>

2. unpkg（推薦）

<script src="https://unpkg.com/vue@next"></script>

### 3.NPM方法

// 最新穩定版
npm install vue@next

## 建立Vue3專案(Scaffolding)
為了處理像是CSS預處理器(sass、less、stylus)、JsvaScript的轉譯Babel、TypeScript等工具/語言來負責處理，更不用說像是ESLint、Webpack、Gulp、Mocha、Chai等前端開發工具

### Vue CLI
> 全名是Vue.js Command-Line Interface，提供快速建置Vue.js專案
> 基於webpack而建立，開發服務器和構件功能和性能都將是webpack的超集
> [安裝教學](https://cli.vuejs.org/zh/guide/installation.html)

**其主要功能包括：**
1. 工程腳手架(Scaffolding，鷹架)
2. Hot-reload (webpack-dev-server)
3. plug-in system
4. 用戶介面(vue ui)

### Vite(發音:維特)
> - Vite 並不是基於 Webpack 的，有自己的開發服務器，利用瀏覽器中的原生 ES 模塊。
> - 這種架構使得 Vite 比 Webpack 的開發服務器快了好幾個數量級。
> - Vite 採用 **Rollup** 進行構建，速度也更快。
> - 專注於提供一個快速的開發服務器和基本的構建工具。
> - vue開發團隊全力開發中

### 安裝教學
#### 1. Vue CLI
1. 在終端機裡面使用下面的命令列安裝Vue CLI ***(執行一次後未來建立專案就不需要了)***

// 其中-g 代表我們要安裝到全域環境
npm install -g @vue/cli

2. 建立專案 ***(步驟一完成後，之後建置的專案從此步驟開始執行)***

vue create my-project

<center>圖、選擇安裝的版本，選擇[Vue 3]</center><Br>

3. 以VScode開啟專案資料夾，啟動專案並執行終端機輸入：

npm run serve

4. 成功後即可以看見下列網址：

App running at:
- Local: http://localhost:8080/
- Network: http://10.0.1.101:8080/

#### 2. Vite
1. 建立專案

npm init vite@latest
or
yarn create vite

2. 選擇yarn create vite指令執行

輸入 project name
select a framework : vue 

3. 初始專案、開啟server

cd project 
yarn        // 初始化
yarn dev    // 開啟server

---
# 必學觀念
## 框架
### 前端框架
vue提供了一整套的解決方案:
- **vue** ( 核心庫 )
- **vue-router** ( 路由方案 )
- **vuex** ( 狀態管理方案 )
- **vue組件庫** ( 快速搭建頁面UI效果的方案，如Element UI、 Ant Design Vue UI等)
### 輔助vue項目開發工具
- **vue-cli** (npm or yarn:一鍵生成vue項目-基於webpack，大而全)
- **vite** (npm or yarn:一鍵生成vue項目-基於RollUp打包，小而巧)
- **vue-devtools** (瀏覽器擴充套件:輔助測試工具)
- **Vetur** (vscode套件：提供語法highlight和智能提示)
- **Volar** (vscode套件：提供語法highlight和智能提示，*可理解為Vue3版Vetur*)

## 目錄結構
<center>圖、目錄結構說明</center><Br>

1. **node_modules**：負責用來存放經由 npm 安裝過後的套件
2. **public**：靜態資源，*這裡的檔案不經過webpack打包*
- **public/index.html**：裡面不會有主要內容，可編輯網頁所需的meta tag或是引入外不的css或js
3. **src**：項目資料夾
- **assets**：圖檔資料夾，會經過webpack打包，必須放在這個資料夾內才能夠被引用
- **main.js**：整個vue專案的源頭，裡面引入了 Vue 並創建了 Vue 實例，這個 Vue 實例有一個引入的 components 就是 App.vue若有使用 vue 的套件，如：vue router 、vue touch，下載後須從 main.js 引入
- **components**：自訂義組件放置資料夾
- **App.vue**：頁面最上層的根節點，綁定在 index.html 中的 ```<div id ="app"></div>``` ，要使用的 component 皆會掛在 App.vue 底下
5. **index.html**：裡面不會有主要內容，可編輯網頁所需的meta tag或是引入外不的css或js
6. **package.json**：藉由此檔案進行套件管理，裡面的key可分為*dependencies* 以及 *devDependencies*
- **dependencies**：用來管理一般套件，網頁本體所需要用到的套件都會擺 *dependencies* 內
- **devDependencies**：用來管理開發環境所需套件，像是常見的 webpack 、 babel 等等

## 生命週期(Hook function)

|Hooks名稱(Vue2.x/3.x)|Hooks名稱(對應V3.0 Composition API)|說明
|:---|:---|:---
|`beforeCreate`|`setup()`|Vue實體被建立，狀態、事件尚未初始化
|`created`|`setup()`|Vue實體已建立，狀態、事件初始化完成(`prop`、`data`、`computed`屬性已建立`vm.$el`屬性無法使用)
|`beforeMount`|`onBeforeMount`|Vue實體尚未與模板(DOM節點)綁定
|`mounted`|`onMounted`|Vue實體掛載完成，`el`的目標DOM被`$el`替換，可以視作JQuery的Ready
|`beforeUpdate`|`onBeforeUpdate`|當狀態被變動時，畫面同步更新前
|`updated`|`onUpdated`|當狀態被變動時，畫面已同步更新完成
|`beforeDestory`(2.x)|onBeforeUnmount|Vue實體物件被銷毀前
|`beforeUnmount`(3.x)|onBeforeUnmount|Vue實體物件被銷毀前
|`destroyed`(2.x)|`onUnmounted`|Vue實體物件被銷毀完畢
|`unmounted`(3.x)|`onUnmounted`|Vue實體物件被銷毀完畢
|`errorCaptured`|`onErrorCaptured`|子/孫元件的錯誤被捕獲時觸發
|`activated`|- -|Vue元件被啟動時觸發，搭配 `keep-alive`使用
|`deactivated`|- -|Vue元件被解除時觸發，搭配 `keep-alive`使用

[>>>更完整的說明](https://book.vue.tw/CH1/1-7-lifecycle.html)

## Vue.js的黑魔法-指令
- **v-bind**：屬性綁定
> 常見的標籤屬性，如：id src href...等DOM元素的屬性

//-- 樣板
<template>
    <div class="app">
        <p id="{{ PID }}"></p>         //-- 錯誤，無法成功渲染PID置瀏覽器上
        <p v-bind:id="{{ PID }}"></p>  //-- 正確
        <p :id="{{ PID }}"></p>        //-- 正確，: 為精簡寫法
    </div>
</template>
//-- js
<srcipt>
const vm =Vue.createApp({
    data(){
        return{
            PID:'item--''
        }
    }
}).mount('#app')
</srcipt>

- **v-model**：表單"雙向"綁定，(表單元件如input、textarea、select)
- **v-model修飾子**
- .lazy：離開焦點後才更新內容
- .number
- .trim

//-- 樣板
<template>
    <div class="app">
        // input文字框
        <input v-model="message" placeholder="編輯">
        <p>Message is: {{ message }}</p>
        
        // textarea文字方塊
        <p><span>Multiline message is:</span>{{ message }}</p>
        <textarea v-model="message"></textarea>
        
        //radio
        <input type="radio" id="one" value="1" v-model="picked">
        <label for="one">One</label>
        <input type="radio" id="two" value="2" v-model="picked">
        <label for="two">Two</label>
        
        // checked
        <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
        <label for="jack">Jack</label>
        <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
        <label for="mike">Mike</label>
        
    </div>
</template>
//-- js
<srcipt>
const vm =Vue.createApp({
    data(){
        return{
            message:'Hello world!!',
            picked:1,         // 預設1
            checkedNames:[]   // 
        }
    }
});
    
vm.mount('#app')
    

- **v-text**
> 無視標籤內原本的內容

<div v-text='text'>World!</div> // vue3不能再加上標籤內增加內容，會報錯
>>> Hello
<div>{{ text }} World!</div>
>>> Hello World!

- **v-html**
> v-text會呈現單純字串(不會解析html tag)，v-html則會

<template>
    <div v-text='text'></div>    // 會出現<h1>標籤
    <div v-html='text'></div>    // 不會出現<h1>標籤
</template>
<script>
    const vm = Vue.createApp({
        data(){
            return{
                text:'<h1>hello world!!</h1>'
            }
        }
    })
</script>
    

- **v-once** 、 **v-pre**
v-once：僅渲染一次，不再更新
v-pre：加上v-pre，部會解析模板內容直接顯示 >>> *'{{text}}'*

## 事件處理
- **v-on**：事件綁定
- 修飾子
- .stop
- .prevent
- .capture
- .self
- .once
- .passive

// 一般寫法
<button v-on:click="alert('text')">Click</button>
// 簡寫
<button @click="alert('text')">Click</button>

## 條件判斷與列表渲染
- **v-if/v-show**：條件判斷
v-show:透過CSS隱藏元素、v-if直接移除元素
- **v-for**：列表、陣列渲染

<li v-for="item in book" :key="itme.id">{{ item.bookName }}</li>

## 元件系統
### 宣告與註冊
1 建立子元件: *MyList.vue*

**元件命名規則**
通常會以兩個以上單字來進行命名，如: *todo-item* 、 *base-table*

2 在根實體註冊

//-- HTML
<div id="app">
    <h3>Root Instance</h3>
    
    <!-- 使用子元件:連字號標籤 -->
    <my-list></my-list>
    <!-- 使用子元件:大寫駝峰式 -->
    <MyList />
</div>
//-- javascript
import MyList from './MyList.vue'    // 匯入
    
const app = Vue.createApp({
    name:'MyApp',
    components:{
        MyList    // 註冊
    }
    
})
    

### 元件之間的溝通傳遞
- **Props**：上下層元件之間，透過props來引用外部狀態。

Vue.component('blog-post', {
  // 在 JavaScript 中是 camelCase 的
  props: ['postTitle'],
  template: '<h3>{{ postTitle }}</h3>'
})
    
<!-- 在 HTML 中是 kebab-case 的 -->
<blog-post post-title="hello!"></blog-post>

- **emit**：子元件內容要將資料傳遞到父元件時。

    //-- childComponents.vue
    export default {
        methods: {
            onEmit(){
                this.%emit("on-change","Hello")
            }
        }
    }
    
    //-- parentComponent.vue
    <template>
        <div>
            <child-Component @on-change="onChileChange"></child-Component>
        </div>
    </template>
    <script>
        import ChildComponent from './childComponents.vue'
        export default
        {
            methods:{
                onChileChange(v){
                    console.log(v)
                }
            }
        }
    </script>
    


---
# Vue Router
***Vue Router*** 是 Vue.js 官方提供的前端路由管理器。
[文章教學連結](https://medium.com/web-design-zone/vue-router%E9%A0%81%E9%9D%A2%E8%B7%AF%E7%94%B1%E5%88%9D%E6%AC%A1%E9%AB%94%E9%A9%97-%E5%AE%89%E8%A3%9D%E8%88%87%E4%BD%BF%E7%94%A8-bb5db769f1db)

---
# Vuex

---
# 開發Vue3.js支線任務

## module bundler(模組打包工具)
### 1. webpack

### 2. rollup
<br/>

## CSS Preprocessor(CSS 預處理)
> CSS Preprocessor可以說是CSS語法的擴充，為了彌補CSS再大型專案專案維護性的不足，CSS預處理器中新增了變數、混入、繼承、嵌套等寫法

[圖片來源](https://www.ironistic.com/insights/css-preprocessors-or-else/)

### 1. Less

### 2. Sass/SCSS
### 3. Stylus
<br/>

## axios
***axios***是Vue官方推薦的非同步工具。一併安裝***vue-axios***，vue-axios的功用很簡單，就是讓你能vue.$http 的方式叫用vue.axios 看起來比較直觀(因為早期vue.resource是這樣寫的)。
安裝：

npm install axios vue-axios --save

[文章教學連結](https://ad57475747.medium.com/%E5%BE%9E%E9%9B%B6%E9%96%8B%E5%A7%8B%E7%9A%84vue%E5%AD%B8%E7%BF%92%E6%97%A5%E8%AA%8C-%E5%AE%89%E8%A3%9D-axios-1550d6f1c862)

---
# 相關教學整理
- [Vue3官方中文文檔](https://v3.cn.vuejs.org/)
- [重新認識Vue.js | Kuro Hsu](https://book.vue.tw/preface.html)
- [Vue3 One Piece(對岸愛好者社團)](https://vue3js.cn/)
- [Vue3 教程](https://www.runoob.com/vue3/vue3-tutorial.html)
- [bilibili影片-黑馬程序員](https://www.bilibili.com/video/BV1zq4y1p7ga?p=259) #259集~最後