Comment utiliser vue3 pour créer un système backend

Utilisez d'abord npm ou Yarn pour créer un projet vue

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

Sélectionnez dans la composition créée

vue        
vue-ts

Après la création, faites glisser le projet vers le compilateur pour l'ouvrir# 🎜🎜 #

1. Configurez vite

Configurez les données de service du projet dans le fichier vite.config.ts La configuration est la suivante :

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

. Après cela, configurez le src sous l'alias du serveur @, la configuration est la suivante

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

De plus, la configuration suivante doit être ajoutée au fichier de configuration ts tsconfig.json : #🎜🎜 #

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

2. Routage du routeur

#🎜🎜 #1. Installer le routage du routeur

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

2. Configurer le routage du routeur

Créer un nouveau dossier de routeur. sous src, créez index.ts et configurez-le comme suit

import { createRouter, createWebHistory, RouteRecordRaw} from 'vue-router';
import Layout from '@/components/HelloWorld.vue'
 
// 定义路由，此处为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

# 🎜🎜#3 Enregistrez la route du routeur

Dans main.ts, introduisez d'abord la route via   

import router. à partir de '@/router/index'

   , puis utilisez la fonction use pour enregistrer l'itinéraire, les détails sont les suivants :

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. 🎜#Une fois l'inscription terminée, passez < dans l'entrée du programme App.vue /router-view> Utilisez le routage, comme suit :

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

#🎜 🎜#3. Installez l'élément plus et d'autres dépendances

# 选择一个你喜欢的包管理器
 
// 安装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. Enregistrez l'élément plus et configurez l'icône# 🎜🎜#

est enregistrée dans main.ts comme le routeur, et la configuration est la même. suit :

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);
}

4. Utilisation du pinia 🎜🎜## 🎜🎜#1 Installez le pinia

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

2. . Configurez pinia

Créez un nouveau dossier de magasin sous src et créez-en un nouveau fichier index.ts, et configurez-le comme suit :

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

4. #

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

5. Mise en page de la mise en page

Avant de configurer la mise en page, nous devons également initialiser les paramètres de style pour certaines balises, telles que : html, body, etc., comme suit # 🎜🎜#

Ajoutez des paramètres de style sous le fichier index.html du projet

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

puis ajoutez src Créez un nouveau dossier de mise en page et un nouveau fichier index.vue La configuration est la suivante. :

L'ensemble du conteneur el est la mise en page entière, et il peut être divisé en différents blocs selon différentes mises en page, mais pour résumer, il peut être divisé en : 1. Barre de menu latérale 2. En-tête ; zone ; 3. Zone d'affichage du contenu ; 4. Zone de queue. Nous pouvons choisir et combiner en fonction de nos propres besoins. Ces blocs divisés impliquent différentes configurations et, par conséquent, nous pouvons extraire ces gros blocs de la disposition globale en composants pour rendre le code plus. lisible ; de plus, chaque composant extrait peut lui-même présenter des problèmes qui doivent être divisés. Grâce au fractionnement, nous pouvons réduire un problème complexe à la simplicité et le résoudre facilement.

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

Le composant de la barre de menu extrait de la mise en page :

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

Le composant de l'élément de menu extrait de la barre de menu :

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

6. Menu Logo de la colonne

Tout d'abord, placez l'image du logo que vous avez préparée dans le dossier des ressources sous src, puis créez un nouveau fichier MenuLogo.vue sous le dossier du logo du menu de mise en page et configurez-le comme suit : #🎜 🎜#

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

Enfin, introduisez le composant logo du menu dans le composant barre de menu et utilisez

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

L'effet est le suivant :

#🎜 🎜##🎜🎜 #7. Routage et liaison de page

Ajoutez la configuration de routage suivante sous le fichier index.ts du routeur src et créez le fichier correspondant sous le dossier vues

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

# 🎜🎜##🎜 🎜#Après avoir ajouté la configuration de l'itinéraire, créez le fichier correspondant de l'itinéraire et ajoutez un texte de description A ce moment, bien que l'itinéraire et la page correspondante aient été créés et associés ensemble, l'itinéraire n'a pas été référencé. , donc il ne peut pas être correct. L'emplacement affiche les données de la page de routage, nous devons donc référencer le routage à la zone principale de la mise en page, qui est la zone d'affichage des données, pour garantir que lorsque nous accédons à un certain itinéraire, la page de routage correspondante peut être affichée dans cette zone.

1 Faites attention aux détails du routage et des liens de page

Dans le composant de l'élément de menu, nous donnons le menu L'attribut index de l'élément est lié à la valeur du chemin de l'itinéraire. Son but est d'activer une méthode fournie dans element-plus lors de l'activation du menu de navigation (lorsque l'on clique sur un élément de menu, l'élément de menu est le menu activé). L'index est utilisé comme chemin pour le saut de routage, donc pour que j'utilise cette fonction, nous devons également ajouter l'attribut router à la balise el-menu du composant de la barre de menu pour activer cette fonction, et également ajoutez l'attribut default-active pour indiquer le menu actuellement activé. Les exemples sont les suivants

{
    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",
        },
      },
    ],
  },

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!