Vue3.x与Vue2.x的部分不同点

事先声明，非专业前端（只是个后端小开发啦），如有错误，请指出。 

一.main.js中app注册方式

2.x：

import Vue from "vue";
import App from "./App";
// 路由引入
import router from "./router";

new Vue({
  el: "#app",
  router,
  template: "<App/>",
  components: { App },
});

3.x：

import { createApp } from "vue";
import App from "./App.vue";
// 路由引入
import router from "./router";

const app = createApp(App);
app.use(router);
// 如果使用transition，需要在安装应用程序之前等待路由器准备就绪
router.isReady().then(() => app.mount("#root"));

trannsition使用方法也由以前的：

<transition name="fade" mode="out-in">

<router-view></router-view>

</transition>

更改为：

<router-view v-slot="{ Component }">

        <transition name="router-fade" mode="out-in">

          <component :is="Component" />

        </transition>

      </router-view>

二. slot、slot-scope弃用

solt：
废弃使用，使用v-slot代替，使用方法 v-slot=xxx 或者 #xxx
slot-scope：
废弃使用，使用v-slot代替，使用方法 v-slot=xxx 或者 #xxx

注意：v-slot只作用于template

三.Vue-loader+webpack变化

3.x中的vue需要在webpack配置文件中
// 最新的 vue-loader 中，VueLoaderPlugin 插件的位置有所改变
const { VueLoaderPlugin } = require('vue-loader/dist/index')
plugins中new VueLoaderPlugin()

四.父组件给子组件传递visible方式改变

2.x中  visible.sync = "visible"
3.x中  v-model:visible = "visible"

五.webpack字体文件的loader配置需要注释（原因我也不清楚）

如果加上此配置，element自身的字体就无法找到识别，会导致icon全部变成小方块

module: {

    rules: [

......

{

       test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,

        loader: "url-loader",

        options: {

          limit: 1024 * 5,

          name: utils.assetsPath("fonts/[name].[hash:7].[ext]"),

        },

    },

......

],

},

六.Vue-router4.x的变化

4.x

import { createRouter, createWebHistory } from "vue-router";

const router = new createRouter({

  history: createWebHistory(),

  routes: [

{ path: "/login", name: "登录", component: Login, hidden: true },

  {

    path: "/user/logout",

    name: "登出",

    component: Logout,

    hidden: true,

  },

  { path: "/404", name: "找不到资源", component: NotFound, hidden: true },

]

});

export default router

之前版本

import Router from 'vue-router'

const router = new Router({

routes: [

{ path: "/login", name: "登录", component: Login, hidden: true },

  {

    path: "/user/logout",

    name: "登出",

    component: Logout,

    hidden: true,

  },

  { path: "/404", name: "找不到资源", component: NotFound, hidden: true },

],

})

export default router

七.element的问题

在我自身升级后，出现了一个问题，页面空白，然后控制台报错

 目前来说，我的解决办法就是把element-ui替换成了element-plus。如果坚持用element_ui目前我还没找到解决办法，如果有大神解决了的话，麻烦留言告知一下。

八.element引入方式改变了

升级vue-cli4.x  vue3.x后，element引入方式直接使用npm install貌似不能成功了，而新的引入方式是在项目根目录下执行vue add  element-plus(ui)命令。

九. SCSS中deep写法改变

deep的样式由原来的 /deep/ .xxx 更改为 ::v-deep(.xxx)