官方文檔
https://staging-cn.vuejs.org/guide/introduction.html#what-is-vue
https://v3.cn.vuejs.org/guide/installation.html#vite

webpack --》vite

npm init vite@latest <project-name> --template vue-ts //ts工程，js工程不加-ts

main.ts文件(包括引入element-plus、router、pinia等)

import { createApp } from 'vue'
import App from './App.vue'
// 整體引入
import ElementPlus from 'element-plus'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import router from "./router/index";
import { createPinia} from 'pinia';
// UI樣式
import '@/styles/index.scss';

const app = createApp(App);
app.use(router).use(ElementPlus, { size: 'default', zIndex: 3000 })
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
  }
app.use(createPinia())
app.mount("#app");

vue-router 升級到 4.0

具體用法會開新章節(jié)
router.ts文件

import { createRouter, createWebHashHistory,  RouteRecordRaw } from 'vue-router';

export const Layout = () => import('@/view/app-layout/index.vue');

// 靜態(tài)路由
export const constantRoutes: Array<RouteRecordRaw> = [
  {
    path: '/redirect',
    component: Layout,
    meta: {
      hidden: true
    },
    children: [
      {
        path: '/redirect/:path(.*)',
        component: () => import('@/view/redirect/index.vue')
      }
    ]
  },
  {
    path: "/login",
    component: () => import("@/view/login/index.vue"),
    meta: {
      hidden: true
    }
  },
  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [
      {
        path: 'dashboard',
        component: () => import('@/view/dashboard/index.vue'),
        name: 'Dashboard',
        meta: { title: 'dashboard', icon: 'TrendCharts', affix: true }
      }
    ]
  }
];


// 創(chuàng)建路由
const router = createRouter({
  history: createWebHashHistory(),
// hash模式：createWebHashHistory，history模式：createWebHistory
  routes: constantRoutes,
  // 刷新時，滾動條位置還原
  scrollBehavior: () => ({ left: 0, top: 0 })
});

// 重置路由
export function resetRouter() {
  router.getRoutes().forEach(route => {
    const { name } = route;
    if (name && router.hasRoute(name)) {
      router.removeRoute(name);
    }
  });
}

export default router;

vuex --》pinia

取消了mutations，同步異步都在actions中，更簡潔，下節(jié)更新pinia
官方 https://pinia.vuejs.org/introduction.html#basic-example

生命周期的變化

沒有了created
onMounted 鉤子可以用來在組件完成初始渲染并創(chuàng)建 DOM 節(jié)點后運(yùn)行代碼

data的定義

使用reactive函數(shù)創(chuàng)建一個響應(yīng)式對象或數(shù)組

<script setup>
import { reactive } from 'vue'

const state = reactive({ count: 0 })

function increment() {
  state.count++
}
</script>

<template>
  <button @click="increment">
    {{ state.count }}
  </button>
</template>

ref方法來允許我們創(chuàng)建可以使用任何值類型的響應(yīng)式 ref

<script setup>
import { ref } from 'vue'

const count = ref(0)

function increment() {
  count.value++
}
</script>

<template>
  <button @click="increment">
    {{ count }} <!-- 無需 .value -->
  </button>
</template>

??注意區(qū)別，一個使用時候有value，一個沒有

style

::v-deep寫法已經(jīng)被廢棄了，使用:deep(xx)

:deep(.el-drawer__header) {
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 0;
}

可能遇到的坑

1、??注意重名問題，3.0對重名檢查嚴(yán)格，變量不要重名，哪怕是父子也有可能造成錯誤
2、路由或者path地址不可以帶有*之類的字符
3、使用element-plus注意看文檔，有些屬性已廢棄

持續(xù)更新中。。。。。