创建项目
vue create vue-demo选择Manually select features【手动配置】
如上图选择配置项，并在下一步，选择3.x
接下来，按照推荐设置，进行选择【推荐设置都已英文字母大写的形式提示】，CSS pre-processor【CSS预处理】，选择less，Pick a linter / formatter config 【选择语法检测规范】，选择 ESLint + Standard confg【标准配置】
目录文件说明
浏览目录及文件，可以发现，与普通vue工程项目，所有的js的文件，都变成了ts文件。除此之外，还多了几个文件。
registerServiceWorker.ts
service worker 是在后台运行的一个线程，可以用来处理离线缓存、消息推送、后台自动更新等任务。
registerServiceWorker 就是为 vue 项目注册了一个 service worker，用来做资源的缓存，这样你下次访问时，就可以更快的获取资源。而且因为资源被缓存，所以即使在离线的情况下也可以访问应用（此时使用的资源是之前缓存的资源）。
但有一点要注意，registerServiceWorker 注册的 service worker 只在生产环境中生效（process.env.NODE_ENV === ‘production’），所以开发的时候，是没有的~~~
当然了，在生产环境中，你也可以选择使用或者不适用这个功能。
shims-vue.d.ts
shims-vue.d.ts是为了 typescript 做的适配定义文件，因为.vue 文件不是一个常规的文件类型，ts 是不能理解 vue 文件是干嘛的，
加这一段是是告诉 ts，vue 文件是这种类型的。
这一段删除，会发现 import 的所有 vue 类型的文件都会报错。
tsconfig.json
这个 ts 配置文件是我们项目中 ts 的一个核心配置，我们学习的话，主要去 ts 官网进行一边看一边学习。
原创文章，作者：ZERO，如若转载，请注明出处：https://www.edu24.cn/course/vue/vue3-ts-illustrate.html
微信扫一扫 
支付宝扫一扫 