#初创项目文件介绍
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>
小结: