基于elementUI创建的vue项目

Posted wyongz

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了基于elementUI创建的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项目的主要内容,如果未能解决你的问题,请参考以下文章

Vue +ElementUI +Baidu地图 项目模板

vue 笔记(十四)vue+elementUI

vue2.0-基于elementui换肤[自定义主题]

vue2.0-基于elementui换肤[自定义主题]

基于Vue的ElementUI级联显示以及数据回显

1.vue 项目搭建,基于element UI的pc端框架