# 项目模板
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.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") | |
} |