Vite+Vue3+TS 项目搭建

原创已于 2025-04-28 17:18:45 修改 · 2.2k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

于 2021-05-12 18:19:25 首次发布

Vue3 专栏收录该内容

1 篇文章

订阅专栏

本文介绍两种使用Vite结合Vue3和TypeScript快速搭建项目的方案。方案一通过命令行直接创建项目并配置；方案二则详细介绍全局安装Vite、创建项目、配置TypeScript及Vue Router的过程。

方案一

直接在命令行执行以下命令：

yarn create @vitejs/app

出现以下错误：

升级node版本即可：sudo n stable

再次运行命令，输入项目名称，选择vue、ts即可。

进到该项目目录下，安装依赖，执行 npm run dev 即可在本地服务器进行预览调试。

方案二

1、全局安装 vite： npm i vite -g

2、新建文件夹，执行命令：npm init vite-app

3、打开该文件夹，安装依赖，执行 npm run dev 即可预览页面

4、配置ts：npm i -S typescript

npx tsc --init , 创建 tsconfig.json 文件
把根目录下的 main.js 文件名改为 main.ts
把根目录下的 index.html 中引入的 main.js 改为 main.ts
同时把 .vue 文件里的 <script> 标签中加入 lang='ts'
在项目根目录创建 shim.d.ts 文件，同时写入以下代码，用于配置 ts 支持识别 .vue 文件

declare module "*.vue" {
	import { Component } from "vue";
	const component: Compoent;
	export default component;
}

5、配置 router： npm i -S vue-router@next

在 src 目录下建立 router 目录，创建 index.ts 文件，并写入以下代码：

import { RouteRecordRaw, createRouter, createWebHistory } from "vue-router";

const routes: RouteRecordRaw[] = [
  {
    path: "/",
    name: "Home",
    component: import("../views/index.vue"),
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;

修改 main.ts 文件引入 vue-router

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router/index";

createApp(App).use(router).mount("#app");