01、Vue3+TypeScript基礎，建立第一個頁面

像一棵海草海草海草發表於2024-08-17
VueTypeScript

1、main.js程式碼如下：

// 引入createApp用於建立Vue例項
import {createApp} from 'vue'
// 引入App.vue根元件
import App from './App.vue'

const app = createApp(App);
// App.vue的根元素id為app
app.mount('#app')

2、App.vue程式碼如下：

<template>
  <div class="app">
    <h1>好好學習，天天向上</h1>
  </div>
</template>

<script lang="ts">
// JS或TS
</script>

<!--樣式 scoped表示僅本單元有效-->
<style scoped>
.app {
  background-color: #ddd;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
</style>

3、在目錄用Powershell執行npm run dev之後，開啟瀏覽器，檢視效果如下：

相關文章