//index.vue(主页模块，套了一点elementUI，有点东西好看点= =..) <template> <div> <h3>我是主页模块</h3> <el-menu theme="dark" default-active="1" mode="horizontal" @select="handleSelect"> <el-menu-item index="1">处理中心</el-menu-item> <el-submenu index="2"> <template slot="title">我的工作台</template> <el-menu-item index="2-1">选项1</el-menu-item> <el-menu-item index="2-2">选项2</el-menu-item> <el-menu-item index="2-3">选项3</el-menu-item> </el-submenu> <el-menu-item index="3">订单管理</el-menu-item> </el-menu> </div> </template> <script> export default { methods:{ handleSelect:function(key,keyPath){ console.log(key,keyPath); } } } </script>
//info.vue(主页模块，套了一点elementUI，有点东西好看点= =..) <template> <h3>{{msg}}</h3> <div> <el-alert title="成功提示的文案" type="success"> </el-alert> <el-alert title="消息提示的文案" type="info"> </el-alert> <el-alert title="警告提示的文案" type="warning"> </el-alert> <el-alert title="错误提示的文案" type="error"> </el-alert> </div> </template> <script> export default { data(){ return { msg:'我是信息模块' } } } </script>
//discovery.vue(发现模块) <template> <div> <h2>{{msg}}</h2> <el-steps :space="100" :active="active" finish-status="success"> <el-step title="步骤 1"></el-step> <el-step title="步骤 2"></el-step> <el-step title="步骤 3"></el-step> </el-steps> <el-button @click="next">下一步</el-button> </div> </template> <script> export default { data(){ return { active:0, msg:'我是发现模块' } }, methods:{ next:function(){ if(this.active++ > 2) this.active = 0 } } } </script>
//setting.vue(设置模块) <template> <div> <h3>{{msg}}</h3> <el-rate v-model="value2" :colors="['#99A9BF', '#F7BA2A', '#FF9900']" :allow-half="true"> </el-rate> <span>{{value2}}</span> </div> </template> <script> export default { data() { return { value2: null, msg:'我是设置模块' } } } </script>
//main.js(主文件，声明全局router) import Vue from 'vue' import Router from 'vue-router' import ElementUI from 'element-ui' import 'element-ui/lib/theme-default/index.css' import App from './App.vue' import index from './index.vue' import info from './info.vue' import discovery from './discovery.vue' import setting from './setting.vue' Vue.use(Router); Vue.use(ElementUI); const router = new Router({ routes:[ { path:'https://www.jb51.net/', component:index }, { path:'/index', component:index }, { path:'/info', component:info }, { path:'/discovery', component:discovery }, { path:'/setting', component:setting } ] }); new Vue({ el: '#app', render: h => h(App), router:router });