vite 创建 vue3 + ts项目

最新推荐文章于 2025-03-25 11:39:33 发布

Luck Young

最新推荐文章于 2025-03-25 11:39:33 发布

阅读量1.4k

点赞数 1

分类专栏：前端 Vue 文章标签： vue vite ts typescript vue3

本文链接：https://blog.youkuaiyun.com/Mote123/article/details/111439523

版权

49 篇文章

订阅专栏

24 篇文章

订阅专栏

本文介绍了Vue3+TS项目的创建过程。首先要创建文件夹并初始化项目、安装依赖；接着添加typescript需先添加依赖，再用vue添加插件；插件安装完成后，若看不到初始化页面，需在项目根目录下修改；最后运行项目，无错误则表示创建成功。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

创建一个文件夹，名称就是你的项目名称即可，在文件夹中使用以下命令
初始化项目

npm init vite-app

安装依赖

npm install 
或
yarn

添加typescript，这里直接使用vue add typescript会报错，需要先添加一个依赖

npm install @vue/cli-service --save-dev
或
yarn add @vue/cli-service -D

使用vue添加插件，如果没有安装@vue/cli的先全局安装

npm install -g @vue/cli

然后再使用

vue add typescript

等待插件安装完成后，使用yarn dev或npn run dev运行后，浏览器里面看不到初始化页面，现在需要在项目根目录下修改index.html，将body标签中的

<body>
  <div id="app"></div>
  <!-- 原项目此处引入的是js -->
  <script type="module" src="/src/main.js"></script>
</body>

修改为

<body>
  <div id="app"></div>
  <!-- 现在修改为此处引入的是ts -->
  <script type="module" src="/src/main.ts"></script>
</body>

yarn dev
或
npm run dev

当出现一下页面，且浏览器控制台没有啥错误时，表示项目就成功创建完成了！
创建成功页面