基于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中引入组件,并配置路由

添加新的路由链接

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

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

时间: 2024-11-05 06:26:35

基于elementUI创建的vue项目的相关文章

创建一个Vue项目

Vue.js不支持IE8及其以下版本,因为Vue.js使用了IE8不能模拟的ECMAScript5特性. 在用Vue.js构建大型应用时推荐使用NPM安装,Npm能很好地和诸如Webpack或Browserify模块打包器配合使用.Vue.js也提供配套工具来开发单文件组件. vue的安装依赖于node.js,要确保你的计算机上已安装过node.js.可以进入cmd编辑器,输入node -v进行查看.node尽量要用一些新的版本,否则后续安装会提示node版本过低.去node官网下个新版node

基于Mint UI开发VUE项目一之环境搭建和头部底部导航栏的实现

一:简介 Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.通过它,可以快速构建出风格统一的页面,提升开发效率.真正意义上的按需加载组件.可以只加载声明过的组件及其样式文件,无需再纠结文件体积过大.考虑到移动端的性能门槛,Mint UI 采用 CSS3 处理各种动效,避免浏览器进行不必要的重绘和重排,从而使用户获得流畅顺滑的体验.依托 Vue.js 高效的组件化方案,Mint UI 做到了轻量化.即使全部引入,压缩后的文件体积也仅有 ~30kb (JS + CSS

node创建一个Vue项目

vue的安装 Vue.js不支持IE8及以下版本.因为Vue.js使用了ECMAScript5特性,IE8显然不能模拟.Vue.js支持所有兼容ECMAScript5的浏览器. 在用Vue.js构建大型应用时,推荐使用npm安装,npm能很好的和webpack等打包工具配合使用. 首先Vue的安装依赖于node.js,要保证你的计算机上已经安装过node.js. 如何查看node是否安装或者node版本呢?进入cmd,输入命令 node -v,回车查看.node最好使用新一些的版本,否则后续安装

创建一个vue 项目 必备的几个插件

第一步npm安装 首先:先从nodejs.org中下载nodejs 打开控制命令行程序(CMD),node -v 检查是否正常 使用淘宝NPM 镜像 npm  install  -g  cnpm  --registry=https://registry.npm.taobao.org 第二步项目初始化 1.第一步:安装vue-cli cnpm install vue-cli -g      //全局安装 vue-cli 2.新建vue项目 vue init webpack  "项目名称"

快速创建一个vue 项目

首先查找本机是否安装node  使用node -v  进行检查出现版本号即安装了 再检查本是否安装 npm 使用npm -v 进行检查,出现版本号即安装好了 安装vue-cli  使用npm install -g vue-cli  命令进行安装 安装好这一步,在创建一个项目 vue init  webpack my-project,这一步要一系列的y或者n进行对项目的一些简单配置 进入项目中使用cd my-project 进入项目 再npm install 一下 然后在npm run dev 或

创建djang+vue项目

本人已经安装过python ,django等, 这里记录自己创建django项目的操作. 1.使用django命令创建项目 django-admin startproject django_vue_demo 目录结构: 2.进入项目根目录 3.创建App 创建后目录 4.查看npm安装过的模块 没有看见vue模块,说明没有安装vue,直接通过npm安装 安装webpack 安装 axios 4.创建vue_modual的vue.js前端项目 5.使用webpack打包项目 npm install

二、基于【 springBoot +springCloud+vue 项目】二 || 项目架构目录

1.项目架构目录 API工具类 ---commons-parent ------commons-api(api接口统一返回与统一异常处理) ------commons-core(业务通用工具类) ------commons-base(项目通用工具类) ------commons-test(工具类测试) API网关解决方案 ---theme-parent ------theme-common ---------theme-common-gateway-core(网关解决方案) ---------t

利用vue-cli创建Vue项目

1.安装node.js:Node.js安装包及源码下载地址为:https://nodejs.org/en/download/. 配置参考:http://www.runoob.com/nodejs/nodejs-install-setup.html: 2.基于node.js,利用淘宝npm镜像安装相关依赖. 在cmd里直接输入:npm install -g cnpm --registry=https://registry.npm.taobao.org,回车,等待安装... 注意:确保npm版本大于

【vue】创建一个vue前端项目,编译,发布

[一]mac检查是否安装node.js nvm --version =>0.33.9 node -v =>v10.7.0 [二]安装vue-cli cnpm install --global vue-cli [三]创建一个vue项目.基于 # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project # 这里需要进行一些配置,默认回车即可 原文地址:https://www.cnblogs.com/shangxiaofei/p/9429512.htm