搭建项目开发工具

开发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
    在这里插入图片描述
# typescript # javascript # 前端
Logo
腾讯云开发者社区

腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。

更多推荐

终极指南：Flink SQL连接器版本管理从混乱到有序的升级之路

Apache Flink作为流处理领域的佼佼者，其SQL连接器的版本管理一直是开发者面临的核心挑战。本文将系统讲解Flink SQL连接器版本管理的最佳实践，帮助你轻松应对版本兼容性问题，实现从混乱到有序的升级之旅。## 连接器版本管理的常见痛点 😫在Flink应用开发中，连接器版本管理常常让开发者头疼不已。不同版本的连接器可能导致各种兼容性问题，例如API变更、功能差异甚至运行时错误。

avatar 腾讯云开发者社区

Elasticsearch复杂数据类型终极指南：从入门到精通

Elasticsearch作为功能强大的搜索引擎，支持多种复杂数据类型，让开发者能够灵活处理各种结构化和非结构化数据。本文将带你全面了解Elasticsearch中的复杂数据类型，从基础概念到实际应用，助你轻松掌握数据建模的核心技巧。## 内部对象：构建层级化数据结构在Elasticsearch中，对象类型（Object）是最基础的复杂数据类型之一，用于表示具有嵌套关系的数据。例如，我们可

avatar 腾讯云开发者社区

如何快速搭建Neon无服务器PostgreSQL：面向初学者的完整指南

Neon是一款革命性的无服务器PostgreSQL解决方案，它通过分离存储和计算层，实现了自动扩缩容、类代码式数据库分支以及零级扩展能力。本指南将帮助你从零开始搭建Neon开发环境，体验这款创新数据库的强大功能。## 准备工作：环境要求与依赖项在开始搭建Neon环境前，请确保你的系统满足以下要求：- Linux操作系统（推荐Ubuntu 20.04+或Debian 11+）- Git

avatar 腾讯云开发者社区