码迷,mamicode.com
首页 > 其他好文 > 详细

基于elementUI创建的vue项目

时间:2019-07-16 11:05:56      阅读:130      评论:0      收藏:0      [点我收藏+]

标签:新建   实现   激活   开始   结构   注意   布局   服务   tle   

这周对公司的内容使用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项目

标签:新建   实现   激活   开始   结构   注意   布局   服务   tle   

原文地址:https://www.cnblogs.com/wyongz/p/11192957.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!