一个基于vue3+ts+vite项目搭建初探

下面是关于“一个基于vue3+ts+vite项目搭建初探”的完整攻略。

1. 安装vite

首先，我们需要安装vite，可以使用npm或yarn进行安装，输入以下命令：

npm install -g vite    # npm安装
# 或
yarn global add vite   # yarn安装

这里我们选择使用npm进行安装。

2. 创建项目

在一个合适的目录下，输入以下命令，创建一个基于vue3+ts的项目：

npm init vite@latest my-vue3-app --template vue-ts

这里，我们使用了vite官方提供的模板vue-ts来创建项目。

3. 运行项目

完成上一步后，进入项目目录，运行一下命令：

cd my-vue3-app
npm install
npm run dev

等待一会儿，控制台中会出现Server running at的提示信息，此时，打开http://localhost:3000，

你将会看到一个基于vue3编写的网站。

4. 修改项目

接着，你可以根据自己的需求编辑网站的内容或者进行扩展。

例如：我们可以新增一个组件，在src/components/目录下创建名为HelloWorld.vue的文件，输入以下代码：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>
      For a guide and recipes on how to configure / customize this project, check out
      the
      <a href="https://vitejs.dev/guide/">vitejs.dev/guide/</a>.
    </p>
    <p> 如果你需要详细的讲解可以来我的博客：  </p>
    <p> <a href="https://www.jianshu.com/p/7d4c15752040">vue3 基础+实战教程</a> </p>
  </div>
</template>

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

export default defineComponent({
  name: 'HelloWorld',
  props: {
    msg: String
  }
})
</script>

<style scoped>
.hello {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 2em;
  color: #42b983;
}
</style>

修改App.vue，使其引入HelloWorld.vue组件：

<template>
  <div class="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.ts App" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import HelloWorld from './components/HelloWorld.vue'

export default defineComponent({
  name: 'App',
  components: {
    HelloWorld
  }
})
</script>

<style>
// ...
</style>

保存修改后，刷新网页，你将会看到页面上多了一段文字。

5. 打包项目

完成网站编写后，我们可以使用以下命令对整个项目进行打包：

npm run build

打包完成后，会生成一个dist目录，里面包含了打包好的js、css、html等文件。

以上就是基于vue3+ts+vite项目搭建及初步使用的完整攻略。

示例一：基于Vue3 + TypeScript + Vite搭建TodoList应用，代码详解请查看我的博客：基于Vue3 + TypeScript + Vite搭建TodoList应用

示例二：Vue3 + Typescript + Vite实现一个弹幕墙应用，代码详解请查看我的博客：Vue3 + Typescript + Vite实现一个弹幕墙应用。