本篇文章專門寫給剛剛想要學習 vue3.x 的同學，大神請繞行。

現在越來越多的公司和程式設計師選擇了 vue ，差不多80%的專案都是使用 vue 進行開發的。vue團隊也在不斷地改進框架，API做得非常好用。Vue3 釋出主要目標：下一代web開發方式，更快，更輕，易維護，更多的原生支援(來自官網)。

這篇文章，主要介紹如何建立 Vue3.0 專案，例項化以及路由配置。對比 Vue2 快速學習，讓你快速上手 Vue3。

一、Vue3+Vite 建立專案

1.1、在你的H盤內，建立 learn_vite 資料夾。

1.2、開啟命令工具，輸入 H: ，回車進入 H盤內。

1.3、輸入：cd learn_vue3，回車進入learn_vue3資料夾內。

1.4、使用 npm 命令：

npm init vite

1.5、輸入專案名稱 test。

1.6、選擇建立一個 vue 的專案。

1.7、專案建立完成之後，根據命令提示，進入專案，安裝依賴，就可以啟動專案了。

二、例項化的改變

vue 2例項化 main.js程式碼：

import Vue from "vue";
import App from "./App.vue";

Vue.config.productionTip = false;
new Vue({
  render: h => h(App)
}).$mount("#app");

vue 3例項化 main.js程式碼：

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.mount('#app')

正如你現在看到的，Vue2和Vue3例項化完全不一樣。Vue2使用的是Vue物件來建立一個Vue例項，對Vue物件的任何更改都有可能會影響到每一個Vue例項和元件。但是對於Vue3，使用的是 createApp來定義某個Vue應用程式的範圍，使程式碼更容易理解，這樣就不容易受到第三方外掛的干擾。

三、Vue3 如何使用路由

能看懂該文章的，也不需要我介紹為啥使用路由了，廢話不多說，我們直接看如何使用？

3.1、安裝 vue-router

npm install vue-router

3.2、建立router資料夾，新建 index.js

import { createRouter , createWebHistory  } from "vue-router"
const routerHistory = createWebHistory()

import Home from "../view/home/index.vue"
// 2. 定義一些路由
// 每個路由都需要對映到一個元件。
const routes = [
 {
  path: '/',
  name: 'Home',
  component: Home,
 }, 
]
const router = createRouter({
  history: routerHistory,
  routes
})
//匯出路由
export default router

然而 vue2 的路由配置

import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);
import Home from "../view/home/index.vue"
const routes = [
 {
  path: '/',
  name: 'Home',
  component: Home,
 },
];
const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes
});
export default router;

之所以給你放置一個 vue2 的路由配置檔案是為了加深你的理解和記憶。

3.3、在main.js中引入路由

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(router)
app.mount('#app')

3.4、在App.vue檔案中加入

<router-view />

這一步不新增的話，我們看不見頁面被加載出來。

3.5、路由模式

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

createWebHistory //history模式
createWebHashHistory // hash模式

const router = createRouter({
  history: createWebHashHistory(),//模式設定
  routes,
  linkActiveClass:'active-class',//自定義當前導航選單類名
  linkExactActiveClass:'init-class'
})

除了這些基本配置之外，還有路由全域性守衛、路由獨享守衛、元件內守衛與之前都是一樣的沒有區別。

四、fragment 根

之前的 vue2 中，元件只有一個根元素，令人興奮的在 vue3 中補充了 Fragment 。也就是 vue3 中元件可以擁有多個根，它看起來就像一個普通的 DOM ，但是它是虛擬的 DOM ，根本不會在 dom 樹中呈現。

寫元件的時候，再也不用給外層包一層div

<template>
 <div> hello </div>
 <div> world </div>
</template>

在 vue2 中，如果你敢這麼寫，會立即報錯，但是vue3可以這麼寫。