V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
LeeReamond
V2EX  ›  Vue.js

Vue3.0 如何快速入门?

  •  
  •   LeeReamond · 2022-02-24 09:56:34 +08:00 · 8442 次点击
    这是一个创建于 1001 天前的主题,其中的信息可能已经有所发展或是发生改变。

    需求:按照生产级最佳实践部署小而美的 demo 项目。

    背景知识:vue2 使用比较熟练,没用过 typescript

    要快速达成需求有什么推荐的阅读项目或者教学吗?

    第 1 条附言  ·  2022-02-24 18:41:43 +08:00
    贴个条,按楼下 v 友回复看了一些教学,似乎 vue3 开始主要构建方式分裂成 cli+webpack 是一种,vite 是另一种。使用 vite 构建的有什么好的教学推荐吗,我看 B 站点击最多的是使用 cli 构建,这种东西包引入、工程目录啥的说重要不重要的东西感觉还是很花经历,我觉得如果用 vite 那就不要看 cli 的教学比较好。。
    47 条回复    2022-03-07 14:14:01 +08:00
    cxe2v
        1
    cxe2v  
       2022-02-24 10:01:48 +08:00   ❤️ 1
    没有,看一看 vue3 的官方文档就行了,目前没什么坑了,现公司项目就是 vue3
    zhaol
        2
    zhaol  
       2022-02-24 10:07:50 +08:00   ❤️ 1
    不用 ts 跟 vue2 差不多,看一下文档就大概知道差别了。建议顺便学习一下 ts ,真的好用。主要是 vite + vue3 贼舒服
    xujiahui
        3
    xujiahui  
       2022-02-24 10:08:25 +08:00   ❤️ 3
    可以看看大神的项目模板 https://github.com/antfu/vitesse ,下面还有很多 Variations 项目,挑自己喜欢的,具体组件的写法有不懂的查文档就行
    bootvue
        4
    bootvue  
       2022-02-24 10:28:04 +08:00
    非前端 vue3 仅供学习参考 ^_^

    https://github.com/vbeats/vdashboard
    Chism
        5
    Chism  
       2022-02-24 11:03:17 +08:00 via Android
    看了一下 npmjs 的周下载量,react 是 vue 的 5 倍,如果不是公司强制用 vue ,可以考虑学 react
    bootvue
        6
    bootvue  
       2022-02-24 11:34:09 +08:00
    @Chism 是 想在前端长期发展的话还是 react 生态更好
    ALVC666
        7
    ALVC666  
       2022-02-24 11:35:39 +08:00
    vue3 tsx tailwind 还行
    kensoz
        8
    kensoz  
       2022-02-24 11:36:57 +08:00
    有时间就去 b 站搜一下 vue3 视频。
    然后建议改一下原有的 vue2 的东西,这样不仅学习 vue3 还能找出两者的区别。

    如果时间有限,建议直接学官网的组合式 API 。
    因为即便你不学 vue3 ,vue3 里也可以使用 vue2 的选项式 API ,新的东西就是组合式 API 。

    如果不准备用 ts 不需要学 ts ,准备用 ts 建议从 ts 基础开始学
    leega0
        9
    leega0  
       2022-02-24 11:39:05 +08:00
    @zhaol ts 有啥好的练手教程或经验么,现在读了下文档敲了下代码,就是不知道怎么去场景应用
    mxT52CRuqR6o5
        10
    mxT52CRuqR6o5  
       2022-02-24 11:45:12 +08:00
    vue3 似乎是主推 script setup ,和 vue2 的形式还是差挺多的
    LeeReamond
        11
    LeeReamond  
    OP
       2022-02-24 11:46:42 +08:00 via Android
    @kensoz 有什么合适的视频推荐么
    kensoz
        12
    kensoz  
       2022-02-24 11:52:40 +08:00
    @LeeReamond
    在 b 站搜 vue3 ,有一个某前端男神的教程就可以,vue2+vue3 的,vue3 在后半部分,讲的不错
    Tokin
        13
    Tokin  
       2022-02-24 13:11:35 +08:00
    建议使用 jsx 、tsx 开发,非常舒适
    liujavamail
        14
    liujavamail  
       2022-02-24 13:15:17 +08:00
    @kensoz 张天禹呗
    IsmeOvo
        15
    IsmeOvo  
       2022-02-24 13:18:34 +08:00   ❤️ 2
    XCFOX
        16
    XCFOX  
       2022-02-24 13:37:22 +08:00   ❤️ 2
    @Chism #5
    个人感觉 Vue 3.0 的数据更新机制比 React 好太多了。
    React 因为它函数式编程的思路,每次数据更新都要重构组件。这就要求开发者需要手动权衡组件更新的开销对其进行优化,体现在代码上就是到处 memo 、useMemo 。
    而 Vue 3 是通过 Proxy 监听依赖变化,数据更新时不必重构整个组件,通常不需要开发者手动优化,写起来顺畅多了。

    如果要深耕前端的话,React 是必学的。
    单纯做项目小而美的 demo 项目的话,目前 Vue3.0 就是我最心悦的框架了。
    lisongeee
        17
    lisongeee  
       2022-02-24 13:44:48 +08:00
    @Tokin vue 用 tsx 舒适吗? 我现在是 vite+vue+ts++setup+volar ,在 template 里能获得完整的类型提示。能告知一下 tsx 需要搭配什么吗? 有何取舍?
    caisanli
        18
    caisanli  
       2022-02-24 13:49:53 +08:00 via iPhone
    官网有个 vue2 如何迁移 vue3 的文档 应该是最好上手的
    LeeReamond
        19
    LeeReamond  
    OP
       2022-02-24 14:46:28 +08:00
    @kensoz UPid 多少,搜不到
    RickyC
        20
    RickyC  
       2022-02-24 15:12:57 +08:00
    vue3 和 vue2 有区别吗?
    就记得 vue2 是 data:{}
    vue3 是 data(){return{}}
    vue3 不能用$router.push
    MacDows
        21
    MacDows  
       2022-02-24 15:14:10 +08:00 via Android
    最近刚遇到这个问题,官网看文档,然后有例子
    自己做一个就差不多了
    注意要看 V3 的文档和例子
    libook
        22
    libook  
       2022-02-24 15:32:49 +08:00
    Vue3 不强制要求 Typescript ,就用 JS 写就行。
    Vue3 大体上使用方式和 Vue2 一样,具体差异可以在 Vue 官网的 [文档] => [从 Vue2 迁移] 了解。
    快速开发可以直接用 Vue CLI 生成项目框架,如果不想用 Webpack 等打包工具可以了解一下官方文档安装部分的 [ 使用 CDN 或没有构建工具] 。
    wangtian2020
        23
    wangtian2020  
       2022-02-24 15:40:07 +08:00
    以前只写过 vue2 ,写的熟练度还比较一般
    换公司后新公司框架用 vue3 ,我 3 天上手,现在写起来嗖嗖嗖
    入门老快了,直接按照文档用 vite 快速创建项目,照着 helloworld 的页面,往后写就是了


    多看文档,如果有已有项目直接照着写,每天都是实战,能力提升快。sfc 写法和`export default defineComponent`写法现在我都会了,我更喜欢 sfc 的简洁
    murongxdb
        24
    murongxdb  
       2022-02-24 15:44:35 +08:00   ❤️ 2
    @RickyC 你的回答证明了你一点也不会用 vue 😂
    toacnme
        25
    toacnme  
       2022-02-24 16:13:39 +08:00
    看你们团队的擅长的方向吧,但是从 vue2 就开始使用 ts 的我给个建议,用 vue 建议就别上 ts 了,用 js 就行了。
    举个例子:
    你定义好了一个请求的返回的数据,ts 已经定义好了类型,scrpit 里面你可以 . 一下能出来对应的数据,在 template 没有用。
    yunye
        26
    yunye  
       2022-02-24 16:17:24 +08:00   ❤️ 1
    https://www.bilibili.com/video/av925511720/
    这个系列视频可以帮你快速上手 Composition API ,十几分钟学会
    inhons
        27
    inhons  
       2022-02-24 16:19:47 +08:00
    岔个话题,我又来推荐 Svelte 了
    darknoll
        28
    darknoll  
       2022-02-24 16:29:04 +08:00
    我还是觉得 react 设计得更好,不过在天朝还是先学 vue 吧
    christin
        29
    christin  
       2022-02-24 16:40:42 +08:00   ❤️ 1
    vue3 不用 setup 的话和 vue2 一样,用 setup 的话上手很快的,一两天就会了
    xingstar
        30
    xingstar  
       2022-02-24 17:44:40 +08:00
    耐撕,收藏下😂
    yao00jun
        31
    yao00jun  
       2022-02-24 21:18:37 +08:00
    我也想知道,收藏下😂
    charlie21
        32
    charlie21  
       2022-02-24 21:24:50 +08:00
    可以的
    ruoxie
        33
    ruoxie  
       2022-02-24 23:58:34 +08:00
    https://github.com/lowcode-scaffold/vue-mvp 别再按照 vue2 的方式写了
    lupkcd
        34
    lupkcd  
       2022-02-25 01:34:52 +08:00
    vuejs.org 新文档了
    Huozy
        35
    Huozy  
       2022-02-25 08:08:26 +08:00
    我想知道楼主 vue2 是看的什么文档学习的
    charlie21
        36
    charlie21  
       2022-02-25 08:22:12 +08:00
    react 到处 memo 哈哈哈
    fqy12300
        37
    fqy12300  
       2022-02-25 09:29:57 +08:00
    有什么学 Vue2 的视频推荐吗?求彦祖们推荐一下。
    96412hj
        38
    96412hj  
       2022-02-25 10:54:13 +08:00
    一直没搞明白,我用 vue-property-decorator 和 vue3 有啥区别,vue-property-decorator 这种写法也能写 ts ,我觉得写起来比 vue3 都舒服,不用什么 setup ,直接 private 和 public,get ,哪位大佬能给我科普下,让我长长见识
    wjx0912
        39
    wjx0912  
       2022-02-25 11:17:49 +08:00
    https://github.com/vbenjs/vue-vben-admin
    vue2 会一些,vue3 直接学的这个项目
    hunter0122
        40
    hunter0122  
       2022-02-25 12:19:09 +08:00
    @LeeReamond 尚硅谷的视频,第一个就是
    SixGod66
        41
    SixGod66  
       2022-02-25 12:50:09 +08:00
    会 v2 ,v3 看官方文档上手很快的。项目的话,推荐 https://github.com/vbenjs/vben-admin-thin-next
    LeeReamond
        42
    LeeReamond  
    OP
       2022-02-25 22:33:05 +08:00
    @hunter0122 他那个我看了,后面是讲的 vuecli 的 3 版本,但是本帖里面我看全是在说 vite 的
    Bingchunmoli
        43
    Bingchunmoli  
       2022-02-25 23:43:40 +08:00
    我现在卡壳的点变成了 css 难产。 因为是后端,前端一点点的忘了。 所以 css 和 vue3 不熟悉是前端难产的点(vue2 至少写过一点点)
    GoogleUser
        44
    GoogleUser  
       2022-02-26 13:12:47 +08:00
    楼主看看这个入门指南咋样?
    github.com/chengpeiquan/learning-vue3
    alleluya
        45
    alleluya  
       2022-03-02 08:55:25 +08:00
    @GoogleUser chengpeiquan 这个入门指南感觉不错 我开始学 vue3 的时候也是看这个
    akring
        46
    akring  
       2022-03-07 12:05:48 +08:00
    @Bingchunmoli #40 Tailwind 欢迎你
    yunye
        47
    yunye  
       2022-03-07 14:14:01 +08:00
    @Bingchunmoli tailwindcss+tailwindcomponents+daisyui
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1436 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 33ms · UTC 23:55 · PVG 07:55 · LAX 15:55 · JFK 18:55
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.