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>
(文章转载自乐字节)