search.png
关于我
 menu.png
Vue3学习笔记(1)

Vue大法好！

放假了回家定下的一个小目标就是拿下vue3，现在就开始吧。给大家推荐我学习的视频：尚硅谷的ts+vue3混合双打课程《https://www.bilibili.com/video/BV1ra4y1H7ih?p=42&spm_id_from=pageDriver》

多的不说，先helloworld

  1. 查看vue cli版本：vue -V
    需要高于4.5
  2. 如果版本不够：npm install -g @vue/cli
  3. 建项目：vue create helloworld
  4. 选择手动：
    在这里插入图片描述
    在这里插入图片描述

    勾选TypeScript
    在这里插入图片描述
    在这里插入图片描述

    选择3.x
    在这里插入图片描述
    在这里插入图片描述

    然后一路回车
    cd helloworld
    yarn serve

启动完成：
改一下helloworld的代码，

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

vite [vit]

vite可以提升打包、热部署、冷启动的速度，据说是利用了浏览器对es6+语法的支持，不对文件进行编译es5从而提升的速度。

  1. npm init vite-app hello-vite
  2. cd hello-vite
  3. yarn
  4. yarn vite
    非常快啊，几乎是秒启动
    在这里插入图片描述
    在这里插入图片描述

    打开也是飞快：
    在这里插入图片描述
    在这里插入图片描述

    vue3的变化

  5. 不需要根标签
    在这里插入图片描述
    在这里插入图片描述
  6. 定义组件要求要引入defineComponent
    在这里插入图片描述
    在这里插入图片描述
  7. composition-api: setup
    ```
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210209105138909.gif)

版权声明

知识共享许可协议 本文章由作者“衡于墨”创作，转载请注明出处，未经允许禁止用于商业用途

本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。
发布时间：2021年02月09日 11:30:23

评论区#

还没有评论哦，期待您的评论！

备案号： 闽ICP备19015193号-1 
关闭特效