Vue3 第一堂 安裝與setup語法糖教學

Vue 3.0 -1

摘要

vue 3.0 2020年9月18日所發布，最新公開版本為v3.3.4，(1)性能提升 (2)支援TypeScript (3)新增setup語法糖

建立一個Vue3的專案

官方建議vite建立vue專案，快速建立、按需求編譯、快速熱重載

• 使用vite建立專案，需要先安裝nodejs

安裝指令: npm create vue@latest

安裝流程如下，依照自己需求安裝 <styl

• 安裝VS code 套件 (1) Vue - Official (2) Vue 3 Support - All In One

• 需要安裝專案裡面的npm套件，安裝完後，重開VS code，可以看到index.html為web application的入口

 npm i

• 執行web application

npm run dev

• 我們只要開發網頁應用程式元件、配置等等，都會在src資料夾

  

• 首先認識main.ts，將vue框架引入並掛載#app，#app為index.html的id=app，這是網站的根目錄

src/
/assets 靜態css、圖檔
/components vue元件

Composition API 風格

優勢相對於vue2使用的opton API的方式，利用函數的方式來組織代碼，可以將相關的功能寫在一起。

App.vue

<template>
  <div class="app">
   <hl>您好  </hl> 

   <main-person></main-person>
  </div>
</template>


<script lang="ts">
  import MainPerson  from '@/components/MainPerson.vue';

  export default {
    components: {MainPerson}

  }
</script>

<style>
  .app {
    background-color:lightgray ;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
    color: black;

  }

</style>

components\MainPerson.vue

<template>
    <div class="person">
        <h2>setup 語法糖</h2>
        <h3>姓名: {{name}}</h3>
    </div>
</template>

<script lang="ts" setup name="MainPerson" >
    let name= "張三"

</script>



 scoped>
  .person {
    background-color:lightseagreen ;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
    color: black;

  }

</style>

<script lang="ts" setup name="MainPerson" > 使用setup語法糖可以簡化去設定name和return的麻煩相當於下列這段程式。

<script lang="ts" >
export default{
    let name= "張三"
    
    function Greet(){
        return "您好 "+ name
    }

    return {name, Greet}
}

</script>

安裝 Vue Devtools

使用vue Devtools可以方便查看到vue初始化配置況狀、呼叫方法的過程，這是開發者需要必備開發工具。以下連結可以根據不同瀏覽去安裝該套件 https://devtools.vuejs.org/guide/installation.html