How to use vue3 to build a backend system

First use npm or yarn to create a vue project

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

Select in the created composition

vue        
vue-ts

After creating, drag the project to the compiler to open it

1. Configure vite

Configure the service data of the project in the vite.config.ts file. The configuration is as follows:

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

Then configure the alias @ of src below the server. The configuration is as follows

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

In addition, the following configuration needs to be added to the ts configuration file tsconfig.json:

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

2. Router routing

1. Install router routing

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

2. Configure router Routing

Create a new router folder under src, and create index.ts and configure it as follows

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. Register router routing

Pass it in main.ts first import router from '@/router/index' Introduction to the route, and then use the use function to register the route, as follows:

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. Use router routing

After the registration is completed, The program entrance App.vue uses routing through , as follows:

<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. Install element plus and other dependencies

# 选择一个你喜欢的包管理器
 
// 安装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. Register element plus and configure the icon

Like router, it is registered in main.ts. The configuration is as follows:

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. Use of pinia​​​​​​​​​​

pinia official website

1. Install pinia

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

2. Register pinia

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

3. Configure pinia

Create a new store folder under src and create a new index .ts file, and configure it as follows:

// 从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. Test 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>

5. Layout

Before configuring the layout, we also need to initialize some tags Style settings, such as: html, body, etc., are as follows

Add style settings under the index.html file of the project

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

After that, create a new layout folder under src and create a new index.vue file , the configuration is as follows:

The entire el-container is the entire layout, and different blocks can be divided under it according to different layouts, but in summary it can be divided into: 1. Side menu bar; 2 , header area; 3. content display area; 4. tail area, we can choose and combine according to our own needs. These divided blocks involve different configurations and processing, so we can separate these large blocks from The overall layout is separated into components to make the code more readable; in addition, each separated component may itself have problems that need to be split. Through splitting, we can reduce a complex problem to simplicity and solve it easily.

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

The menu bar component extracted from the layout layout:

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

The menu item component extracted from the menu bar:

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

6. Menu bar logo

First, put the logo image you prepared into the assets folder under src, then create a new MenuLogo.vue file under the logo folder of the layout menu, and configure it as follows:

<template>
  <div class="logo">
    <img  :src="Logo" / alt="How to use vue3 to build a backend system" >
    <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>

Finally, in the menu Introduce the menu logo component into the column component and use

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

The effect is as follows:

7. Routing and page linkage

In the router of src Add the following routing configuration to the index.ts file and create the corresponding file in the views folder

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

After adding the routing configuration, create the corresponding file for the routing and add some descriptive text. Although at this time The route and the corresponding page have been created and associated together, but the route has not been referenced, so the data of the routing page cannot be displayed in the correct location. Therefore, we need to reference the route to the main area of ​​the layout, as well. It is the data display area, which ensures that when we access a certain route, the corresponding routing page can be displayed in this area.

1. Pay attention to the details of routing and page linkage

In the menu item component, we bind the route to the index attribute of the menu item The purpose of the path value is to enable a method provided in element-plus to use index as the path to perform routing jumps when activating the navigation menu (when we click on a menu item, the menu item is the activated menu). So in order for me to use this function, we also need to add the router attribute to the el-menu tag of the menu bar component to enable this function, and also add the default-active attribute to indicate the currently activated menu. Examples are as follows

<template>
  <menu-logo></menu-logo>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-vertical-demo"
    :unique-opened="uniqueOpenedFlag"
    router
  >
    <!-- 在为el-menu设置unique-opened属性时必须要确保el-sub-menu、el-menu-item中index的唯一性，如果index不唯一则不生效 ，一般我们为index绑定路由的path值 -->
    <!-- 本组件作为父组件向子组件传递数据menuList，子组件需要定义menuList属性以确保可以接受该数据 -->
    <!-- router属性可以激活以 index 作为 path 进行路由跳转 -->
    <!-- default-active属性用来指明当前被激活的菜单，其值为菜单项中index的值，也就是path值 -->
    <menu-item :menuList="menuList"></menu-item>
  </el-menu>
</template>
 
import { useRouter, useRoute } from "vue-router";
 
// 获取当前点击的路由
const route = useRoute();
// 从路由中获取path
const activeIndex = computed(() => {
  const { path } = route;
  return path;
});

The above is the detailed content of How to use vue3 to build a backend system. For more information, please follow other related articles on the PHP Chinese website!