基于elementUI创建的vue项目

Posted 2022-04-18 wyongz

这周对公司的内容使用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中引入组件，并配置路由

添加新的路由链接

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