Vue3最佳实践第四章 VUE常用 UI 库 1 ( element-plus,Ant ,naiveui,ArcoDesign)

本文链接：https://blog.csdn.net/zhtbs/article/details/132736600

在这里插入图片描述

现在常用的前台UI 分别是以下几种，我们将从中间选择介绍几个主流的UI的用于后台的系统搭建与开发。

  Ant Design Vue 
  element-plus
  naiveui
  ArcoDesign
  Bootstrap Vue 
  Buefy 
  Chakra UI 
  Framevuerk 
  Oruga 
  Tachyons 
  Tailwind CSS 
  NutUI 
  Vant 
  Vuetify.js

第一章 Vue3项目创建 1 Vue CLI 创建vue项目
 第一章 Vue3项目创建 2 使用 Webpack 5 搭建 vue项目
 第一章 Vue3项目创建 3 Vite 创建 vue项目
 第二章 Vue3 基础语法指令
 第三章 Vue Router路由器的使用
 第四章 VUE常用 UI 库 1 ( element-plus,Ant ,naiveui,ArcoDesign)
第四章 VUE常用 UI 库 2 ( ailwind 后台框架)
第五章 Vue 组件应用 1( Props )
第五章 Vue 组件应用 2 ( Emit )
第五章 Vue 组件应用 3( Slots )
第五章 Vue 组件应用 4 ( provide 和 inject )
第五章 Vue 组件应用 5 (Vue 插件)
第六章 Pinia,Vuex与axios,VueUse 1（Pinia）
第六章 Pinia,Vuex与axios,VueUse 2(Vuex)
第六章 Pinia,Vuex与axios,VueUse 3（VueUse）
第六章 Pinia,Vuex与axios,VueUse 4（axios）
第七章 TypeScript 上
 第七章 TypeScript 中
 第七章 TypeScript 下创建Trello 任务管理器
 第八章 ESLint 与测试 ( ESLint )
第八章 ESLint 与测试 ( Jest )
第八章 ESLint 与测试 (TypeScript 中Jest与检测环境集成)

4.1 element-plus

Element Plus一直是国人最喜欢的一个UI架构使用率一直排在vue中的第一第二的位置，Element Plus 共有68 个组件功能非常完善，而且它与vue3兼容的比较好。官方网站https://element-plus.org/ 很方便阅读学习。

 npm install element-plus --save

项目结构

zht-vite-vue
   |---node_modules
   |---index.html        //运行html
   |---src               //代码源文件
   |    |--zht           //组件目录
   |    |   |---Layout.vue  //后台框架页
   |    |--main.js       //入口文件
   |    |--App.vue       //模板入口路由
   |    |--router.js     //路由控制器   
   |----package.json     //配置文件

搭建一个简单的后台管理系统，所有后台管理系统都是有这几个组件组成的，1 入口文件 2 后台框架页面 3 路由控制器。

1 main.js
element-plus配置信息加入到vue组件中来，这样整个项目都可以使用element-plus样式中的UI做为组件使用。

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(router)
app.use(ElementPlus)
app.mount('#app')

2 App.vue 系统框架页面
系统框架中设置一个总路由器，为了以后登录成功后页面移动到框架页面。

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
router.push({ path: '/Layout' })
</script>
<template>
  <router-view />
</template>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
nav {
  padding: 30px;
}
nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
/* flex布局 */
.flex-float {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex {
  display: flex;
  align-items: center;
}
</style>

3 Layout.vue 系统框架页面

创建一个常规的后台系统框架页面，页面分为三部分，头，菜单，主体。

    <el-container>
        <el-header>标题</el-header>
        <el-container>
          <el-aside width="200px">
            菜单
            </el-aside>
          <el-main>
          主页
          <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>
`el-aside`中创建菜单组件，el-main加入路由组件路由使用看上一章，当点击菜单后路由组件加载对应的路由页面信息内容。

<script>    
</script>
<template>
  <div>
    <div class="common-layout">
      <el-container>
        <el-header>Header</el-header>
        <el-container>
          <el-aside width="200px">
            <el-menu background-color="none" text-color="#fff" :router="true">
              <el-sub-menu index="1">
                <template #title>
                  <el-icon><location /></el-icon>
                  <span>账号管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="/zht1">
                  用户列表
                  </el-menu-item>
                </el-menu-item-group>
              </el-sub-menu>
            </el-menu>
            </el-aside>
          <el-main><router-view></router-view></el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>
<style>
.el-header,
  .el-footer {
    background-color: #b3c0d1;
    color: var(--el-text-color-primary);
    text-align: center;
    line-height: 60px;
  }
  .el-aside {
    background-color: #d3dce6;
    color: var(--el-text-color-primary);
    text-align: center;
    line-height: 200px;
  }
  .el-container {
  height: 95vh;
  overflow: hidden;
}
</style>

4 前端页面路由设置
在路由器中后台系统中使用到的所有页面设置。

import { createRouter, createWebHistory } from 'vue-router'
import zht1 from './zht/Layout.vue'
const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    routes: [
      {
        path: '/Layout',
        name: 'Layout',
        component:zht1,
        children: [
          {
            path: '/zht1',
            name: 'zht1',
            component:()=>import('./zht/zht.vue'),
          }   
        ]
      },
    ]
  })
  export default router

5 框架页菜单动态生成

<script setup>  
import { useRouter } from 'vue-router'
const router = useRouter()
const menus=[
    {name:"系统管理",id:10000,
    child:[
        {name:"用户管理",id:100001,path:"/zht1"},
        {name:"部门管理",id:100002,path:"/zht1"}]},
    {name:"业务管理",id:20000,
    child:[
        {name:"班组维修",id:20001,path:"/zht1"},
        {name:"工单管理",id:20002,path:"/zht1"}]}
];
const onpage=(e)=>{
router.push({ path:e.path })
}
</script>
<template>
  <div>
    <div class="common-layout">
      <el-container>
        <el-header>Header</el-header>
        <el-container>
          <el-aside width="200px">
            <el-menu     
            class="el-menu-vertical"
            background-color="#0c2135"
            text-color="#b7bdc3"
            active-text-color="#0a60bd">
                <template v-for="nus in menus" :key="nus.id">
                <el-sub-menu :index="nus.id">
                    <template #title>
                        <el-icon><location /></el-icon>
                        <span>{{nus.name}}</span>
                    </template>
                    <template v-for="cnus in nus.child" :key="cnus.id">
                    <el-menu-item @click="onpage(cnus)">{{cnus.name}}</el-menu-item>
                    </template>
                </el-sub-menu>
                </template>
            </el-menu>

            </el-aside>
          <el-main><router-view></router-view></el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>
<style>
.el-header,
  .el-footer {
    background-color: #b3c0d1;
    color: var(--el-text-color-primary);
    text-align: center;
    line-height: 60px;
  }
  .el-aside {
    background-color: #d3dce6;
    color: var(--el-text-color-primary);
    text-align: center;
    line-height: 200px;
  }
  .el-container {
  height: 95vh;
  overflow: hidden;
}
</style>

上面我们使用事件方法转发移动页面，也可以在el-menu标签中事件:router=“true” 直接用路由转移页面内容。

        <el-menu :router="true">
                <template v-for="nus in menus" :key="nus.id">
                <el-sub-menu :index="nus.id">
                    <template #title>
                        <el-icon><location /></el-icon>
                        <span>{{nus.name}}</span>
                    </template>
                    <template v-for="cnus in nus.child" :key="cnus.id">
                    <el-menu-item :index="cnus.path">{{cnus.name}}</el-menu-item>
                    </template>
                </el-sub-menu>
                </template>
            </el-menu>

系统后台页面架构

在这里插入图片描述

4.2 Ant

Ant Design的 Vue UI框架绝对是前二名的存在，和Element Plus 不分上下一直存在Element Plus 和 Ant Design Vue 谁更优秀之争，开发者根据自己特点选择一款适合自己的UI框架。官网https://antdv.com/components/overview 方便大家阅读学习。

npm install ant-design-vue --save

1 main.js

将antdvUI配置信息加入到vue组件中来，项目中就可以使用ant样式进行UI开发。

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
const app = createApp(App)
app.use(router)
app.use(Antd)
app.mount('#app')

2 App.vue 系统框架页面

系统框架中设置一个总路由器，为了以后登录成功后页面移动到框架页面。

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
router.push({ path: '/Layout' })
</script>
<template>
  <router-view />
</template>
<style>
</style>

3 Layout.vue 系统框架页面

<template>
  <a-layout>
    <a-layout-sider>Sider</a-layout-sider>
    <a-layout>
      <a-layout-header>Header</a-layout-header>
      <a-layout-content>Content</a-layout-content>
      <a-layout-footer>Footer</a-layout-footer>
    </a-layout>
  </a-layout>
  </template>
<style>
.ant-layout {
  height: 100vh;
  overflow: hidden;
}
</style>

创建动态菜单跳转页面

<script setup>  
import { useRouter } from 'vue-router'
const router = useRouter()
const menus=[
    {name:"系统管理",id:10000,
    child:[
        {name:"用户管理",id:100001,path:"/zht1"},
        {name:"部门管理",id:100002,path:"/zht1"}]},
    {name:"业务管理",id:20000,
    child:[
        {name:"班组维修",id:20001,path:"/zht1"},
        {name:"工单管理",id:20002,path:"/zht1"}]}
];
const onpage= e =>{
console.log(e);
router.push({ path:'/zht1'})
}
</script>
<template>
  <a-layout>
    <a-layout-sider width="200" style="background: #fff">
        <a-menu
          mode="inline"
          :style="{ height: '100%', borderRight: 0 }"
        >
        <template v-for="nus in menus" :key="nus.id">
        <a-sub-menu >
            <template #title>
              <span>
                <user-outlined />
                {{nus.name}}
              </span>
            </template>
            <template v-for="cnus in nus.child" :key="cnus.id">
                <a-menu-item @click="onpage(cnus)">{{cnus.name}}</a-menu-item>
            </template>  
        </a-sub-menu>  
        </template>      
        </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header>头部分</a-layout-header>
      <a-layout-content><router-view></router-view></a-layout-content>
    </a-layout>
  </a-layout>
  </template>
<style>
.ant-layout {
    height: 100vh;
  overflow: hidden;
}
</style>

4 前端页面路由设置

路由器router.js文件中后台系统中使用到的所有页面设置。

import { createRouter, createWebHistory } from 'vue-router'
import zht1 from './zht/Layout.vue'
const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    routes: [
      {
        path: '/Layout',
        name: 'Layout',
        component:zht1,
        children: [
          {
            path: '/zht1',
            name: 'zht1',
            component:()=>import('./zht/zht.vue'),
          }   
        ]
      },
    ]
  })
  export default router

在这里插入图片描述

4.3 naiveui

NaiveUI 也是很流行的UI框架现在它应该能排到使用率的前五名，它的特点是比上面二个UI在开发的时候轻巧方便。它附带 70 多个精心制作的组件，这些组件是高性能的、可定制的，具有一流的 TypeScript 支持，并且适合任何 Vue 3 应用程序。官网地址https://www.naiveui.com/

npm install naive-ui --save
npm i -D naive-ui

1 main.js

引入 naiveui 样式到项目组件中来。

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import naive from 'naive-ui'
const app = createApp(App)
app.use(router)
app.use(naive)
app.mount('#app')

2 Layout.vue 系统框架页面

其他功能与上面二个例子一样，就是在菜单生产的时候有自己的语句结构。

<script setup>  
import { useRouter } from 'vue-router'
const router = useRouter()
const menus=[
    {name:"系统管理",id:10000,
    child:[
        {name:"用户管理",id:100001,path:"/zht1"},
        {name:"部门管理",id:100002,path:"/zht1"}]},
    {name:"业务管理",id:20000,
    child:[
        {name:"班组维修",id:20001,path:"/zht1"},
        {name:"工单管理",id:20002,path:"/zht1"}]}
];
const onpage=(key, item) =>{
console.log(key);
console.log(item);
router.push({ path:item.path})
}
</script>
<template>
    <div style="height: 100vh; position: relative">
      <n-layout position="absolute">
        <n-layout-header style="height: 64px; padding: 24px" bordered>
          头
        </n-layout-header>
        <n-layout has-sider position="absolute" style="top: 64px; bottom: 64px">
          <n-layout-sider bordered content-style="padding: 24px;">
          菜单
        <n-menu
          :collapsed-width="64"
          :collapsed-icon-size="22"
          :options="menus"
          @update:value="onpage"//路由触发事件
          key-field="id"
          label-field="name"
          children-field="child"//子集合
        />
          </n-layout-sider>
          <n-layout content-style="padding: 24px;"
              内容
            <router-view></router-view>
          </n-layout>
        </n-layout>
        <n-layout-footer
          bordered
          position="absolute"
          style="height: 64px; padding: 24px"
        >
          底部
        </n-layout-footer>
      </n-layout>
    </div>
  </template>

浏览器中会看到后台基本框架。

在这里插入图片描述

4.4 ArcoDesign

Arco Design 是由字节跳动开源一个前端UI架构，本人比较喜欢用的一个前端UI。它是后起之秀提供了一整套设计组件，使用起来真的是方便简单，代码简洁很适合国人的开发习惯。官方https://arco.design/vue/docs/start网站

npm install --save-dev @arco-design/web-vue

1 引入UI架构到项目中

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ArcoVue from '@arco-design/web-vue';
import '@arco-design/web-vue/dist/arco.css';
const app = createApp(App)
app.use(ArcoVue);
app.use(router)
app.mount('#app')

2 页面架构

<script setup>  
import { useRouter } from 'vue-router'
const router = useRouter()
const menus=[
    {name:"系统管理",id:10000,
    child:[
        {name:"用户管理",id:100001,path:"/zht1"},
        {name:"部门管理",id:100002,path:"/zht1"}]},
    {name:"业务管理",id:20000,
    child:[
        {name:"班组维修",id:20001,path:"/zht1"},
        {name:"工单管理",id:20002,path:"/zht1"}]}
];
const onpage=(item) =>{
console.log(item);
router.push({ path:item.path})
}
</script>
<template>
    <a-layout style="height: 99vh;">
      <a-layout-header>标题</a-layout-header>
      <a-layout>
        <a-layout-sider style="width:260px; margin-left: 1px;">
      <a-menu :style="{ width: '100%' }">
      <template v-for="ns in menus" :key="ns.id">
      <a-sub-menu>
          <template #title>
            <IconCalendar></IconCalendar>{{ns.name}}
          </template>
          <template v-for="cns in ns.child" :key="cns.id">
          <a-menu-item @click="onpage(cns)">{{cns.name}}</a-menu-item>
          </template>
      </a-sub-menu>
      </template>
      </a-menu>
      </a-layout-sider>
        <a-layout-content>
            <router-view></router-view>
        </a-layout-content>
      </a-layout>
      <a-layout-footer>Footer</a-layout-footer>
    </a-layout>
</template>
<style>

</style>

浏览器中效果
在这里插入图片描述

4.5 NutUI

京东UI主要是用于移动端开发使用。

https://nutui.jd.com/#/zh-CN/guide/start

npm init vite@latest vue-nutui
npm i @nutui/nutui --save-dev
npm install vue-router@4 --save-dev

1 main.js中引入UI架构到项目

import { createApp } from "vue";
import App from "./App.vue";
// 注意：这种方式将会导入所有组件
import NutUI from "@nutui/nutui";
// 采用按需加载时  此全局css样式，需要删除
import "@nutui/nutui/dist/style.css";

createApp(App).use(NutUI).mount("#app");

2 路由设置

import { createRouter, createWebHistory } from 'vue-router'
import Page1 from './page/page1.vue';
import Page2 from './page/page2.vue';
import Page3 from './page/page3.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Page3
  },
  {
    path: '/Page1',
    name: 'Page1',
    component: Page1
  },
  {
    path: '/Page2',
    name: 'Page2',
    component: Page2
  }
];
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes,
});
export default router;

3 在page文件中创建page1.vue，page2.vue，page3.vue 三个页面

<script setup>
</script>
<template>
  <h1>Page1</h1>
</template>
<style scoped>
</style>


<script setup>
</script>
<template>
  <h1>Page2</h1>
</template>
<style scoped>
</style>


<script setup>
</script>
<template>
  <h1>欢迎大家使用zht的App</h1>
</template>
<style scoped>
</style>

4 App.vue中创建UI框架

<script setup>
  import { Home,Category,Find,Cart,My} from '@nutui/icons-vue';
  import { useRouter } from 'vue-router';
  const router = useRouter();

  // 跳转到指定路由
  const navigateTo = (routeName) => {
    router.push({ name: routeName });
  };

</script>
<template>
  
<nut-tabbar @tab-switch="tabSwitch" :bottom="true">
     <nut-tabbar-item tab-title="首页" @click="navigateTo('Home')">
        <template #icon>
          <Home></Home>
        </template>
      </nut-tabbar-item>
      <nut-tabbar-item tab-title="分类" @click="navigateTo('Page1')">
        <template #icon>
          <Category></Category>
        </template>
      </nut-tabbar-item>
      <nut-tabbar-item tab-title="标签" @click="navigateTo('Page2')">
        <template #icon>
          <Find></Find>
        </template>
      </nut-tabbar-item>
      <nut-tabbar-item tab-title="购物车" @click="navigateTo('Page3')">
        <template #icon>
          <Cart></Cart>
        </template>
      </nut-tabbar-item>
      <nut-tabbar-item tab-title="我的">
        <template #icon>
          <My></My>
        </template>
      </nut-tabbar-item>
</nut-tabbar>
<RouterView />
</template>

<style scoped>

</style>