Vue3.0 如何快速入门? - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
LeeReamond
V2EX    Vue.js

Vue3.0 如何快速入门?

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

    需求:按照生产级最佳实践部署小而美的 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 贼舒服
    jawilx
        3
    jawilx  
       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
      &nsp; 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 ,哪位大佬能给我科普下,让我长长见识
    datadump
        39
    datadump  
       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     Solana     5230 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 36ms UTC 09:11 PVG 17:11 LAX 01:11 JFK 04:11
    Do have faith in what you're doing.
    ubao msn snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86