极速上手 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可以这么写。