App.vue作为Vue项目的主窗口<router-view></router-view>让路由生效
main.js负责加载插件组件等
views:放页面
components:放组件
router:路由配置:相当于springmvc的视图解析器将url和组件进行关联
Element UI 后台管理系统主要标签 | 说明 |
---|---|
el-container | 构建整个框架 |
el-aside | 构建左侧菜单(容器) |
el-menu | 左侧菜单内容,常用属性 :default-openeds: 默认展开的菜单,通过菜单的index的值来关联 :default-active :默认选中的菜单 |
el-submenu | 可展开的菜单,常用属性 index:菜单的下表,文本类型,不能数值类型 |
template | 对应el-submenu的菜单名 i :设置菜单图标,通过class属性来控制 el-icon-message el-icon-setting el-icon-menu |
el-menu-item | 菜单得子菜单,不可再展开,常用属性 index :菜单的下表,文本类型,不能数值类型 |
安装axios、element-ui插件
#安装axios插件 负责调用后台url接口
vue add axios
#安装element-ui插件,符合element-ui框架风格
cnpm install
cnpm install --save element-ui
插件安装完城后需要,
在 main.js 中写入以下内容:
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';Vue.use(ElementUI);new Vue({el: '#app',render: h => h(App)
});