極速上手 VUE 3 — 項目搭建以及配置

本篇文章專門寫給剛剛想要學習 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可以這么寫。