vue+elementUI

最新推荐文章于 2024-07-01 18:30:27 发布

starriesWEB

最新推荐文章于 2024-07-01 18:30:27 发布

阅读量210

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_45722508/article/details/115860561

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

创建项目

vue init webpack vue-elementui
# 进入项目目录
cd vue-elementui
# 安装 vue-router
npm install vue-router --save-dev
# 安装 element-ui
npm i element-ui -s
# 安装依赖
npm install
# 安装 SASS 加载器
cnpm install sass-loader node-sass --save-dev
# 启动测试
npm run dev

npm命令解释

npm install moduleName 安装模块到项目目录下
npm install moduleName -g 安装模块到全局目录
npm install moduleName --save 安装模块到项目目录下,并在 package 文件的 dependencies 节点写入依赖,-S 为简写
npm install moduleName --save-dev 安装模块到项目目录下,并在 package 文件的 devDependencies 节点写入依赖,-D 为简写

编写代码

新建包views里面存放vue的视图组件,并创建vue组件

Main.vue

<template>
    <h1>首页</h1>
</template>

<script>
    export default {
        name: "Main"
    }
</script>

<style scoped>

</style>

<template>
  <div>
    <!--el-form一个表单，两个输入框-->
    <el-form ref="loginForm" :model="form" :rules="rules"  label-width="80px" class="login-box">
      <h3 class="login-title">欢迎登陆</h3>
      <el-form-item label="账号" prop="username">
        <el-input type="text" placeholder="请输入账号" v-model="form.username"/>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" placeholder="请输入密码" v-model="form.password"/>
      </el-form-item>
      <el-form-item>
        <!--登陆按钮绑定了一个onSubmit事件-->
        <el-button type="primary" v-on:click="onSubmit('loginForm')">登陆</el-button>
      </el-form-item>
    </el-form>
    <!--提示窗-->
    <el-dialog
      title="温馨提示"
      :visible.sync="dialogVisible"
      width="30%">
      <!--:before-close="handleClose"-->
      <span>请输入账号和密码</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    name:"Login",
    data(){
      return{
        form:{
          username:'',
          password:''
        },
        rules:{
          username: [
            {required:true,message:'账号不可为空',trigger:'blur'}
          ],
          password: [
            {required:true,message:'密码不可为空',trigger:'blur'}
          ]
        },
        dialogVisible:false

      }
    },
    methods:{
      onSubmit(formName){
        /*为表单绑定验证功能*/
        this.$refs[formName].validate((valid)=>{
          if(valid){
            /*如果引用成功了，会去router中push到main，这种方式称为编程式导航*/
            this.$router.push("/main");

          }else {
            this.dialogVisible=true;
            return false;

          }
        });
      }
    }
  }
</script>

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({
  routes: [
    {
      path: '/main',
      component: Main
    },{
      path: '/login',
      component: Login
    }
  ]
})

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
// 导入饿了么依赖和css
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false;

Vue.use(router);
Vue.use(ElementUI);

new Vue({
  el: '#app',
  router,
  // 使用elementUI
  render: h => h(App)
});

App.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

路由嵌套

在views下新建包user

List.vue

<template>
    <h1>用户列表</h1>
</template>

<script>
    export default {
        name: "List"
    }
</script>

<style scoped>

</style>

Profile.vue

<template>
    <h1>个人信息</h1>
</template>

<script>
    export default {
        name: "UserProfile"
    }
</script>

<style scoped>

</style>

修改main.vue

<template>
  <el-container style="height: 500px; border: 1px solid #eee">
    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
      <el-menu :default-openeds="['1', '3']">
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-message"></i>用户管理
          </template>
          <el-menu-item-group>
            <el-menu-item index="1-1">
              <router-link to="/user/profile">个人信息</router-link>
            </el-menu-item>
            <el-menu-item index="1-2">
              <router-link to="/user/list">用户列表</router-link>
            </el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-menu"></i>内容管理
          </template>
          <el-menu-item-group>
            <el-menu-item index="2-1">分类管理</el-menu-item>
            <el-menu-item index="2-2">内容列表</el-menu-item>
          </el-menu-item-group>
        </el-submenu>

      </el-menu>
    </el-aside>

    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <el-dropdown>
          <i class="el-icon-setting" style="margin-right: 15px"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>个人信息</el-dropdown-item>
            <el-dropdown-item>退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-header>

      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<style>
  .el-header {
    background-color: #b3c0d1;
    color: #333;
    line-height: 60px;
  }

  .el-aside {
    color: #333;
  }
</style>

<script>
export default {
    name: "Main"
  };
</script>

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/user/Profile'
import UserList from '../views/user/List'

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/main',
      component: Main,
      // 子路由
      children: [
        {path: '/user/profile', component: UserProfile},
        {path: '/user/list', component: UserList}
      ]
    },{
      path: '/login',
      component: Login
    }
  ]
})

路由传递参数

实现一 `$route`

修改main.vue

<template>
  <el-container style="height: 500px; border: 1px solid #eee">
    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
      <el-menu :default-openeds="['1', '3']">
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-message"></i>用户管理
          </template>
          <el-menu-item-group>
            <el-menu-item index="1-1">
              <!--路由参数传递 需要对象{} 使用v-bind绑定 简写:
              name: 组件名
              params: 参数列表
              -->
              <router-link :to="{name: 'UserProfile',params: {id: 1}}">个人信息</router-link>
            </el-menu-item>
            <el-menu-item index="1-2">
              <router-link to="/user/list">用户列表</router-link>
            </el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-menu"></i>内容管理
          </template>
          <el-menu-item-group>
            <el-menu-item index="2-1">分类管理</el-menu-item>
            <el-menu-item index="2-2">内容列表</el-menu-item>
          </el-menu-item-group>
        </el-submenu>

      </el-menu>
    </el-aside>

    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <el-dropdown>
          <i class="el-icon-setting" style="margin-right: 15px"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>个人信息</el-dropdown-item>
            <el-dropdown-item>退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-header>

      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<style>
  .el-header {
    background-color: #b3c0d1;
    color: #333;
    line-height: 60px;
  }

  .el-aside {
    color: #333;
  }
</style>

<script>
  export default {
    name: "Main"
  };
</script>

修改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/user/Profile'
import UserList from '../views/user/List'

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/main',
      component: Main,
      // 子路由
      children: [
        {
          // :id传递的参数 和router-link传递的params中的参数对应
          path: '/user/profile/:id',
          name: 'UserProfile',
          component: UserProfile},
        {
          path: '/user/list',
          name: 'UserList',
          component: UserList}
      ]
    },{
      path: '/login',
      component: Login
    }
  ]
})

在Profile.vue中添加代码,显示参数

<template>
  <div>
    <h1>个人信息</h1>
    <!--不能直接写在根节点下,要在标签中显示-->
    {{ $route.params.id }}
  </div>
</template>

<script>
    export default {
        name: "UserProfile"
    }
</script>

<style scoped>

</style>

实现二 `prors`

在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。

使用 props 将组件和路由解耦：

Main.vue

<router-link :to="{name: 'UserProfile',params: {id: 1}}">个人信息</router-link>

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/user/Profile'
import UserList from '../views/user/List'

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/main',
      component: Main,
      // 子路由
      children: [
        {
          // :id传递的参数 和router-link传递的params中的参数对应
          path: '/user/profile/:id',
          name: 'UserProfile',
          component: UserProfile,
          // 添加props为true,并在组件中为props的属性添加所传参数
          props: true
        },
        {
          path: '/user/list',
          name: 'UserList',
          component: UserList}
      ]
    },{
      path: '/login',
      component: Login
    }
  ]
})

Profile.vue

<template>
  <div>
    <h1>个人信息</h1>
    <!--不能直接写在根节点下,要在标签中显示-->
    {{ id }}
  </div>
</template>

<script>
    export default {
        // 在props中设置路由的参数
        props: ['id'],
        name: "UserProfile"
    }
</script>

<style scoped>

</style>

传递登录页的账户名

修改 Login.vue 中 methods 的方法

// 路由到主页并传递参数
this.$router.push("/main/"+this.form.username);

修改 index.js

// 接收参数 name
path: '/main/:name',
props: true,

在 Main.vue 添加代码,显示用户名

<template>
...
	<span>{{ name }}</span>
...
</template>

<script>
  export default {
    props: ['name'],
    name: "Main"
  };
</script>

路由重定向

index.js 添加路由路径

{
  path: '/goHome',
  // 重定向到 /main
  redirect: '/main'
}

Main.vue 添加代码

<el-menu-item index="1-3">
  <!--重定向-->
  <router-link to="/goHome">回到首页</router-link>
</el-menu-item>

starriesWEB

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue+elementUI

创建项目vue init webpack vue-elementui# 进入项目目录cd vue-elementui# 安装 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 devnpm命令解释
复制链接

扫一扫