So erstellen Sie mit vue3 ein Backend-System-View.js-php.cn

Verwenden Sie zuerst npm oder Yarn, um ein Vue-Projekt zu erstellen.

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

Nach dem Login kopieren

Wählen Sie in der erstellten Komposition aus.

vue        
vue-ts

Nach dem Login kopieren

.ts-Datei Die Dienstdaten sind wie folgt konfiguriert:

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

Nach dem Login kopieren

Konfigurieren Sie dann den src-Alias @ unter dem Server. Die Konfiguration lautet wie folgt:

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

Nach dem Login kopieren

Darüber hinaus muss die folgende Konfiguration zur TS-Konfigurationsdatei tsconfig.json hinzugefügt werden :

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

Nach dem Login kopieren

2. Router-Routing

1. Router-Routing installieren

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

Nach dem Login kopieren

2. Router-Routing konfigurieren

Erstellen Sie einen neuen Router-Ordner unter src, erstellen Sie index.ts und konfigurieren Sie ihn wie folgt

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

Nach dem Login kopieren

3. Registrieren Sie den Router Routing

Übergeben Sie in main.ts zunächst den Import-Router von „@/router/index“

Einführung der Route und verwenden Sie dann die Verwendungsfunktion, um die Route wie folgt zu registrieren:

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

Nach dem Login kopieren

4

Nachdem die Registrierung abgeschlossen ist, übergeben Sie

Verwenden Sie das Routing wie folgt:

<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>

Nach dem Login kopieren

3. Installieren Sie element plus und andere Abhängigkeiten

# 选择一个你喜欢的包管理器
 
// 安装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

Nach dem Login kopieren

1. Registrieren Sie Element Plus und konfigurieren Sie das Symbol

Wie ein Router befindet es sich in main.ts. Registrieren Sie sich, die Konfiguration ist wie folgt: r

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(&#39;#app&#39;)
// 此处将链式创建拆解，从中注册路由
 
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);
}

Nach dem Login kopieren

E 4. Pinia verwendet

Die offizielle Website von Pinia

1. Installieren Sie Pinia

yarn add pinia
# 或者使用 npm
npm install pinia

Nach dem Login kopieren

2 , registrieren Sie Pinia

// 从pinia中引入创建实例的函数
import { createPinia } from &#39;pinia&#39;
 
// 使用createPinia函数创建一个pinia实例并注册
app.use(createPinia())

Nach dem Login kopieren

3, konfigurieren Sie Pinia

, um einen neuen Store-Ordner unter der SRC-Datei zu erstellen, und konfigurieren Sie ihn wie folgt:

// 从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中定义函数时，我们尽量都指明函数返回值类型以及参数的数据类型

Nach dem Login kopieren

4. Testen Sie Pinia

<template>
  <!-- 测试element-plus -->
  <el-button type="primary">Primary</el-button>
 
  <!-- 测试element-plus图标 -->
  <div >
    <Edit  />
    <Share  />
    <Delete  />
    <Search  />
  </div>
 
  <h3>方式一、直接通过store.count++</h3>
  <!-- 测试pinia -->
  <h4>直接从store取值并测试pinia:{{ count }}</h4>
  <el-button type="primary" @click="addCount">增加</el-button>
 
  <h4>使用storeToRefs函数解析store后测试pinia:{{ count1 }}</h4>
  <el-button type="primary" @click="addCount1">增加</el-button>
 
    <h3>方式二、通过调用store中的函数</h3>
   <h4>通过store中的函数并测试pinia:{{ count1 }}</h4>
  <el-button type="primary" @click="addCount2">增加</el-button> 
</template>
 
<script setup lang="ts">
import { useStore } from "@/store/index";
import { storeToRefs } from "pinia"; // 解析store中的数据，如成员属性、方法
 
// 创建了一个useStore实例对象
const store = useStore();
// 增加成员属性count的值，方式一、直接通过store.count++
 
// 拿到成员属性count,但这样取值会失去响应性，也就是不能实时同步，当我们点击增加按钮后，虽然操作已经完成，count也增加了，但展示有延迟
// 这个取值过程可能涉及解析数据，从而导致函数执行完后数据没有变化
const count = store.count;
const addCount = () => {
  store.count++;
};
// 通过pinia中的storeToRefs函数将store中的数据都进行解析
const count1 = storeToRefs(store).count;
const addCount1 = () => {
  store.count++;
};
 
// 方式二、通过调用store中的函数
const addCount2 = () => {
  store.setCounter(++store.count)
};
</script>
 
<style scoped>
.read-the-docs {
  color: #888;
}
</style>

Nach dem Login kopieren

5. Bevor Sie das Layout konfigurieren, führen wir auch die folgenden Schritte aus: Sie müssen die Stileinstellungen für einige Tags, z. B. HTML, Body usw., wie folgt initialisieren.

Fügen Sie Stileinstellungen unter der Datei index.html des Projekts hinzu.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" rel="external nofollow"  />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue + TS</title>
  </head>
  <body>
    <!-- 此处为程序的最终入口,会引入App.vue 并将相应的配置挂载到id为app <div id="app"></div> 上 -->
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>
 
<!-- 这里对html、body、挂载容器div做样式的初始化设置，去除原有的设置 -->
<style lang="less">
  html,body,#app {
    padding: 0px;
    margin: 0px;
    height: 100%;
    box-sizing: border-box;
  }
  #app {
    width: 100%;
    max-width: 100%;
  }
</style>

Nach dem Login kopieren

Erstellen Sie dann einen Layoutordner unter src und erstellen Sie einen neuen Die Datei index.vue ist wie folgt:

Der gesamte el-Container ist das Gesamtlayout, und das Layout kann in verschiedene Blöcke unterteilt werden, aber zusammenfassend kann es unterteilt werden in: 1 . Seitenmenüleiste; 3. Inhaltsanzeigebereich; Wir können diese nach unseren eigenen Bedürfnissen auswählen und kombinieren Teilen Sie das Gesamtlayout in Komponenten auf, um den Code besser lesbar zu machen. Darüber hinaus weist jeder extrahierte Block möglicherweise auch Probleme auf, die aufgeteilt werden müssen. Durch die Aufteilung können wir ein komplexes Problem auf Einfachheit reduzieren und es leicht lösen.

<template>
  <el-container class="container">
    <!-- layout布局左侧菜单区 -->
    <el-aside width="200px" class="aside">
      <!-- 菜单项，通过组件的形式引入 -->
      <Menu></Menu>
    </el-aside>
    <!-- layout布局内容区 -->
    <el-container>
      <!-- 内容区头部 -->
      <el-header class="header">
        <!-- 头部组件，抽离成组件形式 -->
        <Header></Header>
      </el-header>
      <!-- 内容区的主体，用于数据展示 -->
      <el-main class="content">Main</el-main>
    </el-container>
  </el-container>
</template>
 
<script setup lang="ts">
// vue3中组件引入后不需要使用conponents注册，可以直接使用
import Header from &#39;@/layout/header/Header.vue&#39;
import Menu from &#39;@/layout/menu/Menu.vue&#39;
 
</script>
 
<style scoped lang="less">
.container {
  height: 100%;
  .aside {
    background-color: antiquewhite;
  }
  .header {
    background-color: aquamarine;
  }
  .content {
    background-color: pink
  }
}
</style>

Nach dem Login kopieren

Die aus dem Layout-Layout extrahierte Menüleistenkomponente:

<template>
  <el-menu
    default-active="2"
    class="el-menu-vertical-demo"
    :unique-opened=&#39;uniqueOpenedFlag&#39;
  >
    <!-- 在为el-menu设置unique-opened属性时必须要确保el-sub-menu、el-menu-item中index的唯一性，如果index不唯一则不生效 -->
    <!-- 本组件作为父组件向子组件传递数据menuList，子组件需要定义menuList属性以确保可以接受该数据 -->
    <menu-item :menuList="menuList"></menu-item>
  </el-menu>
</template>
 
<script setup lang="ts">
import { ref, reactive } from "vue";
import MenuItem from "@/layout/menu/item/MenuItem.vue";
 
// 自定义的假的树形菜单数据
// reactive函数用来处理响应式数据，处理的数据一般是复杂类型数据，如对象类型
// ref函数也可以处理响应式数据，不过数据一般是基本数据类型
const isCollapse = ref(false)
const uniqueOpenedFlag = ref(true)
 
 
const menuList = reactive([
  {
    path: "/system",
    name: "system",
    component: "Layout",
    meta: {
      title: "系统管理",
      icon: "Setting",
      roles: ["sys:manage"],
    },
    children: [
      {
        path: "/worker",
        name: "worker",
        component: "Layout",
        meta: {
          title: "员工管理",
          icon: "Setting",
          roles: ["sys:manage"],
        },
      },
      {
        path: "/happy",
        name: "happy",
        component: "Layout",
        meta: {
          title: "菜单管理",
          icon: "Setting",
          roles: ["sys:manage"],
        },
      },
    ],
  },
  {
    path: "/mail",
    name: "mail",
    component: "Layout",
    meta: {
      title: "商场管理",
      icon: "Setting",
      roles: ["sys:manage"],
    },
    children: [
      {
        path: "/worker11",
        name: "worker11",
        component: "Layout",
        meta: {
          title: "员工管理22",
          icon: "Setting",
          roles: ["sys:manage"],
        },
      },
      {
        path: "/happy22",
        name: "happy22",
        component: "Layout",
        meta: {
          title: "菜单管理22",
          icon: "Setting",
          roles: ["sys:manage"],
        },
      },
    ],
  },
]);
 
</script>
 
<style lang="less" scoped></style>

Nach dem Login kopieren

Die aus der Menüleiste extrahierte Menüelementkomponente:

<template>
  <template v-for="item in menuList" :key="item.path">
    <!-- 判断该菜单项是否有子菜单 -->
    <el-sub-menu v-if="item.children && item.children.length > 0" :index="item.path" >
      <template #title>
        <el-icon>
          <!-- 通过动态组件展示图标，因为图标数据一般是通过后端查数据库拿到的 -->
          <component :is="item.meta.icon"></component>
        </el-icon>
        <span>{{ item.meta.title }}</span>
      </template>
      <!-- 递归调用，将子菜单传递给组件处理 -->
      <menu-item :menuList="item.children"></menu-item>
    </el-sub-menu>
    <el-menu-item v-else :index="item.path">
      <el-icon>
        <!-- 通过动态组件展示图标 -->
        <component :is="item.meta.icon"></component>
      </el-icon>
      <span>{{ item.meta.title }}</span>
    </el-menu-item>
  </template>
</template>
 
<script setup lang="ts">
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from "@element-plus/icons-vue";
 
// 子组件接受父组件传递的数据
// 本组件为子组件，接受父组件传过来的数据，此处定义menuList属性，接受父组件传递的menuList数据
defineProps(["menuList"]);
</script>
 
<style lang="less" scoped></style>

Nach dem Login kopieren

6. Logo der Menüleiste

Fügen Sie zunächst das von Ihnen vorbereitete Logobild in den Assets im Ordner „src“ ein Erstellen Sie dann eine neue MenuLogo.vue-Datei im Logo-Ordner des Layoutmenüs und konfigurieren Sie sie wie folgt:

<template>
  <div class="logo">
    <img :src="Logo" />
    <span class="logo-title">{{ title }}</span>
  </div>
</template>
 
<script setup lang="ts">
import { ref } from "vue";
import Logo from "@/assets/logo.png";
const title = ref("博客管理系统");
</script>
 
<style lang="less" scoped>
.logo {
  display: flex; // 弹性布局
  width: 100%;
  height: 60px;
  line-height: 60px;
  background-color: rgb(234, 255, 127);
  text-align: center;
  cursor: pointer; // 鼠标悬浮在元素上时，鼠标从箭头变成小手
  align-items: center;
  img {
    width: 36px;
    height: 36px;
    margin-left: 20px; // 元素的外边距
    margin-right: 12px;
  }
  .logo-title {
    font-weight: 800; // 800为加粗
    color: black;
    font-size: 20px;
    line-height: 60px; // 元素上下居中
    font-family: FangSong; // 字体类型
  }
}
</style>

Nach dem Login kopieren

Führen Sie abschließend die Menülogokomponente in die Menüleistenkomponente ein und verwenden Sie

// 在script标签中引入
import MenuLogo from "@/layout/menu/logo/MenuLogo.vue";
 
// el-menu标签上方引入使用
<menu-logo></menu-logo>

Nach dem Login kopieren

Der Effekt ist wie folgt : 7. Routing und Seitenverknüpfung Fügen Sie die entsprechende Datei für das Routing hinzu und fügen Sie einen Beschreibungstext hinzu. Obwohl die Route und die entsprechende Seite zu diesem Zeitpunkt erstellt und verknüpft wurden, wurde die Route noch nicht referenziert, sodass die Daten der Routing-Seite nicht an der richtigen Position angezeigt werden können. Daher müssen wir die Route auf das Layout verweisen. Der Hauptbereich des Layouts, der Datenanzeigebereich, stellt sicher, dass beim Zugriff auf eine bestimmte Route die entsprechende Routing-Seite in diesem Bereich angezeigt werden kann.

1. Achten Sie auf die Details des Routings und der Seitenverknüpfung.

In der Menüelementkomponente binden wir den Pfadwert der Route an das Indexattribut des Menüelements. Der Zweck besteht darin, eine Funktion zu aktivieren Wird in element-plus bereitgestellt (wenn wir auf einen Menüpunkt klicken, ist der Menüpunkt das aktivierte Menü), der Index wird als Pfad für den Routing-Sprung verwendet. Damit ich diese Funktion verwenden kann, Wir müssen auch el in der Menüleistenkomponente hinzufügen. Fügen Sie das Router-Attribut zum -menu-Tag hinzu, um diese Funktion zu aktivieren, und fügen Sie das Default-Active-Attribut hinzu, um das aktuell aktivierte Menü anzuzeigen. Die Anwendungsfälle sind wie folgt

{
    path: "/",
    component: Layout,      // 每个路由都需要通过component指定归属的布局组件
    redirect: "/index",
    name: "Root",
    children: [
      {
        path: "/index",
        name: "Index",
        component: () => import("@/views/index/index.vue"),
        meta: {
          title: "首页看板",
          icon: "icon-home",
          affix: true,
          noKeepAlive: true,
        },
      },
    ],
  },
  {
    path: "/comp",
    component: Layout,
    name: "Comp",
    meta: { title: "系统管理", icon: "icon-code" },
    children: [
      {
        path: "/element",
        name: "ElementComp",
        component: () => import("@/views/element/index.vue"),
        meta: {
          title: "菜单管理",
          icon: "icon-code",
        },
      },
      {
        path: "/iconPark",
        name: "IconPark",
        component: () => import("@/views/icon/index.vue"),
        meta: {
          title: "路由管理",
          icon: "icon-like",
        },
      },
      {
        path: "/chart",
        name: "Chart",
        component: () => import("@/views/echarts/index.vue"),
        meta: {
          title: "员工管理",
          icon: "icon-chart-line",
        },
        children: [
          {
            path: "/line",
            name: "Line",
            component: () => import("@/views/echarts/line.vue"),
            meta: {
              title: "商品管理",
            },
          },
          {
            path: "/bar",
            name: "Bar",
            component: () => import("@/views/echarts/bar.vue"),
            meta: {
              title: "手机管理",
            },
          },
          {
            path: "/otherChart",
            name: "OtherChart",
            component: () => import("@/views/echarts/other.vue"),
            meta: {
              title: "会员管理",
            },
          },
        ],
      },
    ],
  },
  {
    path: "/errorPage",
    name: "ErrorPage",
    component: Layout,
    meta: {
      title: "用户管理",
      icon: "icon-link-cloud-faild",
    },
    children: [
      {
        path: "/404Page",
        name: "404Page",
        component: () => import("@/views/errorPage/404.vue"),
        meta: {
          title: "角色管理",
          icon: "icon-link-cloud-faild",
        },
      },
      {
        path: "/401Page",
        name: "401Page",
        component: () => import("@/views/errorPage/401.vue"),
        meta: {
          title: "权限管理",
          icon: "icon-link-interrupt",
        },
      },
    ],
  },

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonSo erstellen Sie mit vue3 ein Backend-System. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!