vite 创建 vue3 + ts项目

最新推荐文章于 2024-04-03 16:09:24 发布

Luck Young

最新推荐文章于 2024-04-03 16:09:24 发布

阅读量1.3k

点赞数 1

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

本文链接：https://blog.csdn.net/Mote123/article/details/111439523

版权

49 篇文章 0 订阅

订阅专栏

24 篇文章 0 订阅

订阅专栏

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

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

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

关注