广告：宝塔服务器面板，一键全能部署及管理，送你10850元礼包，点我领取~~~

首先使用npm 或者yarn创建一个vue项目

// 使用npm创建一个基于vite构建的vue项目npm create vite@latest// 使用yarn创建一个基于vite构建的vue项目yarn create vite@latest

在创建的构成中选择

vue        vue-ts

创建完之后将项目拖到编译器打开

在vite.config.ts文件中配置项目的服务数据，配置如下：

  // 此处配置项目服务参数  server: {    host: "0.0.0.0", // 项目运行地址，此处代表localhost    port: 8888, // 项目运行端口    open: true, //编译之后是否自动打开页面    hmr: true, // 是否开启热加载  },

之后server下方接着配置src的别名@，配置如下

  // 配置src的别名@  resolve: {    alias: {      "@": resolve(__dirname, "./src"),    },  },

此外还需在ts的配置文件tsconfig.json中加入以下配置：

    "baseUrl": "./",                                // 配置路径解析的起点    "paths": {                                      // 配置src别名      "@/*": ["src/*"]                              // 当我们输入@/时会被映射成src/    }

npm install vue-router@latestyarn add vue-router@latest

在src下新建router文件夹，同时创建index.ts并配置如下

import { createRouter, createWebHistory, RouteRecordRaw} from 'vue-router';import Layout from '@/components/HelloWorld.vue' // 定义路由，此处为Array数组，数据类型为RouteRecordRawconst routes: Array<RouteRecordRaw> = [    {        path: '/home',        name: 'home',        component: Layout    }] // 创建路由const router = createRouter({    history: createWebHistory(),    routes      // 将定义的路由传入}) // 将创建的router路由暴露，使其在其他地方可以被引用export default router

在main.ts中先通过 import router from '@/router/index' 引入路由，然后使用use函数注册路由，具体如下：

import { createApp } from 'vue'import './style.css'import App from './App.vue'// 此处引入定义的路由import router from '@/router/index' // createApp(App).mount('#app')// 此处将链式创建拆解，从中注册路由const app = createApp(App);// 注册路由app.use(router)app.mount('#app')

注册完成之后，在程序入口App.vue中通过 <router-view></router-view> 使用路由，具体如下：

<template>  <!-- <div>    <a href="https://vitejs.dev" rel="external nofollow"  target="_blank">      <img src="/vite.svg" class="logo" alt="Vite logo" />    </a>    <a href="https://vuejs.org/" rel="external nofollow"  target="_blank">      <img src="@/assets/vue.svg" class="logo vue" alt="Vue logo" />    </a>  </div> -->  <!-- 在App的入口程序使用路由,会将我们注册的路由全部引入到App入口,通过路由的路径确定跳转的页面 -->  <router-view></router-view></template>

# 选择一个你喜欢的包管理器 // 安装element-plusnpm install element-plus --save yarn add element-plus pnpm install element-plus // 安装element-plus的图标库组件npm install @element-plus/icons-vue yarn add @element-plus/icons-vue pnpm install @element-plus/icons-vue

和router一样都是在main.ts中注册，配置如下：

vue        vue-ts0

pinia官网

vue        vue-ts1

vue        vue-ts2

在src下面新建store文件夹并新建index.ts文件,并配置如下：

vue        vue-ts3

vue        vue-ts4

在配置layout之前，我们还需要对一些标签做初始化的样式设置，比如：html、body等，具体如下

在项目的index.html文件下添加样式设置

vue        vue-ts5

之后在src下新建layout文件夹并新建index.vue文件，配置如下：

整个el-container为layout布局的整体，其下又可以按照布局的不同划分出不同的区块，但总结起来可以划分为：1、侧边菜单栏；2、头部区；3、内容展示区；4、尾部区，我们根据自己的需要进行选择组合，这些划分出来的区块涉及到不同的配置和处理，因此，我们可以将这些大的区块从layout整体布局中抽离成组件，让代码拥有更好的可读性；此外，每个抽离的组件自己本身也可能存在需要拆分的问题。我们通过拆分，可以很好的将一个问题化繁为简，从而很轻松的解决。

vue        vue-ts6

从layout布局抽离的菜单栏组件：

vue        vue-ts7

从菜单栏抽离的菜单项组件：

vue        vue-ts8

首先，将自己准备的logo图片放到src下的assets文件夹下，然后在layout的menu的logo文件夹下新建MenuLogo.vue文件，并配置如下：

vue        vue-ts9

最后在菜单栏组件中引入菜单logo组件并使用

  // 此处配置项目服务参数  server: {    host: "0.0.0.0", // 项目运行地址，此处代表localhost    port: 8888, // 项目运行端口    open: true, //编译之后是否自动打开页面    hmr: true, // 是否开启热加载  },0

效果如下：

在src的router的index.ts文件下添加如下路由配置并在views文件夹下创建对应的文件

  // 此处配置项目服务参数  server: {    host: "0.0.0.0", // 项目运行地址，此处代表localhost    port: 8888, // 项目运行端口    open: true, //编译之后是否自动打开页面    hmr: true, // 是否开启热加载  },1

添加完路由配置之后，创建路由的对应文件并添加一些描述文字，此时虽然路由和对应的页面都已经创建完毕并关联在了一起，但路由并没有被引用，也就无法在正确的位置展示路由页面的数据，所以，我们需要将路由引用到layout布局的main区域，也就是数据展示区，确保当我们访问某个路由时，对应的路由页面能够在该区域展示。

在菜单项组件中，我们给菜单项的index属性绑定了路由的path值，其用意是为了启用element-plus中提供的一种在激活导菜单时（当我们点击某个菜单项时，该菜单项就是被激活的菜单）以index作为path进行路由跳转，所以为了我使用这个功能，我们还需要在菜单栏组件的el-menu标签中添加 router 属性以开启该功能，同时再添加 default-active 属性来指明当前被激活的菜单。用例如下

  // 此处配置项目服务参数  server: {    host: "0.0.0.0", // 项目运行地址，此处代表localhost    port: 8888, // 项目运行端口    open: true, //编译之后是否自动打开页面    hmr: true, // 是否开启热加载  },2

以上就是怎么使用vue3搭建后台系统的详细内容，更多请关注9543建站博客其它相关文章！