vue+ElementUI

最新推荐文章于 2023-10-12 09:42:45 发布

恨劫

最新推荐文章于 2023-10-12 09:42:45 发布

阅读量1.4k

点赞数 1

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

本文链接：https://blog.csdn.net/qq_43086633/article/details/115771171

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

13.1 创建项目

创建vue

# 初始化vue项目
vue init webpack hello-vue
cd hello-vue
# 安装vue-router
npm install vue-router --save-dev
# 安装element-ui
npm i element-ui -S
# 安装所有依赖
npm install
# 依赖安装报错，执行
npm audit fix
# 安装 SASS 加载器
cnpm install sass-loader node-sass --save-dev
# 启动测试
npm run dev

npm install moduleName：安装模块到项目目录下
npm install -g moduleName：-g的意思是将模块安装到全局，具体安装到磁盘哪个位置要看npm config prefix的位置
npm install -save moduleName：–save的意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖，-S为该命令的缩写
npm install -save-dev moduleName:–save-dev的意思是将模块安装到项目目录下，并在package文件的devDependencies节点写入依赖，-D为该命令的缩写

导入IDEA，创建目录

assets 存放资源文件
components 存放一些功能性组件
views 存放一些视图的组件
router 存放路由跳转的组件

13.2 编写代码

Main.vue

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

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

<style scoped>

</style>

Login.vue

<template>
  <div>
    <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>
        <el-button type="primary" v-on:click="onsubmit('loginForm')">登录</el-button>
      </el-form-item>
    </el-form>

    <el-dialog title="温馨提示" :visible.sync="dialogVisiable" 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:''
            },
            //表单验证，需要在 el-form-item 元素中增加prop属性
            rules:{
              username:[
                {required:true,message:"账号不可为空",trigger:"blur"}
              ],
              password:[
                {required:true,message:"密码不可为空",tigger:"blur"}
              ]
            },

            //对话框显示和隐藏
            dialogVisible:false
          }
      },
      methods:{
          onSubmit(formName){
            //为表单绑定验证功能
            this.$refs[formName].validate((valid)=>{
              if(valid){
                //使用vue-router路由到指定界面，该方式称为编程式导航
                this.$router.push('/main');
              }else{
                this.dialogVisible=true;
                return false;
              }
            });
          }
      }
    }
</script>

<style lang="scss" scoped>
  .login-box{
    border:1px solid #DCDFE6;
    width: 350px;
    margin:180px auto;
    padding: 35px 35px 15px 35px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    box-shadow: 0 0 25px #909399;
  }
  .login-title{
    text-align:center;
    margin: 0 auto 40px auto;
    color: #303133;
  }
</style>

main.js

//导入vue组件
import Vue from 'vue'
import App from './App'
//导入vue-router
import router from './router'
//导入element-ui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

//加载路由
Vue.use(router);
//加载ElementUI
Vue.use(ElementUI);

new Vue({
  el: '#app',
  router, //配置路由
  render: h => h(App) //ElementUI 配置
})

App.vue

<template>
  <div id="app">
    <h1>恨劫的hello vue</h1>
    <router-link to="/main">首页</router-link>
    <router-link to="/login">登录页</router-link>
    <router-view></router-view>
  </div>
</template>

<script>


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

13.3 错误整理与效果图

首次运行报错

排查发现是"sass-loader": "^11.0.1",版本过高导致，因此需要降低版本

解决方式

降低版本至："sass-loader": "^7.3.1",

然后重新安装依赖npm install

效果展示

13.4 嵌套路由

嵌套路由，又称子路由，在实际应用中，通常用多层嵌套的组件组合而成。

用户信息组件 Profile.vue

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

<script>
export default {
  name: "UserProfile"	//文件名可以不和暴露的名一样，引入组件时引入这里的名字
}
</script>

<style scoped>

</style>

用户列表组件

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

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

<style scoped>

</style>

修改Main.vue 应用ElementUI

<template>
    <div>
      <el-container>
        <el-aside width="200px">
          <el-menu :default-openeds="['1']">
            <el-submenu index="1">
              <template slot="title"><i class="el-icon-caret-right"></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-caret-right"></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 />
          </el-main>
        </el-container>
      </el-container>
    </div>
</template>
<script>
    export default {
        name: "Main"
    }
</script>
<style scoped lang="scss">
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }
  .el-aside {
    color: #333;
  }
</style>

13.41 添加嵌套路由

import vue from 'vue'
import VueRouter from 'vue-router'
import Main from  "../views/Main"
import Login from "../views/Login";
import List from "../views/user/List";
import Profile from "../views/user/Profile";

vue.use(VueRouter);
export default new VueRouter({
  routes: [
    {
      path: '/main',
      component: Main,  
      children: [
        //嵌套路由
        {
          path:'/user/profile',
          component: Profile
        },{
          path: '/user/list',
          component: List
        }
      ]
    },{
      path: '/login',
      component: Login,
    }
  ]
});

父路由在跳转的内容下的部分，再进行跳转

效果图

父路由用来控制，首页和登录页两个组件的跳转

子路由在父路由跳转的内容下，控制子组件的跳转。

13.5 参数传递

方式一：

修改Main.vue

<el-menu-item index="1-1">
    <!--插入的地方-->
    <router-link v-bind:to="{name: '/user/profile',params:{id: 1}}">个人信息</router-link>
</el-menu-item>

name传递的是地址（或者组件名），通过params向==路由中==传递参数。

注意，参数传递时，vue需要一个对象，绑定一个参数值v-vind:

修改路由 index.js

//嵌套路由
{
    path:'/user/profile/:id',	//添加:id ,接收模板中传递的参数
        component: Profile
},{
    path: '/user/list',
        component: List
}

修改Profile.vue

  <div>
    <h1>个人信息</h1>
    {{$route.params.id}} //显示路由中传来的参数
  </div>

注意：所有的元素，必须包含在标签里面。

方式二：

上面基础上，修改Main.vue

<el-menu-item index="1-1">
    <!--插入的地方-->
    <router-link v-bind:to="{name: 'Profile',params:{id: 1}}">个人信息</router-link>
</el-menu-item>

注：传递参数时需要在路由中给组件命名，并以名字作为模板中的属性

修改路由 index.js

children: [
    //嵌套路由
    {
        path:'/user/profile/:id',
        component: Profile,
        name: 'Profile',	//传递参数时需要在路由中给组件命名，
        props: true   //支持传递参数
    },{
        path: '/user/list',
        component: List
    }
]

修改Profile.vue

<template>
  <div>
    <h1>个人信息</h1>
    {{id}}  
  </div>
</template>

<script>
export default {
  props: ['id'],  //接收路由传过来的参数，命名为id，路由那里需要设置props: true，允许传递参数
  name: "UserProfile"
}
</script>

效果

参数传递.gif

13.6 重定向

增加一个vue-router

{
    path: '/gohome',
    redirect: '/main'		//将gohomg重定向到main
}

如此便成功设置重定向

13.7 路由模式

路由模式有两种：

hash：路径带#符号，如http://localhost:8080/#/main
history：路径不带#符号，如http://localhost:8080/main

修改如下：

  mode: 'history',		//vue-router的index.js改成history
  routes: [

如此，便不带#号了

13.8 404

创建一个NotFound.vue

<template>
  <h1>404 Not Found</h1>
</template>

配置路由

import NotFound from "../NotFound";
……
,{
      path: '*',
      component: NotFound
 }

至此，404配置成功

13.9 钩子函数

beforeRouterEnter：在进入路由之前执行

beforeRouterLeave：在离开路由前执行

<script>
export default {
  props: ['id'], 
  name: "UserProfile",
  beforeRouteEnter:(to,from,next)=>{
    // 在进入路由器之前执行
    console.log("进入路由器之前");
    // 让程序继续往下走，相当于chain
    next();
  },
  beforeRouteLeave:(to,from,next)=>{
    // 在离开路由器之前执行
    console.log("离开路由器之前");
    next();
  }
}
</script>

to相当于request,from相当于response,next相当于chain：从哪里来，到哪里去，是否继续往下走。

参数详解：

to：路由将要跳转的路径信息
from：路径挑战前的路径信息
next：路由的控制参数
- next() 跳入下一个页面
- next(‘/path’) 改变路由的跳转方向，使其跳转到另一个路由
- next(false) 返回原来的页面
- next((vm)=>{}) 仅在 beforeRouteEnter 中可用，vm 是组件实例

钩子函数.gif

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

安装Axios：npm install --save axios vue-axios

main.js中引用 Axios：

import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

Profile.vue

<script>
export default {
  props: ['id'],  
  name: "UserProfile",
  beforeRouteEnter:(to,from,next)=>{
    console.log("进入路由器之前");
    next(vm => {
      vm.getdata(); //在进入路由之前，调用method中的getdata方法
    });
  },
  methods: {
    getdata: function (){
      this.axios.get('http://localhost:8080/static/mock/data.json').then(Response=>(console.log(Response.data)))
    }
  }
}
</script>

测试

恨劫

关注

1
点赞
踩
5

收藏

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

13.1 创建项目创建vue# 初始化vue项目vue init webpack hello-vuecd hello-vue# 安装vue-routernpm install vue-router --save-dev# 安装element-uinpm i element-ui -S# 安装所有依赖npm install# 依赖安装报错，执行npm audit fix# 安装 SASS 加载器cnpm install sass-loader node-sass --save-
复制链接

扫一扫