# HelloHello
###### tags: `Vue.js`

# 參考
* [Vue3 官網-install](https://cli.vuejs.org/guide/installation.html)

# 前置需求
*

# 安裝 vue cli

npm install -g @vue/cli
# OR
yarn global add @vue/cli


## 安裝完成後確認版本

vue -V

## 刪除

npm update -g @vue/cli
# OR
yarn global upgrade --latest @vue/cli

# 建立一個 vue 專案
* 在目前資料夾新增一個專案
* 在目前資料夾新增一個資料夾

vue create .
# OR
vue create hello-world

## 選擇手動安裝
* Manually select features
這邊會顯示一些可以預先安裝的，之後都可以在手動安裝上去
* Babel
* TypeScript
* PWA Support
* Router
* Vue
* CSS Pre-processors
* Linter / Formatter
* Unit Testing
* E2E Test


## 選擇vue的版本

## 選擇安裝方式
## 安裝結束
* 結束後他會提醒你`yarn serve`開始開發

## 使用開發模式

yarn serve

* 完成就會看到你第一個程式了

## 專案結構

tree -I 'node_module*'


* public 靜態頁面
* src 主目錄
* assets 靜態資源
* components 組件
* App.vue 頁面主入口
* main.ts 專案入口（腳本主入口）
* shims-vue.d.ts vue模組注入
* babel.config.js babel配置
* tsconfig.json ts配置
* package.json 依賴
* .gitignore git忽略文件配置

* 開發只需關注於`src`資料夾即可
* 專案入口處是main.ts

### main.js

// 載入相關的套件、專案檔案等等
import { createApp } from "vue";
import App from "./App.vue";

// 初始化應用程序，將應用程式綁定在DOM上，該DOM的ID為`#app`
createApp(App).mount("#app");

## .vue檔案
Vue將 JS/HTML/CSS三者都放在`.vue`檔案中，經由用處理器將三者分開獨立打包。
以下由App.vue舉例：

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import HelloWorld from "./components/HelloWorld.vue";

@Options({
  components: {
    HelloWorld
  }
})
export default class App extends Vue {}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

App.vue是整個應用程式的入口，整個應用程式就是從這裡開始的。主要分成三格區塊：
1. `<template>` 處理 HTM L樣板語言
2. `<script>` 處理 JS/TS 程式區塊
3. `<style>` 處理 CSS 樣式區塊

### `<template>` 區塊
* 除了基本的HTML外可以使用Vue相關屬性來操作DOM元件

常用例如：
* `v-bind:class`動態指定類別屬性
* `@event`
* `{{ varibale }}`
* `<my-component>` 自定義元件
### `<style>` 區塊
* 專門放CSS的部分
* 若加上`scoped`，如`<style scoped>`，那麼這其中所有的樣式只會發生在這個元件中或其子元件。
* 若子元件中也有`scoped`則父元件將不會將子元件的樣式覆蓋
### `<script>` 區塊
* 程式碼主要處理的地方
* 但每個元件必須要`export default {...}`，才能被其他人`import`到