# 项目模板
git clone https://github.com/ElementUI/element-starter.git
  • yarn 安装依赖
  • npm run dev 打开服务
# 使用教程

直接在 app.vue 中编写

原理应该是相当于,在 html 中 new 一个 vue 对象,给定一个 id, 然后针对这个 id 绑定不同的脚本

vue 中分为几个部分

    <template> 部分用于添加模板之类的(需要在声明了id的里面创建)
    <script> 中添加js,这里export defaul 用于导出方法,使得<template>中可以调用。
    <style> 控制布局
# vue 对象
new Vue({
  el: "#test",
  render: h => h(test)
})

需要针对每一个 vue 实例添加绑定的对象

  • el 指代的是绑定的对象 这里 #test 表示 id 为 test
  • render 表示指向的位置,这里指代的是导入的 test.vue 的对象,同时这里的 h 其实是 createElement 的缩写
# style 语法介绍

与 css 类似

<style>
    #app {
      font-family: Helvetica, sans-serif;
      text-align: center;
    }
</style>
# 菜单构建 NavMenu

新起一个文件夹,命名为 config, 在里面加入配置文件

module.exports = [{
  clazz: 'el-icon-edit',
  name: '基础',
  id: 'basic',
  sub: [{
    name: '管理系统',
    componentName: 'BaseLayout'
  }, {
    name: 'Main 布局容器',
    componentName: 'BaseMain'
  }]
}, {
  clazz: 'el-icon-delete',
  name: 'Form',
  id: 'form',
  sub: [{
    name: 'Radio 单选框',
    componentName: 'BaseRadio'
  }, {
    name: 'Checkbox 多选框',
    componentName: 'BaseCheckbox'
  }]
}]

这样就可以分离出菜单,然后在此处进行配置,接着在 NavMenu.vue 中导入

# 这里采取for循环遍历menu,menu需要在script中导入
<el-submenu v-for="item in menu" :index="item.id" :key="item.id">
      <template slot="title">
        <i class="" :class="item.clazz"></i>
        <span v-text="item.name"></span>
      </template>
      <el-menu-item-group class="over-hide" v-for="sub in item.sub" :key="sub.componentName">
        <el-menu-item :index="sub.componentName" v-text="sub.name">
        </el-menu-item>
      </el-menu-item-group>
    </el-submenu>
# 顶部标题构建 TopHeader

采取 el-row 分块,然后选用 vuex 保存全局对象,内置 changecollapse 方法,对 vuex 中的内容进行修改,从而使得菜单栏展开

# vue

vue 中的 el-container 默认的是横向布局,若是包含 el-header 或者 el-footer, 就会变为纵向布局 (若设置初始大小,就会自适应)

# 基础语法

v-model: 用于双向绑定
:表达式,v-bind 的缩写,动态绑定

# data

data 位于 vue 中的 scrpit 部分,主要用于返回数据

export default {
    data() {
        ruturn
        {
            msg: 123
        }
    }
}

其中 data 用于存储数据

# router

用于切换路由

import Vue from 'vue'
import Router from 'vue-router'
import menus from '@/config/menu-config'
Vue.use(Router)
var routes = []
menus.forEach((item) => {
  item.sub.forEach((sub) => {
    routes.push({
      path: `/${sub.componentName}`,
      name: sub.componentName,
      component: () => import(`@/components/${sub.componentName}`)
    })
  })
})
export default new Router({ routes })
// 这样就对路由进行了配置,如果 path 对应的是子菜单的 componentName, 那么就跳转到对应的组件

在 vue 中需要 <router-view></router-view > 引入组件

  • path: 对应路径
  • name: 名字 (可以不要)
  • component: 组件所处的位置

可以通过 this.router.push(name:baselayout)通过name跳转到对应的路由,router是全局路由route是当前路由this.router.push({name:'baselayout'}) 通过name跳转到对应的路由, router是全局路由 route是当前路由 this.route.name
addRoute 通过改方法添加路由

# vuex

vuex 的版本要和 vue 对应

在 main.js 中导入 vuex,
创建 store 文件夹,编写 Js

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    title: 'hello world',
    userInfo: {
      name: 'rayfoo',
      age: 24,
      car: ['Porsche', 'BMW']
    }
  },
  mutations: {
    SET_TITLE (state, _title) {
      state.title = _title
    }
  },
  actions: {},
  modules: {}
})
// 调用方式
$store.state.isCollapse

这样就可以直接通过访问 state 中的内容获取全局数据.

# state
  • 与 vue 中的 data () 类似,就是个存数据的地方
  • 内部的数据无法像 vue 中直接修改,需要在 mutations 修改
# mutations

mutation 作为修改数据的方法集合,写法类似 vue 中的 methods

mutations: {
    SET_TITLE(state, _title)
  {
      state.title = _title
    }
  }
// 这里定义了一个 set_title 方法,第一个参数为 state 必带,

在 vue 中调用 SET_TITLE 需要遵循如下写法:

// 使用 commit 提交,然后第一个参数跟上方法名
changetitle()
{
    this.$store.commit('SET_TITLE',"hello Vuex")
}
Edited on

Give me a cup of [coffee]~( ̄▽ ̄)~*

Mr2 WeChat Pay

WeChat Pay