前端学习（2391）：创建组件并且配置路由

app.vue

<template> <div id="app"> <router-view/> </div> </template> <script> export default { name: 'App' } </script> <style lang="less"> </style>

index.vue

<template> <div class="login-container"> 登录界面 </div> </template> <script> export default { name: 'LoginIndex', components: { }, props: {}, data () { } } </script> <style scoped lang="less"> </style>

main.js

import Vue from 'vue' import App from './App.vue' import router from './router' import './styles/index.less' // 加载组件库 import ElementUI from 'element-ui' // 加载样式 import 'element-ui/lib/theme-chalk/index.css' Vue.config.productionTip = false // 注册组件库 Vue.use(ElementUI) new Vue({ router, render: h => h(App) }).$mount('#app')

index.js

import Vue from 'vue' import VueRouter from 'vue-router' import Login from '@/views/login/index' Vue.use(VueRouter) // 路由配置表 const routes = [{ path: '/login', name: 'login', component: Login }] const router = new VueRouter({ routes }) export default router

运行结果