赞
踩
npm install less
npm install less-loader@5.0.0
**
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
]
const router = new VueRouter({
routes
})
export default router
<template>
<div id="app">
app根组件
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
<style>
</style>
// 在当前项目element.js中已将所有element-ui组件全部引入了,直接使用即可
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(Element)
<!-- 默认展开的子节点 --> <el-menu :default-openeds="['1', '3']"> <!-- 默认选中的子节点 --> <el-menu :default-active="['1-1']"> <!-- 图标 --> <i class="el-icon-coin"></i> <!-- 一级菜单--> index="4" <!-- 二级菜单 --> index="5-1" <!-- 三级菜单 --> <el-menu-item index="4-1-2"> <!-- 默认选中颜色 --> <el-menu active-text-color="#409EFF" <!-- 默认只展开一个子节点 --> <el-menu unique-opened>
路由使用步骤:1.构建项目时已经打开了router功能;2.新建子组件;3.router/index.js中配置路由规则;4.路由出口;5.main.js中router作为vue实例的属性
编写欢迎页面
侧边栏开启路由
<!-- 1. App.vue中开启侧边栏路由 -->
<el-menu router>
<!-- 2. 子节点中设置path -->
<el-menu-item :index="'/userList'">
<!-- 3. 新建子组件,如userList.vue等,并在router中配置路由规则 -->
<script> export default { data() { return { books: [] } }, created(){ // 将vue对象赋值给_this const _this = this; _this.$http.get("book/findAll/3/4").then(function(response){ // then方法中的this表示response console.log(response.data.content) _this.books = response.data.content; }); } } </script>
// 1. 构建项目时已经打开了vuex功能 // store/index.js import Vuex from 'vuex' // 2. 引入 Vue.use(Vuex) // 3. 注册为vue实例的组件 export default new Vuex.Store({ state: { count: 0 // 4. store中皴法共享数据 }, mutations: { }, actions: { }, modules: { } }) // 入口文件main.js import store from './store' new Vue({ store, // 5. 将store挂载到vue实例 render: h => h(App) }).$mount('#app') // 在bookList.vue中使用 <span>vuex使用:{{ $store.state.count }}</span>
(文章转载自乐字节)
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。