说实话，我更推荐你学完Vue2直接查看官方文档的中的 Vue3值得注意的新特性
或者说，对Vue2说拜拜，直接看Vue3的起步文档

新的创建实例方式

Vue.createApp 方法可以返回一个提供应用上下文的应用实例，应用实例挂载的整个组件树共享同一个上下文
在 2.x 中，开发者可以定义 data 选项是 object 或者是 function，现在，他只能是 function 了。

列表的增/删/过滤 & mounted聚焦

当使用 v-cloak 时,在 mounted 中的 .focus() 需要等待渲染完成(1 tick之后)才能起作用
使用全局 Vue.nextTick() 或者在实例中使用 this.$nextTick()
从 Vue 3.0 开始，过滤器 filters 已删除，不再支持。
如果想使用全局过滤器，可以考虑使用全局属性来迁移
而局部过滤器，直接使用 computed 或者 methods 代替即可。

官网提到：虽然过滤器的 | 看起来很方便，但它需要一个自定义语法，打破大括号内表达式是“只是 JavaScript”的假设，这不仅有学习成本，而且有实现成本。
在知乎偶然看见某些人嘲讽“不要实现成本还为什么会有Vue”，我在这里悄悄洗一下，既然有人能做你干的事，要你还有什么用？而且去掉一些无用实现可以更好的保证源码体积，何乐而不为呢？

VueRouter

不再使用 new VueRouter 而是使用 VueRouter.createRouter （官方4.x文档）

yarn和vue-cli安装

npm设置镜像源

1	npm config set registry https://registry.npm.taobao.org

安装yarn
1
npm install -g yarn
使用yarn安装vue-cli
1
yarn global add vue-cli
验证是否安装成功
1
vue -V
如果提示'vue' 不是内部或外部命令，也不是可运行的程序或批处理文件，在环境变量 PATH 中添加
1
C:\Users\你的用户名\AppData\Local\Yarn\Data\global\node_modules\.bin
已经可以使用 vue create 项目名 或者 vue ui 创建项目了

vue-cli4项目结构

vue-cli4-project
  node_modules
  public
    favicon.ico
    index.html
  src———————————————【项目资源,别名@】
    api————————————— （用于统一管理网络请求）
      index.js
    assets————————————【静态资源】
      logo.png
      css
      img
    common———————————（存放工具类和常量）
      util1.js
    components—————————【可复用的组件】
      Navigation.vue
    router————————————【路由配置】
      index.js
    views————————————【不可复用的组件】
      Home.vue
    App.vue———————————【主组件 (使用router-link引入其他模块) 】
    main.js——————————— 【入口文件 (初始化vue实例/导入插件/设置全局变量) 】
  .browserslistrc
  .gitignore
  babel.config.js
  package.json
  package-lock.json
  README.md

用于参考

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import 'element-plus/dist/index.css'
import moment from 'moment'

const app = createApp(App)
//配置路由
app.use(router)
//全局过滤器
app.config.globalProperties.$filters = {
  dateFormat(date,format='YYYY-MM-DD') {
    return moment(date).format(format)
  }
}
//挂载元素
app.mount('#app')

import { createRouter, createWebHistory } from 'vue-router'
const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue')
  }
]
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})
export default router

import axios from "axios";

export const BASE_URL = 'http://localhost/'

export const getItemList = (params) => axios.get(BASE_URL + 'items', { params })
export const getItemTypes = () => axios.get(BASE_URL + 'item-types')
export const saveItem = (item) => axios.post(BASE_URL + 'item', item)

使用方式

import {getItemList,getItemTypes} from "@/api";

export default {
  //...
  methods: {
    getTypes(){
      getItemTypes().then(resp=>{
        this.types = resp.data.data
      })
    },
  },
}

Vue3学习

新的创建实例方式

列表的增/删/过滤 & mounted聚焦

VueRouter

yarn和vue-cli安装

vue-cli4项目结构

用于参考