为了账号安全,请及时绑定邮箱和手机立即绑定

【金秋打卡】第5天 Vue3 + Typescript 从0到1开发通用基础组件(3-1~3-5)

标签:
活动

课程名称Vue3 + Typescript 从0到1开发通用基础组件

课程讲师:张轩

课程内容:

今天课程学习的主要知识点内容包括:
1、vue3 新特性;
2、使用 vue-cli 配置 vue3 开发环境;
3、eslint 不生效的处理方式;
4、vue3解决的问题;

课程收获:

通过学习老师的视频课程和同学的公开笔记,主要收获如下:
一、vue3 新特性
1、性能提升(得益于重写虚拟dom的实现和tree-shaking的优化)
打包大小减少41%
初次渲染快55%,更新快133%
内存使用减少54%

2、Composition API(一系列api的合集,解决复杂组件难以维护的问题)
ref和reactive
computed和watch
新的生命周期函数
自定义函数 - Hooks

4、其他新增特性
Teleport - 瞬移组件的位置
Suspense - 异步加载新组件的新福音
全局API的修改和优化
其他试验中的新特性

5、更好的ts支持

二、使用 vue-cli 配置 vue3 开发环境

// 安装或者升级
npm install -g @vue/cli
# OR
yarn global add @vue/cli

// 保证 vue cli 版本在 4.5.0 以上
vue --version

// 创建项目
vue create my-project

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 - 输入 n,回车
5、Use Babel alongside TypeScript - 输入 n,回车
6、Pick a linter /formatter config - 直接回车
7、Pick additional lint features - 直接回车
8、Where do you prefer placing config for Babel, ESLint, etc.? - 直接回车
9、Save this as a preset for future projects? - 输入 n,回车

三、eslint 不生效的处理方式
如果 eslint 不生效,可以在根目录创建 .vscode 文件夹,然后在文件夹中创建 settings.json
然后输入

{
  "eslint.validate": [
    "typescript"
  ]
}

四、vue3解决的问题
vue2遇到的难题
1、随着功能的增长,复杂组件的代码变得难以维护
(1)功能分散,无法处理,耦合过多
(2)mixin的缺点:①命名冲突;②不清楚暴露出来变量的作用;③重用到其他comonent经常会遇到问题;
2、vue2对于ts支持有限

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消