Vue项目使用elementui+vuex+routes

news/2024/7/10 3:15:05 标签: elementui, vue, 前端, js

安装环境

1. 安装vue+nodejs

略

2.创建项目

vue init webpack 项目名

 

 

3. 安装依赖

PS：此处自行选择安装

# 进入工程目录
cd hello-vue

# 安装vue-router
npm install vue-router --save-dev

# 安装element-ui
npm i element-ui -S

# 安装SASS加载器
npm install sass-loader node-sass --save-dev

# 安装axios
npm install --save axios vue-axios

# 安装项目
npm install

# 安装js-cookies
npm i js-cookie -S

# 启动项目
npm run dev

Vue路由

1. 创建路由文件夹

2. 改写路由

// index.js

import Vue from 'vue'
import Router from 'vue-router'
import homeroute from './routes/home.js'
import Vuex from 'vuex'

Vue.use(Router);

const router = new VueRouter({
  routes:homeroute,
  model: 'history',
  base: '/',
})

export default router

此处把 export default newRouter({});进行改写，把它单独拿出来，而此时我们定义的变量router引用了homeroute。而homerouter是我们定义的方便管理home路由的一个路由文件，后序我们再加的时候只需要新建路由文件，然后分开管理即可。尽量做到每个页面一个路由文件。做好路由的统一管理。

// home.js


let routes = [
    {path: '/', redirect: '/home'},
    {
      path: '/home',
      name: "Home",
      component: (resolve) => require(['../../views/home.vue'], resolve),
    },
    {
      path: '/hello',
      name: "HelloWorld",
      component: (resolve) => require(['../../components/HelloWorld.vue'], resolve),
    }
    
  ]

export default routes;

这里我们把/进行重定向，原本/是直接进入到app.vue然后引用了Helloword.vue文件。我们把helloworld.vue进行了路由重写，让他定位到/hello中。然后我们redirect直接就跳到了我们的首页。而我们的/home就是我们views/文件夹下面的home.vue

 

引入模板

1. 创建文件夹

// components

// views

此处进行分模块管理。侧边栏放在aside.vue文件夹中，导航栏放在header.vue文件夹中。

2. 引入模块

<template>
  <div id="Home">
    <Header></Header>
    <el-container>
      <Aside></Aside>
    </el-container>
  </div>
</template>
<script>
import Header from '@/components/header.vue'
import Aside from '@/components/aside.vue'
export default {
  name: 'Home',
  components:{
    Header,
    Aside
  }

}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

我们引入后取的名字Header和Aside就可以直接使用他们的名字作为标签来插入到我们的home.vue中。实现分文件管理。让任务更清晰明确，解耦合。

引入Vuex

在我们的导航栏和侧边栏中，我们想要实现点击按钮收起侧边栏。但是由于是分文件的。我们点击事件放在导航栏，影响的是侧边栏的属性。所以我们要使用vuex。为了呈现之后用elementui写的html，也将引入elementui。

// 引入elementui和vuex

在router/index.js里面，引入

import Vue from 'vue'
import Router from 'vue-router'
import VueRouter from 'vue-router'
import homeroute from './routes/home.js'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'
import Vuex from 'vuex'

Vue.use(Vuex);
Vue.use(ElementUI);
Vue.use(Router);

const router = new VueRouter({
  routes:homeroute,
  model: 'history',
  base: '/',
})

export default router

此处使用了Vue.use，使全局共享引入的模块，所以每个文件都可以使用。

2. 创建store文件夹

Vuex中是为了方便管理全局变量。我们定义了一个state里面包含我们要用到的isCollapse，以改变他是展开还是叠起。实现侧边栏展开叠起功能。我们通过mutations定义一个改变他状态的函数。然后通过new Vuex.Store给他们注册。export default 把他们暴露出来。后面我们就可以直接引用这个变量和这个方法了。而state的状态只能通过mutations改变，请一定要注意。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

const state = {
    isCollapse: false,
}

const mutations={
    change(state){
        state.isCollapse = !state.isCollapse;
    }
}

export default new Vuex.Store({
    state,
    mutations,
});

// aside.vue

<template>
    <div>
<!-- 菜单栏宽度设为自动 -->
<el-aside width="auto">
    
    <el-menu
        default-active="2"
        class="el-menu-vertical" 
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        :collapse="$store.state.isCollapse"> // 属性的绑定
        <el-submenu index="1">
            
            <template slot="title">
                <i class="el-icon-location"></i>
                <span>导航一</span>
            </template>
            <el-menu-item-group>
                <template slot="title">分组一</template>
                <el-menu-item index="1-1">选项1</el-menu-item>
                <el-menu-item index="1-2">选项2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组2">
                <el-menu-item index="1-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="1-4">
                <template slot="title">选项4</template>
                <el-menu-item index="1-4-1">选项1</el-menu-item>
            </el-submenu>
        </el-submenu>
        <el-menu-item index="2">
            <i class="el-icon-menu"></i>
            <span slot="title">导航二</span>
        </el-menu-item>
        <el-menu-item index="3" disabled>
            <i class="el-icon-document"></i>
            <span slot="title">导航三</span>
        </el-menu-item>
        <el-menu-item index="4">
            <i class="el-icon-setting"></i>
            <span slot="title">导航四</span>
        </el-menu-item>
    </el-menu>
</el-aside>
    </div>
</template>

<script>
import store from '@/store/store' // 引入store

  export default {
    data(){
      return{
      };
    },
    store, // 这里使用了store
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>

<style>
.el-menu{
  border-right: none;
}

/** 设置展开式菜单宽度 */
.el-menu-vertical:not(.el-menu--collapse){
  width: 230px;
}
</style>

 

// header.vue

<template>
    <div>
        <el-header height="50px">
            <a class="logo" href="/" style="float: left">后台管理系统</a>
            <div class="toggle" @click="$store.commit('change')"> // 使用mutatijons方法
                <i class="el-icon-s-unfold" v-if="$store.state.isCollapse"></i> // 绑定属性
                <i class="el-icon-s-fold" v-if="!$store.state.isCollapse"></i> // 绑定属性
            </div>
            <el-dropdown>
                <span class="el-dropdown-link">
                    <i class="el-icon-user el-icon--left"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item icon="el-icon-user"> 用户中心</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-setting"> 修改密码</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-switch-button"> 退出登录</el-dropdown-item>
                </el-dropdown-menu>
                <span class="el-dropdown-link">
                    <i class="el-icon-switch-button"></i>
                </span>
            </el-dropdown>
        </el-header>
    </div>
</template>

<script>
import store from '@/store/store' // 引入vuex
export default {
    name: 'Header',
    
    data(){
        return{
            activeIndex: '1',
        };
    },
    store, // 使用store
    methods: {
    handleSelect(key, keyPath) {
    console.log(key, keyPath);
    }
}
}
</script>
<style>
.el-header{
    background-color: #0074D9;
    z-index: 999;
}
/* logo */
.logo{
    color: #fff;
    text-align: center;
    font-size: 26px;
    line-height: 50px;
    padding: 0 15px;
    font-weight: 400;
    text-decoration: none;
}
/* 折叠按钮 */
.toggle{
    color: #fff;
    text-align: center;
    font-size: 26px;
    line-height: 50px;
    display: inline-block;
    padding: 0 15px;
    border-left: solid 1px #ccc;
    position: absolute;
    left:230px;
    cursor: pointer;
}
.toggle:hover{
    background-color: #ffd04b;
}
/* 下拉菜单 */
.el-dropdown{
    color: #fff;
    text-align: center;
    font-size: 26px;
    line-height: 50px;
    float: right;
}
.el-dropdown-link{
    cursor: pointer
}
</style>

注意看注释，上面就是Vuex的使用。我们通过点击事件@click触发mutations的change方法。改变了state里面的isCollopse。然后根据这个isCollopse我们的侧边栏就可以自由切换叠起和展开状态。

 

以上是routes分文件管理，模板引入，以及Vuex使用的初步体验。后序代码都是基于以上操作进行。只要运用合理。很多动态的页面都可以实现。


http://www.niftyadmin.cn/n/1844614.html

相关文章

linux基础命令介绍十二：磁盘与文件系统

linux基础命令介绍十二：磁盘与文件系统

本篇讲述磁盘管理相关的命令。计算机中需要持久化存储的数据一般是保存在硬盘等辅助存储器中。硬盘一般容量较大&#xff0c;为了便于管理和使用&#xff0c;可以将硬盘分成一到多个逻辑磁盘&#xff0c;称为分区&#xff1b;为使分区中的文件组织成操作系统能够处理的形式&…
阅读更多...
脚本作业

脚本作业

1.编辑一个"1小时1分钟10秒"的倒计时脚本2.编辑一个脚本&#xff0c;检测教室里面哪台主机开机了&#xff0c;如果开机的话就给它建立一个统一的用户名和密码&#xff0c;如果这台主机已经有此用户&#xff0c;就跳过继续检测下一台主机。测试效果如下&#xff1a;转…
阅读更多...
D01_01Linux简单操作与JDK安装

D01_01Linux简单操作与JDK安装

系统相关配置1、常用命令&#xff1a;reboot 重启su 用户名 切换用户shutdown now 关机startx 从命令模式进入到桌面ifconfig 查看ip地址pwd 当前目录2、修改启动级别init 3centos7使用命令systemctl set-default multi-user.target以前版本 vi /etc/inittab使用工具CRTcent…
阅读更多...
Php基础知识测试题

Php基础知识测试题

一&#xff1a;选择题 1&#xff0e; LAMP具体结构不包含下面哪种&#xff08;A &#xff09; A&#xff1a;Windows系统 如果是这个就是WMP B&#xff1a;Apache服务器 C&#xff1a;MySQL数据库 D&#xff1a;PHP语言 2&#xff0e; 以下哪个SQL语句是正…
阅读更多...
7-5 大勾股定理 520砖石争霸赛2021

7-5 大勾股定理 520砖石争霸赛2021

7-5 大勾股定理题目详情思路一&#xff1a;暴力法思路二&#xff1a;通项公式题目详情 7-5 大勾股定理 (15 分) 大勾股定理是勾股定理的推广&#xff1a;对任何正整数 n 存在 2n1 个连续正整数&#xff0c;满足前 n1 个数的平方和等于后 n 个数的平方和。例如对于 n1 有 32​…
阅读更多...
spring4.3 web-MVC搭建

spring4.3 web-MVC搭建

一、基本配置 配置 DispatcherServletpackage com.hj.myapp.config;import org.springframework.web.servlet.support.AbstractAnnotationConfigDispatcherServletInitializer;public class MyAppInitializer extends AbstractAnnotationConfigDispatcherServletInitializer {O…
阅读更多...
Spring-----projects-----Spring IO Platform（也即spring的BOM：Bill Of Materials）

Spring-----projects-----Spring IO Platform（也即spring的BOM：Bill Of Materials）

Spring IO Platform概述&#xff1a; Spring IO Platform是spring若干子项目中的一个Spring IO Platform的主要功能是&#xff1a; 这个项目对开发者所构建的project可能依赖的所有三方工程进行版本控制。实际的一个external dependency 有可能有多个可用版本&#xff0c;如rea…
阅读更多...
7-4 日期之差 (25 分)

7-4 日期之差 (25 分)

7-4 日期之差 7-4 日期之差 (25 分)解题思路&#xff1a;1.读入数据2.数据检验3.计算天数完整代码总结&#xff1a;7-4 日期之差 (25 分) 给定两个日期&#xff0c;请你计算这两个日期之间有少天&#xff08;定义连续的日期之差为2天&#xff09; 输入格式: 共两行&#xff0c…
阅读更多...
最新文章

Copyright @ 2022~2023