最新版vue3+TypeScript开发入门到实战教程之搭建开发工具与项目结构分析开发vue3 ，官方推荐使用vscod

搭建项目开发工具

开发vue3工具很多，如后端常用工具IntelliJ IDEA ，webstorm。但官方推荐使用vscode，还特地为vscode开发新的插件Vue-Official。

下载安装vscode

下载地址

项目结构目录文件

安装完vscode，打开hello-world目录，项目结构如下在这里插入图片描述

.vscode目录目录内有extensions.json文件,是开发项目所需vscode插件，当打开ts或者vue文件时，vscode会根据该文件自动提示安装插件。
public 存放网页logo，favicon.ico，也叫标签图标。
src 项目开发源代码，基本都在此文件夹，详见下文说明
.gitignore github忽略的文件，指代哪些文件或者文件夹不需要同步到github
env.d.ts 声明项目认识的文件类型，如.css、.vue、.ts、text、png等等，若将其删除，常见的文件类型项目都不认识，将无法通过import导入到文件中。
index.html 项目入口文件，与vue2 main.js不同。
package.json npm 包管理文件，如安装axios会在这里添加，再执行npm i即可。也可通过npm install axios，会自动在该添加
README.md 简单对工程介绍
tsconfig.app.json、tsconfig.json、tsconfig.node.json ts配置文件
vite.config.ts 整个工程配置文件，如安装插件，配置代理

详细说明src文件夹

在这里插入图片描述

main.ts

项目入口文件 index.hmtl,通过标签引入文件main.ts，开启整个工程。打开 index.hmtl、main.ts参看具体内容：

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

# 引入样式
import './assets/main.css'
#引入vue3
import { createApp } from 'vue'

# 导入app组件
import App from './App.vue'
# 通过vue3创建组件app
const app = createApp(App)
# 将app挂在到index.html中id为app的div中
app.mount('#app')

如下流程： 1、引入vue3中createApp函数和组件App。 2、调用createApp函数，传参为App组件。创建app对象。 3、将app挂在到index.html中id为app的div中。 4、根组件app内容将显示在div中。

components 组件目录，存放含有各种功能的子组件，将其挂在到根组件App中。
assets 固有css样式，如bootstrap放到目录中，通过import引入到工程中全局使用。
router 用户在创建工程时，若选择路由功能，则出现该文件夹，路由功能描述各个组件如何跳转浏览。

创建最简单的hello-world

删除src文件夹所有内容
创建src文件夹
在src文件夹创建main.ts
在src文件夹创建App.vue 由于入口文件已经引入main.ts,编辑main.ts和App.vue如下

main.ts具体内容

import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.mount('#app')

App.vue具体内容

<template>
  <div class="app">helllo world!  </div>
</template>

<script lang="ts">
export default{
  name:'App'
}
</script>

<style lang="css">
.app{
  background-color: #ccc;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding:  10px;
}
</style>

App.vue具体内容包含三要素，

template模本，显示html标签
script脚本执行js或者ts代码
style样式 html显示具体样式打开控制台，运行项目npm run dev，在浏览器访问http://localhost:5173