【vue实战项目】通用管理系统:首页

本文涉及的产品
可视分析地图(DataV-Atlas),3 个项目,100M 存储空间
数据可视化DataV,5个大屏 1个月
简介: 【vue实战项目】通用管理系统:首页

1.搭架子

先来看一下主页的样子:

主页的结构:头部+中间+底部,也就是由header、menu、footer三个组件组成。由于这三个组件是很多页面都要用到的公共组件,所以在components下面建一个common用来放这些公共组件。然后分别建三个组件的架子,先建三个空白的架子吧,后面一点点往这三个组件里填内容。

先把这三个组件写出来,先写三个空白的架子即可,后面再慢慢填充:

header:

<template>
    <div>
        footer
    </div>
</template>
 
<script>
export default{
    data(){
        return {}
    }
}
</script>
<style lang="less" scoped>
 
</style>

footer:

<template>
    <div>
        footer
    </div>
</template>
 
<script>
export default{
    data(){
        return {}
    }
}
</script>
<style lang="less" scoped>
 
</style>

menu:

1.<template>
    <div>
        menu
    </div>
</template>
 
<script>
export default{
    data(){
        return {}
    }
}
</script>
<style lang="less" scoped>
 
</style>

在helloworld组件里面引入一下,看看能不能正常引入:

<template>
  <div class="helloworld">
    <Header></Header>
    <Menu/>
    <Footer/>
  </div>
</template>
 
<script>
import Footer from './common/Footer.vue'
import Header from './common/Header.vue'
import Menu from './common/Menu.vue'
export default {
  components:{
    Footer,
    Menu,
    Header
  },
  data(){
    return{}
  }
}
</script>

能正常引入的话,页面上会显示几个组件的内容:

然后基于原来的HelloWorld改成Home页面:

<template>
  <div class="home">
    <Header></Header>
    <Menu/>
    <Footer/>
  </div>
</template>
 
<script>
import Footer from './common/Footer.vue'
import Header from './common/Header.vue'
import Menu from './common/Menu.vue'
export default {
  components:{
    Footer,
    Menu,
    Header
  },
  data(){
    return{}
  }
}
</script>
 
<style lang="less">
.home{
  width: 100%;
  height: 100%;
}
</style>

2.布局

准备好三个组件后,接下来就是对Home进行布局,既然用了UI框架,直接用elementUI提供的布局即可,在其官网上有:

选一个,改一改,然后调整一下样式:

<template>
  <div class="home">
    <Header/>
      <el-container class="content">
        <Menu/>
      <el-container>
        <el-main>Main</el-main>
        <el-footer><Footer/></el-footer>
      </el-container>
    </el-container>
  </div>
</template>
 
<script>
import Footer from './common/Footer.vue'
import Header from './common/Header.vue'
import Menu from './common/Menu.vue'
export default {
  components:{
    Footer,
    Menu,
    Header
  },
  data(){
    return{}
  }
}
</script>
 
<style lang="less">
.home{
  width: 100%;
  height: 100%;
  .content{
    position: absolute;
    width: 100%;
    top: 60px;
    bottom: 0;
  }
}
</style>

3.Header

接下来需要调整一下header,根据上面的效果图可以看到,header上面要显示系统的名字和登录用户的用户名。系统名称直接写死,用户名可以用到我们之前封装的setToken.js去取登陆后我们放在缓存中的username作为用户名来显示。

<template>
    <div>
        <el-header>
            <div class="title">通用管理系统</div>
            <div>{{name}}</div>
        </el-header>
    </div>
</template>
 
<script>
import {getToken} from '@/utils/setToken.js' 
export default{
    data(){
        return {
            name:''
        }
    },
    created(){
        this.name=getToken('username')
    }
}
</script>
<style lang="less" scoped>
 
</style>

系统名称要在最左边,用户名要在最右边,所以调整一下样式:

<template>
    <div class="header">
        <el-header>
            <div class="title">通用管理系统</div>
            <div>{{name}}</div>
        </el-header>
    </div>
</template>
 
<script>
import {getToken} from '@/utils/setToken.js' 
export default{
    data(){
        return {
            name:''
        }
    },
    created(){
        this.name=getToken('username')
    }
}
</script>
<style lang="less" scoped>
    .header{
        .el-header{
            background: #2578b5;
            color: #fff;
            line-height: 60px;
            display: flex;
            justify-content: space-between;
            .title{
                width:200px;
                font-size: 24px;
            }
        }
    }
</style>

这样Header就处理好了。

4.Footer

footer比较简单,用一个el-card来包裹,加上一些文字内容就可以了。

<template>
    <div class="footer">
        <el-card>Frontend 2023 BugMan</el-card>
    </div>
</template>
 
<script>
export default{
    data(){
        return {}
    }
}
</script>
<style lang="less" scoped>
    
</style>


5.Menu

5.1.页面

菜单组件elementUI也提供了:

去找一个,然后调整一下即可:

<template>
  <div class="menu">
    <el-aside width="200px">
      <el-col :span="12">
        <h5>自定义颜色</h5>
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>导航一</span>
            </template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
              <el-menu-item index="1-1">选项1</el-menu-item>
              <el-menu-item index="1-2">选项2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组2">
              <el-menu-item index="1-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="1-4">
              <template slot="title">选项4</template>
              <el-menu-item index="1-4-1">选项1</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-menu-item index="2">
            <i class="el-icon-menu"></i>
            <span slot="title">导航二</span>
          </el-menu-item>
          <el-menu-item index="3" disabled>
            <i class="el-icon-document"></i>
            <span slot="title">导航三</span>
          </el-menu-item>
          <el-menu-item index="4">
            <i class="el-icon-setting"></i>
            <span slot="title">导航四</span>
          </el-menu-item>
        </el-menu>
      </el-col>
    </el-aside>
  </div>
</template>
 
<script>
export default {
  data() {
    return {};
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>
<style lang="less" scoped></style>

看一下效果图,会发现菜单虽然是引进去了,但是样式很奇怪,所以接下来要做的就是调整菜单样式。

有左右和上下的滑动条说明高度和宽度不够,将高度拉到100%,宽度调宽一点即可。背景色不和谐,需要手动调整一下背景色。具体的样式调整后整个menu组件内容如下:

<template>
  <div class="menu">
    <el-aside width="200px">
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#2578b5"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>导航一</span>
            </template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
              <el-menu-item index="1-1">选项1</el-menu-item>
              <el-menu-item index="1-2">选项2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组2">
              <el-menu-item index="1-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="1-4">
              <template slot="title">选项4</template>
              <el-menu-item index="1-4-1">选项1</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-menu-item index="2">
            <i class="el-icon-menu"></i>
            <span slot="title">导航二</span>
          </el-menu-item>
          <el-menu-item index="3" disabled>
            <i class="el-icon-document"></i>
            <span slot="title">导航三</span>
          </el-menu-item>
          <el-menu-item index="4">
            <i class="el-icon-setting"></i>
            <span slot="title">导航四</span>
          </el-menu-item>
        </el-menu>
    </el-aside>
  </div>
</template>
 
<script>
export default {
  data() {
    return {};
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>
<style lang="less" scoped>
.menu{
    .el-aside{
        height: 100%;
        .el-menu{
            height:100%;
        }
        .el-submenu .el-menu-item{
            min-width: 0;
        }
    }
}
</style>

调整后的效果:

我们其实用不到那么多一级菜单,只保留一个导航一即可,并且其实我们也不需要elementUI自带的示例里面给出的handleOpen和handleClose方法,所以这里再整理一下页面,最终的内容和效果如下:

<template>
  <div class="menu">
    <el-aside width="200px">
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          background-color="#2578b5"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>导航一</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="1-1">选项1</el-menu-item>
              <el-menu-item index="1-2">选项2</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
    </el-aside>
  </div>
</template>
 
<script>
export default {
  data() {
    return {};
  },
};
</script>
<style lang="less" scoped>
.menu{
    .el-aside{
        height: 100%;
        .el-menu{
            height:100%;
        }
        .el-submenu .el-menu-item{
            min-width: 0;
        }
    }
}
</style>

最终调整后的效果:

5.2.路由

5.2.1自定义菜单内容

菜单最核心的内容自然是点某一项转跳到某一个组件上去。接下来我们要完成的就是菜单的路由转跳。

首先改写一下路由文件:

import Vue from 'vue'
import Router from 'vue-router'
 
Vue.use(Router)
 
export default new Router({
    routes:[
        {
            path:'/',
            redirect:'/login',
            component: ()=>import('@/components/Login')
        },
        {
            path:'/login',
            name:'Login',
            component: ()=>import('@/components/Login')
        },
        {
            path:'/home',
            name:'学生管理',
            iconClass:'fa fa-users',
            //默认转跳到学生管理页
            redirect:'/home/student',
            component: ()=>import('@/components/Home'),
            children:[
                {
                    path:'/home/student',
                    name:'学生列表',
                    iconClass:'fa fa-list',
                    component: ()=>import('@/components/students/StudentList'),
 
                },
                {
                    path:'/home/info',
                    name:'信息列表',
                    iconClass:'fa fa-list-alt',
                    component: ()=>import('@/components/students/InfoList'),
 
                },
                {
                    path:'/home/info',
                    name:'信息管理',
                    iconClass:'fa fa-list-alt',
                    component: ()=>import('@/components/students/InfoLists'),
 
                },
                {
                    path:'/home/work',
                    name:'作业列表',
                    iconClass:'fa fa-list-ul',
                    component: ()=>import('@/components/students/WorkList'),
 
                },
                {
                    path:'/home/info',
                    name:'作业管理',
                    iconClass:'fa fa-list',
                    component: ()=>import('@/components/students/WorkMent'),
 
                }
            ]
        },
        {
            path:'/home/dataview',
            name:'数据分析',
            iconClass:'fa fa-bar-chart',
            component: ()=>import('@/components/Home'),
            children:[
                {
                    path:'/home/dataview',
                    name:'数据概览',
                    iconClass:'fa fa-list',
                    component: ()=>import('@/components/dataAnalysis/DataView'),
 
                },
                {
                    path:'/home/mapview',
                    name:'地图概览',
                    iconClass:'fa fa-line-chart',
                    component: ()=>import('@/components/dataAnalysis/DataView'),
 
                },
                {
                    path:'/home/travel',
                    name:'旅游地图',
                    iconClass:'fa fa-line-chart',
                    component: ()=>import('@/components/dataAnalysis/ScoreMap'),
 
                },
                {
                    path:'/home/score',
                    name:'分数地图',
                    iconClass:'fa fa-line-chart',
                    component: ()=>import('@/components/dataAnalysis/TravelMap'),
 
                }
            ]
        },
        {
            path:'/users',
            name:'用户中心',
            iconClass:'fa fa-user',
            component: ()=>import('@/components/Home'),
            children:[
                {
                    path:'/home/user',
                    name:'用户概览',
                    iconClass:'fa fa-list',
                    component: ()=>import('@/components/users/User'),
 
                }
            ]
 
        },
        {
            path:'*',
            name:'NotFound',
            component:()=>import('@/components/NotFound')
        }
    ],
    mode:'history'
})

在menu中打印一下看能不能取到配置好的index.js的内容:

<script>
export default {
  data() {
    return {
      menus:[]
    };
  },
  created(){
    console.log(this.$router.options.routes);
  }
};
</script>

可以看到是有数据的,有数据那就很好办了:

去遍历菜单把数据取出来,绑定到菜单栏上去即可:

<template>
  <div class="menu">
    <el-aside width="200px">
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          background-color="#2578b5"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <template v-for="(item,index) in  menus">
            <el-submenu :index="index + ''" :key="index">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>{{item.name}}</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="1-1">选项1</el-menu-item>
              <el-menu-item index="1-2">选项2</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          </template>
        </el-menu>
    </el-aside>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      menus:[]
    };
  },
  created(){
    console.log(this.$router.options.routes);
    this.menus=[...this.$router.options.routes]
  }
};
</script>
<style lang="less" scoped>
.menu{
    .el-aside{
        height: 100%;
        .el-menu{
            height:100%;
        }
        .el-submenu .el-menu-item{
            min-width: 0;
        }
    }
}
</style>

可以看到已经取到我们配置的导航菜单了:

会发现还有一个问题,Login、用户中心、404页并不是我们想展示出来的,这里需要给菜单项加上一个是否隐藏的属性,在遍历时去判断该属性从而决定是不是要显示:

import Vue from 'vue'
import Router from 'vue-router'
 
Vue.use(Router)
 
export default new Router({
    routes:[
        {
            path:'/',
            redirect:'/login',
            hidden:true,
            component: ()=>import('@/components/Login')
        },
        {
            path:'/login',
            name:'Login',
            hidden:true,
            component: ()=>import('@/components/Login')
        },
        {
            path:'/home',
            name:'学生管理',
            iconClass:'fa fa-users',
            //默认转跳到学生管理页
            redirect:'/home/student',
            component: ()=>import('@/components/Home'),
            children:[
                {
                    path:'/home/student',
                    name:'学生列表',
                    iconClass:'fa fa-list',
                    component: ()=>import('@/components/students/StudentList'),
 
                },
                {
                    path:'/home/info',
                    name:'信息列表',
                    iconClass:'fa fa-list-alt',
                    component: ()=>import('@/components/students/InfoList'),
 
                },
                {
                    path:'/home/info',
                    name:'信息管理',
                    iconClass:'fa fa-list-alt',
                    component: ()=>import('@/components/students/InfoLists'),
 
                },
                {
                    path:'/home/work',
                    name:'作业列表',
                    iconClass:'fa fa-list-ul',
                    component: ()=>import('@/components/students/WorkList'),
 
                },
                {
                    path:'/home/info',
                    name:'作业管理',
                    iconClass:'fa fa-list',
                    component: ()=>import('@/components/students/WorkMent'),
 
                }
            ]
        },
        {
            path:'/home/dataview',
            name:'数据分析',
            iconClass:'fa fa-bar-chart',
            component: ()=>import('@/components/Home'),
            children:[
                {
                    path:'/home/dataview',
                    name:'数据概览',
                    iconClass:'fa fa-list',
                    component: ()=>import('@/components/dataAnalysis/DataView'),
 
                },
                {
                    path:'/home/mapview',
                    name:'地图概览',
                    iconClass:'fa fa-line-chart',
                    component: ()=>import('@/components/dataAnalysis/DataView'),
 
                },
                {
                    path:'/home/travel',
                    name:'旅游地图',
                    iconClass:'fa fa-line-chart',
                    component: ()=>import('@/components/dataAnalysis/ScoreMap'),
 
                },
                {
                    path:'/home/score',
                    name:'分数地图',
                    iconClass:'fa fa-line-chart',
                    component: ()=>import('@/components/dataAnalysis/TravelMap'),
 
                }
            ]
        },
        {
            path:'/users',
            name:'用户中心',
            iconClass:'fa fa-user',
            component: ()=>import('@/components/Home'),
            children:[
                {
                    path:'/home/user',
                    name:'用户概览',
                    iconClass:'fa fa-list',
                    component: ()=>import('@/components/users/User'),
 
                }
            ]
 
        },
        {
            path:'*',
            name:'NotFound',
            hidden:true,
            component:()=>import('@/components/NotFound')
        }
    ],
    mode:'history'
})
<template>
  <div class="menu">
    <el-aside width="200px">
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          background-color="#2578b5"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <template v-for="(item,index) in  menus">
            <el-submenu :index="index + ''" :key="index" v-if="!item.hidden">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>{{item.name}}</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="1-1">选项1</el-menu-item>
              <el-menu-item index="1-2">选项2</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          </template>
        </el-menu>
    </el-aside>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      menus:[]
    };
  },
  created(){
    console.log(this.$router.options.routes);
    this.menus=[...this.$router.options.routes]
  }
};
</script>
<style lang="less" scoped>
.menu{
    .el-aside{
        height: 100%;
        .el-menu{
            height:100%;
        }
        .el-submenu .el-menu-item{
            min-width: 0;
        }
    }
}
</style>

效果:

把二级菜单一起调整出来:

<template>
  <div class="menu">
    <el-aside width="200px">
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          background-color="#2578b5"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <template v-for="(item,index) in  menus">
            <el-submenu :index="index + ''" :key="index" v-if="!item.hidden">
            <template slot="title">
              <i :class="item.iconClass"></i>
              <span>{{item.name}}</span>
            </template>
            <el-menu-item-group v-for="(child,index) in item.children" :key="index">
              <el-menu-item :index="child.path">
                <i :class="child.iconClass">{{child.name}}</i>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          </template>
        </el-menu>
    </el-aside>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      menus:[]
    };
  },
  created(){
    console.log(this.$router.options.routes);
    this.menus=[...this.$router.options.routes]
  }
};
</script>
<style lang="less" scoped>
.menu{
    .el-aside{
        height: 100%;
        .el-menu{
            height:100%;
            .fa{
              margin-right: 10px;
            }
        }
        .el-submenu .el-menu-item{
            min-width: 0;
        }
    }
}
</style>

5.2.2.开启路由功能

先给meun组件上的elementUI的导航栏开启路由功能,这样点击导航栏,路径才会对应转跳:

<el-menu
          router
          default-active="2"
          class="el-menu-vertical-demo"
          background-color="#2578b5"
          text-color="#fff"
          active-text-color="#ffd04b"
        >

然后在home上给出路由出口:

<template>
  <div class="home">
    <Header/>
      <el-container class="content">
        <Menu/>
      <el-container>
        <el-main><router-view></router-view></el-main>
        <el-footer><Footer/></el-footer>
      </el-container>
    </el-container>
  </div>
</template>

可以看到路由可以正常工作了:

6.面包屑导航

整个首页的架子已经搭好了,也完成了菜单的转跳,但是还差个细节就是面包屑导航栏:

去elementUI官网上找一个面包屑的导航组件:

在common下面新建一个面包屑组件,调整一下官网上扣下来的内容,使得其可以取到我们真实菜单的内容:

Home里面引入使用一下即可:

<template>
  <div class="home">
    <Header/>
      <el-container class="content">
        <Menu/>
      <el-container>
        <el-main>
          <Breadcrumb/>
          <router-view></router-view>
        </el-main>
        <el-footer><Footer/></el-footer>
      </el-container>
    </el-container>
  </div>
</template>
 
<script>
import Footer from './common/Footer.vue'
import Header from './common/Header.vue'
import Menu from './common/Menu.vue'
import Breadcrumb from './common/Breadcrumb.vue'
export default {
  components:{
    Footer,
    Menu,
    Header,
    Breadcrumb
  },
  data(){
    return{}
  }
}
</script>
 
<style lang="less">
.home{
  width: 100%;
  height: 100%;
  .content{
    position: absolute;
    width: 100%;
    top: 60px;
    bottom: 0;
  }
}
</style>

相关实践学习
基于Hologres轻松玩转一站式实时仓库
本场景介绍如何利用阿里云MaxCompute、实时计算Flink和交互式分析服务Hologres开发离线、实时数据融合分析的数据大屏应用。
阿里云实时数仓实战 - 项目介绍及架构设计
课程简介 1)学习搭建一个数据仓库的过程,理解数据在整个数仓架构的从采集、存储、计算、输出、展示的整个业务流程。 2)整个数仓体系完全搭建在阿里云架构上,理解并学会运用各个服务组件,了解各个组件之间如何配合联动。 3&nbsp;)前置知识要求 &nbsp; 课程大纲 第一章&nbsp;了解数据仓库概念 初步了解数据仓库是干什么的 第二章&nbsp;按照企业开发的标准去搭建一个数据仓库 数据仓库的需求是什么 架构 怎么选型怎么购买服务器 第三章&nbsp;数据生成模块 用户形成数据的一个准备 按照企业的标准,准备了十一张用户行为表 方便使用 第四章&nbsp;采集模块的搭建 购买阿里云服务器 安装 JDK 安装 Flume 第五章&nbsp;用户行为数据仓库 严格按照企业的标准开发 第六章&nbsp;搭建业务数仓理论基础和对表的分类同步 第七章&nbsp;业务数仓的搭建&nbsp; 业务行为数仓效果图&nbsp;&nbsp;
目录
相关文章
|
3天前
|
JavaScript
vue知识点
vue知识点
11 3
|
5天前
|
JavaScript 前端开发
在 JeecgBoot 项目中基于 Vue 3 配置多页面入口
本文介绍了在JeecgBoot Vue 3项目中配置多页面入口的步骤。首先,确保下载了项目源码,然后在项目根目录创建`home.html`作为新页面模板。接着,在`src`下建立`multiPage/home`目录,包含`App.vue`和`main.ts`文件以构建新页面。最后,更新`build/vite/plugin/html.ts`中的`htmlPlugin`以支持多页面配置。完成这些步骤后,项目将具备管理多个独立页面的能力。
19 4
|
8天前
|
JavaScript
|
7天前
|
存储 缓存 JavaScript
vue代码优化方案
【7月更文挑战第13天】 **Vue.js 优化要点:** 分解大组件以提高复用性和加载速度;利用计算属性与侦听器优化数据处理;使用Object.freeze()减少响应式数据;借助Vuex或Composition API管理状态;实现虚拟滚动和无限加载提升长列表性能;路由懒加载减少初始加载时间;用Vue DevTools检测性能瓶颈;定期代码审查与重构;应用缓存策略;遵循最佳实践与团队规范,提升应用整体质量。
22 2
|
9天前
|
JavaScript 前端开发
【vue】 el-table解决分页不能筛选全部数据的问题
【vue】 el-table解决分页不能筛选全部数据的问题
23 4
|
9天前
|
JavaScript
【vue】 vue2 监听滚动条滚动事件
【vue】 vue2 监听滚动条滚动事件
16 1
|
21小时前
|
存储 JavaScript API
Vue 全局状态管理新宠:Pinia实战指南
 随着Vue.js项目的日益复杂,高效的状态管理变得至关重要。Pinia作为Vue.js官方推荐的新一代状态管理库,以其简洁的API和强大的功能脱颖而出。本文将带您快速上手Pinia,从安装到应用,轻松实现Vue.js项目的全局状态管理,提升开发效率和项目可维护性。
|
JavaScript 测试技术 容器
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
1017 0
|
9天前
|
JavaScript
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
22 6
|
9天前
|
JavaScript 定位技术
【天地图】vue 天地图 T is not defined
【天地图】vue 天地图 T is not defined
20 1