基于elementUI创建的vue项目

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

这周对公司的内容使用vue进行重构，所以记录一下开始项目的过程

下载elementUI：

项目文件夹中在命令行中输入：npm install elementui -s

下载完成后在 main.js 中加入以下内容：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

需要注意的是，样式文件需要单独引入

使用elementui的布局的组件组成页面结构，并在结构中使用自定义的组件

<template>
  <el-container>
  <el-header>
      <Top />
  </el-header>
  <el-container>
    <el-aside width="200px">
        <Aside/>
    </el-aside>
    <el-main>
        <router-view></router-view>
    </el-main>
  </el-container>
</el-container>
</template>

在上边组件中引入了top和aside组件

引入外部的组件需要使用import引入组件，并且导出组件

import Aside from '@/components/common/aside.vue'
import Top from '@/components/common/top.vue'
export default {
    components:{
        Top,
        Aside
    }
};

这样页面初始加载的时候就显示了

使用elementui的导航栏时如果使用路由要把:router设置为true，并在el-menu-item中的index中写上对应的路由地址

 

<el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#00b4aa"
      router=true
      active-text-color="#fff">
      <el-menu-item index="2">
        <i class="el-icon-menu"></i>
        <span slot="title">透传概览</span>
      </el-menu-item>
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>异网透传清单</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/first">疑似透传客户清单</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group>
          <el-menu-item index="/second">疑似透传客户分析</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group>
          <el-menu-item index="/third">疑似服务IP清单</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group>
          <el-menu-item index="/fourth">服务IP行为分析</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>

可以设置导航栏中字体的激活和未激活的状态，也可以设置背景颜色，激活的背景颜色可以通过一下代码来实现

.el-menu-item.is-active {
   background-color: #00b4aa !important;
}

添加路由需要的几步：

新建一个路由对应的文件

Router下的index.js中引入组件，并配置路由

添加新的路由链接

此时项目的结构就构建成功了

以上是 基于elementUI创建的vue项目 的全部内容， 来源链接： utcz.com/z/378925.html

回到顶部