vue项目搭建

前端这点事 49 0

本篇文章专门写给刚刚想要学习 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 vitevue项目搭建


1.5、输入项目名称 test。

vue项目搭建


1.6、选择创建一个 vue 的项目。

vue项目搭建


1.7、项目创建完成之后,根据命令提示,进入项目,安装依赖,就可以启动项目了。

vue项目搭建


二、实例化的改变

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(),linkExactActiveClass:'init-class'})

//模式设置  routes,  linkActiveClass:'active-class',

//自定义当前导航菜单类名  


除了这些基本配置之外,还有路由全局守卫、路由独享守卫、组件内守卫与之前都是一样的没有区别。

四、fragment 根

之前的 vue2 中,组件只有一个根元素,令人兴奋的在 vue3 中补充了 Fragment 。也就是 vue3 中组件可以拥有多个根,它看起来就像一个普通的 DOM ,但是它是虚拟的 DOM ,根本不会在 dom 树中呈现。

写组件的时候,再也不用给外层包一层div

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

在 vue2 中,如果你敢这么写,会立即报错,但是vue3可以这么写。

标签: Vue

发表评论 (已有0条评论)

还木有评论哦,快来抢沙发吧~