使用vue-cli创建vue3+ts项目

使用vue-cli创建vue3+ts项目

提示：该文章为vue3+ts的！该文章是博主看的B站尚硅谷视频课来进行整理的！尚硅谷的课真的很不错！

---

---

前言

vue3出了之后，大家已经发现vue3的底层是拿ts写的，当然，vue对ts的适配度可是很好的了，在项目中使用ts做开发的话，可以从开始就能规避很多类型上的一些bug，真的很香啊！这篇文章的话，给大家介绍一下怎样用vue-cli搭建vue+ts的项目！

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、使用 vue-cli 创建项目

官方文档：https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create

## 安装或升级脚手架
npm install -g @vue/cli
## 确保 vue-cli 版本在 4.5.0 以上
vue -V
## 创建项目
vue create ts-demo

---

二、使用步骤

以下为博主自己的搭建方法，大家可以按照自己的习惯来创建

1. Please pick a preset => 选择 Manually select features
   

2. Check the features needed for your project => 选择上 TypeScript ，特别注意点空格是选择，点回车是下一步
   

3. Choose a version of Vue.js that you want to start the project with => 选择 3.x (Preview)

4. Use class-style component syntax => 直接回车
   

5. Use Babel alongside TypeScript => 直接回车

6. Pick a linter / formatter config => 直接回车

7. Use history mode for router? => 直接回车

8. Pick a linter / formatter config => 直接回车

9. Pick additional lint features => 直接回车

10. Where do you prefer placing config for Babel, ESLint, etc.? => 直接回车

11. Save this as a preset for future projects? => 直接回车
    

12. 运行项目

// 进去创建的目录
cd ts-demo
// 运行项目
npm run serve

---

总结

提示：这里对文章进行总结：

以上就是vue3+ts项目搭建，如果您觉得文章有用的话，辛苦大家点个赞或者加个关注啦~，文章不定期更新