今天小编给大家分享一下如何使用vue3搭建后台系统的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
成都创新互联公司是一家集网站建设,遵化企业网站建设,遵化品牌网站建设,网站定制,遵化网站建设报价,网络营销,网络优化,遵化网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。
首先使用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@latest
yarn add vue-router@latest
2、配置router路由
在src下新建router文件夹，同时创建index.ts并配置如下
import { createRouter, createWebHistory, RouteRecordRaw} from 'vue-router';
import Layout from '@/components/HelloWorld.vue'
// 定义路由，此处为Array数组，数据类型为RouteRecordRaw
const routes: Array = [
{
path: '/home',
name: 'home',
component: Layout
}
]
// 创建路由
const router = createRouter({
history: createWebHistory(),
routes // 将定义的路由传入
})
// 将创建的router路由暴露，使其在其他地方可以被引用
export default router3、注册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中通过 使用路由，具体如下：
三、安装element plus等其他依赖
# 选择一个你喜欢的包管理器
// 安装element-plus
npm 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中注册，配置如下：
import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
// 次数引入定义的路由
import router from "@/router/index";
// 引入element-plus
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
// 引入element-plus的图标库
import * as ElementPlusIconsVue from "@element-plus/icons-vue";
// createApp(App).mount('#app')
// 此处将链式创建拆解，从中注册路由
const app = createApp(App);
// 注册路由、element-plus等
app.use(router).use(ElementPlus);
// 将所有配置挂载到index.html的id为app的容器上
app.mount("#app");
// 此处参考官网，意为将图标库中的每个图标都注册成组件
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component);
}四、pinia使用
pinia官网
1、安装pinia
yarn add pinia
# 或者使用 npm
npm install pinia
2、注册pinia
// 从pinia中引入创建实例的函数
import { createPinia } from 'pinia'
// 使用createPinia函数创建一个pinia实例并注册
app.use(createPinia())3、配置pinia
在src下面新建store文件夹并新建index.ts文件,并配置如下：
// 从pinia中引入defineStore函数来定义store
import { defineStore } from "pinia";
// 定义一个store并取名为useStore
// defineStore第一个参数是应用程序中store的唯一标识，也就是在定义其他store时该标识不能相同
// 此处可以类比为java中的实体类，useStore就是类名，state里的属性是成员属性，getters里的函数是getter方法，actions里的函数是setter方法
export const useStore = defineStore("useStore", {
// 定义state
// 推荐使用 完整类型推断的箭头函数
state: () => {
return {
// 所有这些属性都将自动推断其类型
count: 0,
name: "Eduardo",
isAdmin: true,
};
},
// 定义getters,里面定义一些对state值的取值操作
// 指向箭头函数定义的时候所处的对象，而不是其所使用的时候所处的对象，默认指向父级的this
// 普通函数中的this指向它的调用者，如果没有调用者则默认指向window
getters: {
doubleCount: (state) => state.count * 2,
doubleCountOne(state) {
return state.count * 2;
},
doublePlusOne(): number {
return this.count * 2 + 1;
},
},
// 定义actions,里面定义一些对state的赋值操作
actions: {
setCounter(count:number){
this.count = count
}
}
});
// 1、只有一个参数的时候，参数可以不加小括号，没有参数或2个及以上参数的，必须加上小括号
// 2、返回语句只有一条的时候可以不写{}和return，会自动加上return的，返回多条语句时必须加上{}和return
// 3、箭头函数在返回对象的时候必须在对象外面加上小括号
// 在vue中定义函数时，我们尽量都指明函数返回值类型以及参数的数据类型4、测试pinia
Primary
