详解vite+ts快速搭建vue3项目以及介绍相关特性

概述

在本篇教程中，我们将详细讲解使用vite和typescript快速搭建Vue3项目的步骤，并介绍Vue3的相关特性。

准备工作

在开始之前，需要确保你已经安装了node.js和npm包管理器。如果你没安装，可以前往官网下载安装程序。

创建项目

步骤如下：
1. 打开终端，进入你想要创建项目的目录。
2. 运行以下命令创建Vue3项目：

npm init vite@latest my-vue-project -- --template vue-ts

其中，my-vue-project是你的项目名称，也可以使用其他名称，vue-ts为vite提供的Vue3+typescript模板，您可以在此处选择您要用的其他模板。运行该命令后，将会下载所有依赖项并创建vue3项目的初始文件结构。

运行项目

步骤如下：
1. 进入项目目录，运行以下命令：

npm install

这将安装项目的所有依赖项。

1. 运行以下命令启动开发服务器：

npm run dev

在终端中查看输出，找到“Local:”行，里面描述了您应该在浏览器中输入的URL地址。现在，您可以打开浏览器并输入该地址，以查看项目。

项目结构分析

下面我们来看一下创建Vue3项目后的文件结构：

• public/目录：包含了一些和项目构建无关的静态资源，比如不需要被webpack处理的图片。
• src/目录：项目的主要代码存放目录，所有的Vue组件、页面以及其他的代码都应该位于此目录下。
• App.vue：根组件。
• main.ts：项目入口文件，创建了Vue实例。
• components/目录：存放Vue组件。
• views/目录：存放页面组件。
• package.json文件：项目中使用的依赖列表、命令脚本等都记录在此处。

Vue3的相关特性

现在我们来介绍Vue3的两个重要特性：
1. Composition API
2. Teleport

Composition API

Composition API是Vue3中的新特性之一。它提供了一种基于函数的API，使得组件更容易维护和重用，而不是像Vue2一样使用Options API。

一些常用的核心函数包括：reactive、ref、watchEffect、watch等。我们可以通过定义一个对象，然后把对象中的属性定义为Ref对象或reactive对象，实现响应式。例如：

import { reactive, ref } from 'vue';

interface State {
  count: number
  message: string
}

export default function useMessage(): {[key: string]: any} {
  const state = reactive<State>({
    count: 0,
    message: '',
  });

  const countRef = ref(state.count);

  return {
    state,
    countRef,
  }
}

Teleport

Teleport是Vue3中的另一个新特性，它是一种Portal技术的实现，允许我们把组件的DOM在父组件之外渲染，而不必担心CSS样式的影响。

使用Teleport需要在组件中添加Teleport组件。以下是一个简单的例子：

<template>
  <div>
    <button @click="show = !show">Toggle Popup</button>

    <teleport
      to="body"
    >
      <div
        v-if="show"
        class="popup"
      >
        <h2>Popup</h2>
        <p>Popup content</p>
      </div>
    </teleport>
  </div>
</template>

<script>
import { reactive } from 'vue';

export default {
  name: 'ComponentWithTeleport',
  setup() {
    const state = reactive({
      show: false,
    })

    return state;
  },
}
</script>

<style>
.popup {
  background-color: white;
  border: 1px solid gray;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 1em;
}
</style>

示例说明

下面演示如何使用Composition API和Teleport。

示例1

在项目中创建一个名为Example1.vue的组件，并使用Composition API实现以下功能：
1. 定义一个响应式状态isShowing，初始值为false。
2. 当用户单击按钮时，将isShowing状态切换为相反的值。

<template>
  <div>
    <button @click="toggle">Toggle Button</button>
    <teleport to="body">
      <div v-if="isShowing" class="popup">
        <h2>Popup</h2>
        <p>Popup content</p>
      </div>
    </teleport>
  </div>
</template>

<script lang="ts">
import { reactive, defineComponent } from 'vue';

export default defineComponent({
  setup() {
    const state = reactive({
      isShowing: false,
    });

    const toggle = () => {
      state.isShowing = !state.isShowing;
    }

    return {
      ...state,
      toggle,
    };
  }
})
</script>

示例2

在项目中创建一个名为Example2.vue的组件，并通过Teleport实现以下功能：
1. 把组件的DOM在父组件之外渲染。
2. 提供一个按钮，单击时弹出modal。
3. modal中有表单和关闭按钮，另外增加一个“确认”按钮，单击时弹出输入框的值。

<template>
  <div>
    <button @click="isShowing = true">Show Modal</button>

    <teleport to="body">
      <div class="modal" v-if="isShowing">
        <div class="modal-overlay" @click="isShowing = false"></div>
        <div class="modal-dialog">
          <form @submit.prevent="submit">
            <label for="name">Your Name:</label>
            <input id="name" type="text" v-model="form.name">

            <button class="modal-close" type="button" @click="isShowing = false">&times;</button>
            <button type="submit">Submit</button>
          </form>
        </div>
      </div>
    </teleport>
  </div>
</template>

<script lang="ts">
import { reactive, defineComponent, Ref } from 'vue';

interface Form {
  name: string
}

export default defineComponent({
  setup() {
    const state = reactive({
      isShowing: false,
      form: {
        name: '',
      },
    });

    const submit = () => {
      alert(state.form.name);
    }

    return {
      ...state,
      submit,
    };
  }
})
</script>

<style>
.modal {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.modal-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0,0,0,0.5);
}

.modal-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 1em;
  border: 1px solid gray;
}

.modal-close {
  position: absolute;
  top: 0;
  right: 0;
  border: none;
  background-color: transparent;
  font-size: 2em;
  cursor: pointer;
}
</style>

以上就是使用vite和typescript快速搭建Vue3项目以及介绍相关特性的完整攻略，包含了两个示例的详细说明。希望本文可以帮助您快速入门Vue3。