---
# System prepended metadata

title: HelloHello
tags: [Vue.js]

---

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

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

# 前置需求
* 

# 安裝 vue cli
```shell=
npm install -g @vue/cli
# OR
yarn global add @vue/cli
```
![](https://i.imgur.com/sKdqlxJ.png)

## 安裝完成後確認版本
```shell=
vue -V
```

## 刪除
```shell=
npm update -g @vue/cli
# OR
yarn global upgrade --latest @vue/cli
```



# 建立一個 vue 專案
* 在目前資料夾新增一個專案
* 在目前資料夾新增一個資料夾
```shell=
vue create .
# OR
vue create hello-world
```

## 選擇手動安裝
* Manually select features
![](https://i.imgur.com/M9NXkqW.png)
![](https://i.imgur.com/O1M02YE.png)
這邊會顯示一些可以預先安裝的，之後都可以在手動安裝上去
* Babel
* TypeScript
* PWA Support
* Router
* Vue
* CSS Pre-processors
* Linter / Formatter
* Unit Testing
* E2E Test

![](https://i.imgur.com/yrhmlDX.png)

## 選擇vue的版本
![](https://i.imgur.com/92MFvrs.png)





## 選擇安裝方式
![](https://i.imgur.com/aXCHOv7.png)
## 安裝結束
* 結束後他會提醒你`yarn serve`開始開發
![](https://i.imgur.com/BC9cR9E.png)

## 使用開發模式
```shell=
yarn serve
```
![](https://i.imgur.com/W0N35ej.png)
* 完成就會看到你第一個程式了
![](https://i.imgur.com/iCZgeuk.png)


## 專案結構
```shell=
tree -I 'node_module*'
```
![](https://i.imgur.com/3uGtZiG.png)

* 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
```typescript=
// 載入相關的套件、專案檔案等等
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舉例：

```htmlmixed=
<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`到