初创项目文件介绍

#初创项目文件介绍

main.ts主程序入口

// 程序主入口文件，是ts文件，是main.ts
// 引入createApp函数，创建对应的应用，产生应用的实例对象
import { createApp } from 'vue'
//引入App组件（所有组件的父级组件）
import App from './App.vue'
//创建App应用返回对应实例对象，调用mount方法进行挂载，挂载/public/index.html中id=app的组件
createApp(App).mount('#app')

App.vue是一个组件

<!--App.vue是一个组件-->
<template>
<!---->
  <img alt="Vue logo" src="./assets/logo.png">
<!--使用HelloWorld子级组件-->
  <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
</template>

<script lang="ts">
//这里是写ts的区域
//defineComponent函数，目的是定义一个组件，内部可以传入一个配置对象
import { defineComponent } from 'vue';
//引入一个子级组件helloWord
import HelloWorld from './components/HelloWorld.vue';

//暴露一个定义好的组件
export default defineComponent({
  //组件名称App
  name: 'App',
  //注册组件
  components: {
    //注册一个子级组件
    HelloWorld
  }
});
</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>

小结：