Element-ui

阅读量：3965 次

发布时间：2019-05-24

本文共 4526 字，大约阅读时间需要 15 分钟。

1.简介

element-ui 是饿了么前端出品的基于 Vue.js的后台组件库，方便程序员进行页面快速布局和构建

官网：

2.举例

1.创建一个新的Vue-cli工程

注意：命令行都要使用管理员模式运行

vue init webpack hello-vue

在这里插入图片描述

2.安装依赖，我们需要安装vue-router、element-ui、sass-loader和node-sass四个插件

# 进入工程目录cd hello-vue# 安装 vue-routernpm install vue-router --save-dev# 安装 element-uinpm i element-ui -S#安装依赖npm install# 安装SASS加载器cnpm install sass-loader node-sass --save-dev# 启动测试npm run dev

在这里插入图片描述自定义布局：

Main.vue

index.js

import Vue from 'vue'import Router from 'vue-router'import Main from '../views/Main'import Login from '../views/Login'Vue.use(Router)export default new Router({
     mode: 'history',  routes:[    {
         path:'/main',      name:'main',      component:Main    },    {
         path:'/login',      name:'login',      component: Login    }  ]});

main.js

import Vue from 'vue'import App from './App'import router from './router'import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);new Vue({
     el: '#app',  router,  components: {
    App },  template: '
   ',  render: h => h(App)})

App.vue

结果：

3.路由嵌套

在这里插入图片描述

遇见错误：

Profile.vue

List.vue

Main.vue组件自己到element-ui里找

主要

index.js

import Vue from 'vue'import Router from 'vue-router'import Main from '../views/Main'import Login from '../views/Login'import UserProfile from '../views/users/Profile'import UserList from '../views/users/List'Vue.use(Router)export default new Router({
     mode: 'history',  routes:[    {
         path:'/main',      component:Main,      //嵌套路由      children:[        {
   path:'/user/profile',component:UserProfile},        {
   path:'/user/list',component:UserList}      ]    },    {
         path:'/login',      component: Login    }  ]});

在这里插入图片描述

4.参数传递及重定向

参数传递

方法一：

Main.vue

index.js

routes:[    {
         path:'/main',      component:Main,      //嵌套路由      children:[        {
   path:'/user/profile/:id',name:'UserProfile',component:UserProfile},        {
   path:'/user/list',component:UserList}      ]    },

Profile.vue

在这里插入图片描述

方法二：

index.js

routes:[    {
         path:'/main',      component:Main,      //嵌套路由      children:[        {
   path:'/user/profile/:id',name:'UserProfile',component:UserProfile,props:true},        {
   path:'/user/list',component:UserList}      ]

Profile.vue

重定向

index.js

export default new Router({
     mode: 'history',  routes:[    {
         path:'/main',      component:Main,      //嵌套路由      children:[        {
   path:'/user/profile/:id',name:'UserProfile',component:UserProfile,props:true},        {
   path:'/user/list',component:UserList}      ]    },    {
         path:'/login',      component: Login    },{
       //重定向到登录页面    path: '/logOut',      redirect:'/login'    }  ]

Main.vue


                 
    
     回到登录页

在这里插入图片描述

登录时传递用户名

Login.vue

index.js

export default new Router({
     mode: 'history',  routes:[    {
         //接收参数      path:'/main/:name',      component:Main,      props:true,      //嵌套路由      children:[        {
   path:'/user/profile/:id',name:'UserProfile',component:UserProfile,props:true},        {
   path:'/user/list',component:UserList}      ]    },

Main.vue


           
    {
   {
   name}}首页

在这里插入图片描述

5.404

1.在文件夹views下新建一个NotFound.vue

2.index.js

import NotFound from '../views/NotFound'  {
         path: '*',      component: NotFound    }

在这里插入图片描述

6.路由钩子与异步请求Axios

beforeRouteEnter: 在进入路由前执行

beforeRouteLeave: 在离开路由前执行

Profile.vue代码：

在这里插入图片描述

在钩子函数中使用异步请求

1.安装Axios

npm install --save axios vue-axios或cnpm install axios -s

在这里插入图片描述

import axios from 'axios'import VueAxios from 'vue-axios'Vue.use(VueAxios, axios)

在这里插入图片描述

data.json

{
     "name": "张三",  "url": "https://www.baidu.com",  "page": 1,  "address": {
       "street": "洪崖洞",    "city": "重庆市",    "country": "中国"  },  "hobby": ["sing","dance","draw"]}

在这里插入图片描述