Vue: Element-UI登录页面与vue-router使用

Element-UI，一套基于 Vue 2.0 的桌面端组件库官网连接
Vue Router模块化编程机制实现vue框架应用的页面跳转

1.搭建环境(前提准备好vue所需环境)

• 初始化webpack vue项目

vue init webpack hello-vue-element

• 为当前项目安装路由支持

npm install vue-router --save-dev

• 安装elementUI依赖

npm i element-ui -S

• 安装elementUI所需的SASS加载器(CSS工具)

cnpm install sass-loader node-sass --save-dev

2.idea 启动项目 搭建项目结构src目录下

• 新增view包：用于存放各种视图组件

• 新增router包：index.js用于生成管理路由对象

  
  
  项目目录

3.编写登录页面组件login-ele.vue官网代码连接

4.配置路由

• index.js配置组件路由路径信息

import Vue from 'vue'
import VueRouter from 'vue-router'

import login from "../view/login-ele"
import mainEle from "../view/main-ele"


// 安装路由 页面跳转组件
Vue.use(VueRouter);

// 导出路由 对象
export default new VueRouter({
  routes: [
    { // 配置登录页路由
      path: '/login',
      component: login
    },
    {
      path: '/mainEle',
      component: mainEle
    }
  ],
});

• main.js程序主入口导入路由，并挂载

import Vue from 'vue'
import App from './App'

// 导入路由配置文件 自动扫描 index.js 作为路由配置文件
import router from './router'

// 导入element ui
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.config.productionTip = false

/* eslint-disable no-new */
// 显示声明 使用 ui
Vue.use(ElementUI);

new Vue({
  el: '#app',
  //配置路由
  router: router,
  components: { App },
  template: ''
})

5.首页展示(App.vue)

6.测试效果

效果展示