广告：宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买
首先使用npm 或者yarn创建一个vue项目
// 使用npm创建一个基于vite构建的vue项目npm create vite@latest// 使用yarn创建一个基于vite构建的vue项目yarn create vite@latest登录后复制
在创建的构成中选择
vue vue-ts登录后复制
创建完之后将项目拖到编译器打开
一、配置vite在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/ }登录后复制二、router路由1、安装router路由npm install vue-router@latestyarn add vue-router@latest登录后复制2、配置router路由
在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登录后复制3、注册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')登录后复制4、使用router路由注册完成之后，在程序入口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 plus等其他依赖
# 选择一个你喜欢的包管理器 // 安装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登录后复制1、注册element plus并配置图标
和router一样都是在main.ts中注册，配置如下：
vue vue-ts0登录后复制四、pinia使用
pinia官网
1、安装piniavue vue-ts1登录后复制2、注册pinia
vue vue-ts2登录后复制3、配置pinia
在src下面新建store文件夹并新建index.ts文件,并配置如下：
vue vue-ts3登录后复制4、测试pinia
vue vue-ts4登录后复制五、layout布局
在配置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
首先，将自己准备的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区域，也就是数据展示区，确保当我们访问某个路由时，对应的路由页面能够在该区域展示。
1、路由和页面联动的注意细节在菜单项组件中，我们给菜单项的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建站博客其它相关文章！
发表评论