使用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项目搭建，如果您觉得文章有用的话，辛苦大家点个赞或者加个关注啦~，文章不定期更新