【Vue3快速上手】

Vue3快速上手

  • 1 Vue3简介
  • 2 创建Vue3.0工程
    • 2.1 使用 vue-cli 创建
    • 2.2 使用 vite 创建
  • 3 分析工程结构
  • 4 安装开发者工具

1 Vue3简介

  • github上的tags地址:https://github.com/vuejs/vue-next/releases/tag/v3.0.0
  • Vue3带来了:
    1> 性能的提升:打包大小减少41%;初次渲染快55%、更新渲染快133%;内存减少54%……
    2> 源码的升级:使用Proxy代替defineProperty实现响应式;重写虚拟DOM的实现和Tree-Shaking……
    3> 拥抱TypeScript:Vue3可以更好的支持TypeScript
    4> 新的特性:
    【Vue3快速上手】_第1张图片

2 创建Vue3.0工程

2.1 使用 vue-cli 创建

  • 官方文档:https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create
## 查看@vue/cli版本,确保@vue/cli版本在4.5.0以上
vue --version
## 安装或者升级你的@vue/cli
npm install -g @vue/cli

【Vue3快速上手】_第2张图片

## 创建
vue create vue_test

在这里插入图片描述
【Vue3快速上手】_第3张图片

## 启动
cd vue_test
npm run serve

【Vue3快速上手】_第4张图片

2.2 使用 vite 创建

  • 官方文档:https://v3.cn.vuejs.org/guide/installation.html#vite
  • vite官网:https://vitejs.cn
    【Vue3快速上手】_第5张图片
    【Vue3快速上手】_第6张图片
## 创建工程
npm init vite-app 
## 进入工程目录
cd 
## 安装依赖
npm install
## 运行
npm run dev

【Vue3快速上手】_第7张图片

3 分析工程结构

【Vue3快速上手】_第8张图片
【Vue3快速上手】_第9张图片

4 安装开发者工具

按照此篇博客步骤操作:http://t.csdnimg.cn/rfF67

你可能感兴趣的:(Vue,vue.js,前端)