安装第三方插件和库
我们用Vue3+TS+Vite搞项目的时候，经常要用到axios这类小助手。装它简直就是小菜一碟！只要在电脑上敲个npm或者yarn，搞定之后看看package.json文件，就会发现axios就在里面等你。
在确保安装成功后，我们就可以开始使用这些第三方插件和库了。
使用第三方插件和库
用咱这Vue 3 + TS + Vite项目，装在上的第三方插件超好用哒！比如想用axios发HTTP请求，就在要用它的地方加个import语句，立马就能搞定。这样一来，axios就顺利进来了，各种方便的功能都能用上。这种方法简单明了，学起来快，用起来也方便。
Reactivity的处理
npm install axios
Vue3里的响应式真的很厉害！可惜有些第三方库还没跟上步伐，可能会给我们带来点小困扰。不用担心，我这儿有两个妙招可以帮你解决！
yarn add axios
方法很容易！到npm或者yarn上挑选适合Vue3使用的第三方库就好。现在很多常用的库都有针对Vue3的版本，只需要找到标明是适用于Vue3的那款，就能安心装上去了。比如要在Vue3项目中用Vuex的话，只需在此二处搜索并下载Vue3版的Vuex，然后直接安装即可。
没问题你完全可以轻松拿下Reactivity。如果在用Vue 3找不到合适的第三方库怎么办呢?别急，我们完全可以自己来解决！事实上，Vue 3提供了强大的功能，像是reactive和toRefs这样的函数，能够轻松地将第三方库中的数据转变成Vue 3能处理的格式，这样一来就方便多！
类型定义问题
装插件老是碰上类型定义的问题，像是TypeScript那种。搞定它们也挺容易的，看情况处理就对了。
别慌，咱先上网查查攻略，问问其他网友有没有碰见过这种情况。还能去GitHub逛逛，那儿大家都在分享经验，说不定你也能找到答案~
import axios from 'axios'
// 在需要使用axios的地方进行请求
axios.get('/api/data').then(res => {
console.log(res.data)
})
别怕！自己也能搞定类型声明文件，或者用类型断言试试看。要是有些第三方库没送全套类型描述咋办？那咱就根据实际情况自个儿写个合适的.d.ts声明文件，或者用类型断言躲开类型检测这一关。
别忘了还有any这个妙招儿能防失手，或者调整下tsconfig.json文件里的设置让判断更准确也行！
优化打包配置
压缩包越来越大，怎么破？别急，看看压缩设置，找找解决方案。
知道Vite吗？超好用！它能搞定静态文件和代码拆分之类的事儿。关键是得巧妙设置Vite，用上那些神奇小插件，让组件想用就用，这样就能把打包文件体积减到最小，保证你的网页飞快如闪电！
憋忘了在生产环境中用压缩和混淆代码的办法来改善打包效果！
调试技巧
搞定 Vue3+TS+Vite 项目还得靠调试功夫，学会这几个小技巧能帮助你更快地发现并修复错误喔！
好，其实浏览器自带的“开发者工具”调起来也挺容易的，你就在那里面乱点点，看看网页运行得怎么样，网速如何，还可以看到发来什么请求，这样就能找出问题了。
试试 VS Code 这个超好用的编辑器，自带的调试功能就能设断点看变量，清清楚楚了解代码执行过程。遇到 bug 也不用怕，分分钟搞定！
那么就让这些工具（例如日志&性能工具）帮咱们快些找到问题所在。
npm install vuex@next
持续集成与部署
yarn add vuex@next
搞定项目，就是得让自动构建啊、测试呀和部署之类的程序跑起来顺溜溜的，这就是CI/CD的神奇之处。有了它，这些步骤能瞬间完成，还能告诉我们进度如何，大大提高咱们的工作效率
在搞vue 3 + TS + Vite项目的时候，别忘了GitHub Actions这类高大上的工具。加上Netlify或Vercel两个伙伴，自行部署就完成了。搞定了CI/CD这个流程，每次提交都能自动生产、测试并上线，让你的开发更高效，项目上线也快多了。
文档与知识管理
文件和知识管理可是太关键，这样咱们才能搞好团队协作，项目也能做得长长久久。就拿用Vue3+TS+Vite做的项目来说，经常更新文件、理清知识框架，能让我们交流得更快更好，干活儿更舒心省事儿！
咱用Confluence或者Notion写技术文档啥的，还好有个Wiki存知识和分享经验！
社区与开源贡献
别瞧不起社区跟开源贡献，不仅可以提升自己的技术水平，也是带动整个圈子进步的好方法
去Vue.js论坛跟大家侃大山，在GithubIssue上回复下就有机会扩大你的人气了，说不定还能交到新朋友！
import axios from 'axios'
import { reactive, toRefs } from 'vue'
export default {
setup() {
const data = reactive({
result: null,
loading: true,
error: null
})
axios.get('/api/data')
.then(res => {
data.result = res.data
})
.catch(error => {
data.error = error
})
.finally(() => {
data.loading = false
})
return {
...toRefs(data)
}
}
}
评论0