Vue+Element实战项目笔记（二）（持续更新中）

张张碎碎念
211 阅读3分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，点击查看活动详情

在项目笔记之前的这一部分是狂神讲解的MVVM，狂神Vue视频链接，讲解的非常细致，在此感谢！

MVVM 模式的实现者(分离视图和模型)

  • Model:模型层，在这里表示JavaScript对象
  • View：视图层，在这里表示DOM（HTML操作的元素）
  • ViewModel: 连接视图和数据的中间件，Vue.js就是MVVM中的ViewModel层的实现者

在MVVM架构中，是不允许 数据 和 视图 直接通信的，只能通过ViewModel来通信，而ViewModel就是定义了Observer 观察者

  • ViewModel能观察到数据的变化，并对视图对应的内容进行更新
  • ViewModel能够监听到视图的变化，并能够通知数据发生改变

Vue.js就是一个MVVM的实现者，他的核心就是实现了DOM监听和数据绑定

  • 低耦合：视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
  • 可复用：你可以把一些视图逻辑放在一个ViewModel里面，让很多View重用这段视图逻辑。
  • 独立开发：开发人员可以专注于业务逻辑和数据的开发（ViewMode），设计人员可以专注于页面设计。
  • 可测试：界面素来是比较难以测试的，而现在测试可以针对ViewModel来写。

vue项目实战（是【vue项目实战教程】这位博主的，非常感谢），简单的记录一下学习的过程。上一篇里Vue路由的使用没有记完，这一篇继续！ 同样的方法在view里创建一个hUser.vue

<template>
    <div>我是User</div>
</template>
<script>
export default{
    name:'hUser',
    data(){
        return {}
    }
}
</script>

将里的内容更改如下

<template>
  <div class="hello">
    <router-link to="/"><el-button>按钮</el-button></router-link>
    <router-link to="/user">
      <el-button type="primary">主要按钮</el-button>
    </router-link>
    <el-radio v-model="radio" label="1">备选项</el-radio>
  </div>
</template>

在router文件夹的index.js里添加以下内容

{
        path:'/user',
        name:'User',
        component:()=>import('../views/hUser.vue')
    }

保存看页面效果

六、首页架子的搭建

Container布局容器 用于布局的容器组件，方便快速搭建页面的基本结构：

<el-container>：外层容器。当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列。

<el-header>：顶栏容器。

<el-aside>：侧边栏容器。

<el-main>：主要区域容器。

<el-footer>：底栏容器。

1.使用less

这里样式我们使用Less,Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端。

安装less:命令npm i less

安装less解析器：

这里博主用的命令是npm i less-loader@5.0.0,不知道我在根文件夹和本文件夹下都安装失败，最后使用npm install less-loader安装的最新版本

2.引用container中部分代码

搭主页架子，此时hHome.vue代码如下：

<template>
  <!-- element 中container部分代码 -->
  <el-container style="height: 100%">
    <el-aside width="auto">Aside</el-aside>
    <el-container>
      <el-header>Header</el-header>
      <el-main>Main</el-main>
    </el-container>
  </el-container>
</template>
<script>
export default {
  name: "hHome",
  data() {
    return {};
  },
};
</script>
<style lang="less" scoped>
.el-header {
  background-color: #333;
}
.el-main {
  padding-top: 0;
}
</style>

//将多余部分删除
<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>


export default {
  name: 'App',
  components: {

  }
}
</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>

保存刷新页面

七、侧边栏的实现

NavMenu 导航菜单

从上一张图可以看到这部分我们要实现aside，因为这个侧边栏是所有页面公用的，所以我们在components文件夹里创建CommenAside.vue

  • collapse ：控制是否展开
<template>
  <el-menu
    default-active="1-4-1"
    class="el-menu-vertical-demo"
    @open="handleOpen"
    @close="handleClose"
    :collapse="isCollapse"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
  >
  <h3>通用后台管理系统</h3>
    <el-menu-item @click="clickMenu(item)" v-for="item in noChildren" :index="item.path" :key="item.path">
      <i :class="'el-icon-' + item.icon" ></i>
      <span slot="title">{{item.label}}</span>
    </el-menu-item>
    <el-submenu v-for="item in hasChildren" :index="item.path" :key="item.path">
      <template slot="title">
        <i :class="'el-icon-' + item.icon"></i>
        <span slot="title">{{item.label}}</span>
      </template>
      <el-menu-item-group v-for="(subItem,subIndex) in item.children" :key="subItem.path">
        <el-menu-item :index="subIndex">{{subItem.label}}</el-menu-item>
      </el-menu-item-group>
    </el-submenu>
  </el-menu>
</template>

<style lang="less" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.el-menu{
    height: 100%;
    border: none;
    h3{
        color: #fff;
        text-align:center;
        line-height:48px;
    }
}

</style>

<script>
export default {
  data() {
    return {
      isCollapse: false,
      menu: [
        {
          path: "/",
          name: "home",
          label: "首页",
          icon: "s-home",
          url: "Home/Home",
        },
        {
          path: "/mall",
          name: "mall",
          label: "商品管理",
          icon: "video-play",
          url: "MallManage/MallManage",
        },
        {
          path: "/user",
          name: "user",
          label: "用户管理",
          icon: "user",
          url: "UserManage/UserManage",
        },
        {
          label: "其他",
          icon: "location",
          children: [
            {
              path: "/page1",
              name: "page1",
              label: "页面1",
              icon: "setting",
              url: "Other/PageOne",
            },
            {
              path: "/page2",
              name: "page2",
              label: "页面2",
              icon: "setting",
              url: "Other/PageTwo",
            },
          ],
        },
      ],
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    clickMenu(item){
        this.$router.push({
          name:item.name
        })

    }
  },
  computed:{
    noChildren(){
      return  this.menu.filter(item => !item.children)
    },
    hasChildren(){
        return this.menu.filter(item => item.children)
    },
  }
};
</script>

在hHome.vue中引入侧边栏

<template>
  <!-- element 中container部分代码 -->
  <el-container style="height: 100%">
    <el-aside width="auto">
        <commen-aside></commen-aside>
    </el-aside>
    <el-container>
      <el-header>Header</el-header>
      <el-main>Main</el-main>
    </el-container>
  </el-container>
</template>
<script>
import CommenAside from '@/components/CommenAside.vue';

export default {
  components: { CommenAside },
  name: "hHome",

  data() {
    return {};
  },
};
</script>
<style lang="less" scoped>
.el-header {
  background-color: #333;
}
.el-main {
  padding-top: 0;
}
</style>

让header上方没有空白

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
};
</script>

<style>
html,
body {
  margin: 0;
  padding: 0;
}
#app {
  height: 100vh;
}
</style>

image.png

avatar
文章
阅读
粉丝