08Vue-element实战

已于 2022-02-07 09:59:28 修改
阅读量400 收藏 4
点赞数 2
分类专栏： Vue 文章标签： vue.js elementui javascript
于 2022-02-05 23:19:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gh_xiaohe/article/details/122786235
版权

目录

一、创建项目

创建工程

创建登录页面

二、创建登录页面

1.创建首页视图，在views目录下创建一个名为Main.vue的视图组件：

2.创建登录页视图在views目录下创建名为Login.vue的视图组件，其中el-*的元素为ElementUI组件； 

        组件 --> 路由

3.创建路由，在router目录下创建一个名为index.js的vue-router路由配置文件   

        路由--> mian.js

index.js

 4.main.js 

5.APP.vue

 可能出现问题：

路由嵌套 

        Profile.vue

        List.vue

        Main.vue

        index.js   

三、参数传递

转发：

方式一：

        传递 main.vue

        接收   index.js

        展示

 方式二：【建议】

index.js

main.vue  不变

Profile.vue

重定向  

 index.js

 main.vue 

路由模式与 404

login.vue

 index.js

 main.vue

 不带# 号

 404！

1.NotFound.vue 错误页面

2.index.js中导入路由

 路由钩子

Profile.vue

一、创建项目

vue init webpack 04hello-vue

创建工程

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

1、创建一个名为hello-vue的工程vue init webpack hello-vue

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

 #创建项目
 vue init webpack hello-vue 
 #进入工程目录
 cd 05hello-vue
 #安装vue-routern 
 npm install vue-router --save-dev
 #安装element-ui
 npm i element-ui -S
 #安装依赖
 npm install
 # 安装SASS加载器
npm install sass-loader@对应版本号7.3.1 sass@1.26.5  --save-dev
 #启功测试
 npm run dev

3、Npm命令解释：

  • 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为该命令的缩写

创建登录页面

把没有用的初始化东西删掉！   在源码目录中创建如下结构：

  • assets：用于存放资源文件

  • components：用于存放Vue功能组件

  • views：用于存放Vue视图组件

  • router：用于存放vue-router配置

二、创建登录页面

1.创建首页视图，在views目录下创建一个名为Main.vue的视图组件：

 Main.vue

 <template>
     <div>首页</div>
 </template>
 <script>
     export default {
             name:"Main"
     }
 </script>
 <style scoped>
 </style>

2.创建登录页视图在views目录下创建名为Login.vue的视图组件，其中el-*的元素为ElementUI组件； 

        组件 --> 路由

 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>

3.创建路由，在router目录下创建一个名为index.js的vue-router路由配置文件   

        路由--> mian.js

index.js

//导入vue
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
    },
  ]
})

 4.main.js 

  •         导入路由
  •         导入ElementUI
import Vue from 'vue'
import App from './App'

//扫描路由
import router from './router'

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

//安装路由 、ElementUI
Vue.use(router)
Vue.use(ElementUI)

Vue.config.productionTip = false

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

5.APP.vue

        展示路由页面

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

<script>


export default {
  name: 'App',

}
</script>

 可能出现问题：

测试：在浏览器打开 http://localhost:8080/#/login

  • 如果出现错误: 可能是因为sass-loader的版本过高导致的编译错误，当前最高版本是8.0.2，需要退回到7.3.1 ；
  • 去package.json文件里面的 "sass-loader"的版本更换成7.3.1，然后重新cnpm install就可以了；

 node-sass: https://github.com/sass/node-sass/tags
sass-loader: https://github.com/webpack-contrib/sass-loader/tags

路由嵌套 

 

1、 创建用户信息组件，在 views/user 目录下创建一个名为 Profile.vue 的视图组件；

        Profile.vue

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

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

<style scoped>

</style>

2、在用户列表组件在 views/user 目录下创建一个名为 List.vue 的视图组件；

        List.vue

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

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

<style scoped>

</style>

3、 修改首页视图，我们修改 Main.vue 视图组件，此处使用了 ElementUI 布局容器组件，代码如下：

        Main.vue

<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="/main/user/profile">个人信息</router-link>
                </el-menu-item>
                <el-menu-item index="1-2">
                <!--插入的地方-->
                  <router-link to="/main/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>

4、 配置嵌套路由修改 router 目录下的 index.js 路由配置文件，使用children放入main中写入子模块，代码如下

        index.js   

//导入vue
import Vue from 'vue';
import Router from 'vue-router';
//导入组件
import Main from "../views/Main";
import Login from "../views/Login";

import UserList from "../views/user/list";
import UserProfile from "../views/user/Profile";

//使用
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
    },
  ]
})

三、参数传递

转发：

方式一：

        传递 main.vue

<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">
                <!--name 传组件名 params传递参数 需要对象： v-bind-->
                <router-link v-bind: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-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>

        接收   index.js

//导入vue
import Vue from 'vue';
import Router from 'vue-router';
//导入组件
import Main from "../views/Main";
import Login from "../views/Login";

import UserList from "../views/user/list";
import UserProfile from "../views/user/Profile";

//使用
Vue.use(Router);
//导出
export default new Router({
  routes: [
    {
      //登录页
      path: '/main',
      component: Main,
      children:[  //嵌套路由
        {path: '/user/profile/:id',
         name: 'userProfile',
         component: UserProfile},
        {path: '/user/list', component: UserList},
      ]
    },
    //首页
    {
      path: '/login',
      component: Login
    },
  ]
})

        展示

<template slot-scope>
  <!--所有的元素，必须不能在跟节点下-->
  <div>
    <h1>个人信息</h1>
    {{$route.params.id}}
  </div>

</template>

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

<style scoped>

</style>

特别注意：

 方式二：【建议】

               通过props 解耦

index.js

//导入vue
import Vue from 'vue';
import Router from 'vue-router';
//导入组件
import Main from "../views/Main";
import Login from "../views/Login";

import UserList from "../views/user/list";
import UserProfile from "../views/user/Profile";

//使用
Vue.use(Router);
//导出
export default new Router({
  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
    },
  ]
})

 

main.vue  不变
 

Profile.vue
 

<template slot-scope>
  <!--所有的元素，必须不能在跟节点下-->
  <div>
    <h1>个人信息</h1>
    {{id}}
  </div>

</template>

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

<style scoped>

</style>

 

 

 
 

重定向  
 

 index.js
 

//导入vue
import Vue from 'vue';
import Router from 'vue-router';
//导入组件
import Main from "../views/Main";
import Login from "../views/Login";

import UserList from "../views/user/list";
import UserProfile from "../views/user/Profile";

//使用
Vue.use(Router);
//导出
export default new Router({
  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: '/goHome',
      redirect: '/main'
    }
  ]
})
 

 

 main.vue 
 

<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">
                <!--name 传组件名 params传递参数 需要对象： v-bind-->
                <router-link v-bind:to="{name:'userProfile',params:{id:1}}">个人信息</router-link>
              </el-menu-item>
              <el-menu-item index="1-2">
                <!--插入的地方-->
                <router-link to="/main/user/list">用户列表</router-link>
              </el-menu-item>
              <el-menu-item index="1-3">
                <!--插入的地方-->
                <router-link to="/goHome">回到首页</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>

 

 

路由模式与 404
 

路由模式有两种
 
 

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="dialogVisible"
      width="30%">
      <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: '密码不可为空', trigger: 'blur'}
          ]
        },

        // 对话框显示和隐藏
        dialogVisible: false
      }
    },
    methods: {
      onSubmit(formName) {
        // 为表单绑定验证功能
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // 使用 vue-router 路由到指定页面，该方式称之为编程式导航
            this.$router.push("/main/" + this.form.username);
          } 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>

 

 

 

 index.js
 

//导入vue
import Vue from 'vue';
import Router from 'vue-router';
//导入组件
import Main from "../views/Main";
import Login from "../views/Login";

import UserList from "../views/user/list";
import UserProfile from "../views/user/Profile";

//使用
Vue.use(Router);
//导出
export default new Router({
  routes: [
    {
      //登录页
      path: '/main/:name',
      props: true,
      component: Main,
      children:[  //嵌套路由
        {path: '/user/profile/:id', name: 'userProfile', component: UserProfile,props:true},
        {path: '/user/list', component: UserList},
      ]
    },
    //首页
    {
      path: '/login',
      component: Login
    },
    //重定向
    {
      path: '/goHome',
      redirect: '/main'
    }
  ]
})
 

 

 main.vue
 

<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">
                <!--name 传组件名 params传递参数 需要对象： v-bind-->
                <router-link v-bind:to="{name:'userProfile',params:{id:1}}">个人信息</router-link>
              </el-menu-item>
              <el-menu-item index="1-2">
                <!--插入的地方-->
                <router-link to="/main/user/list">用户列表</router-link>
              </el-menu-item>
              <el-menu-item index="1-3">
                <!--插入的地方-->
                <router-link to="/goHome">回到首页</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>

          <span>{{name}}</span>
          
        </el-header>
        <el-main>
          <!--在这里展示视图-->
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

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

<style scoped lang="scss">
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }
  .el-aside {
    color: #333;
  }
</style>

 

 

 
 

 
 

 不带# 号
 

之前：
 

现在： 
 

 

export default new Router({
  mode:'history',
  routes: [
    
  ]
});
 

 404！
 

1.NotFound.vue 错误页面
 

<template>
    <div>
      <h1>你的页面走丢了</h1>
    </div>
</template>

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

<style scoped>

</style>

 

2.index.js中导入路由
 

//导入vue
import Vue from 'vue';
import Router from 'vue-router';
//导入组件
import Main from "../views/Main";
import Login from "../views/Login";

import UserList from "../views/user/list";
import UserProfile from "../views/user/Profile";
import NotFound from "../views/NotFound";

//使用
Vue.use(Router);
//导出
export default new Router({
  mode:'history',
  routes: [
    {
      //登录页
      path: '/main/:name',
      props: true,
      component: Main,
      children:[  //嵌套路由
        {path: '/user/profile/:id', name: 'userProfile', component: UserProfile,props:true},
        {path: '/user/list', component: UserList},
      ]
    },
    //首页
    {
      path: '/login',
      component: Login
    },
    //重定向
    {
      path: '/goHome',
      redirect: '/main'
    },
    //404
    {
      path: '*',
      component: NotFound,
    }
  ]
})
 

 

 路由钩子
 

Profile.vue
 

<template slot-scope>
  <!--所有的元素，必须不能在跟节点下-->
  <div>
    <h1>个人信息</h1>
    {{id}}
  </div>

</template>

<script>
  export default {
    props: ['id'],
    name: "UserProfile",
    beforeRouteEnter: (to, from, next) => {  //类似于过滤器
      console.log('进入路由之前');//加载数据
      next();
    },
    beforeRouteLeave: (to, from, next) => {
      console.log('进入路由之后');
      next();
    },
  }
</script>

<style scoped>

</style>

 

 

 参数说明：
 

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

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

1、安装 Axios
 

 
 
 cnpm install --save vue-axios
 

 

2、main.js引用 Axios
 

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

//扫描路由
import router from './router/index'

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

//导入  axios
import axios from 'axios';
import VueAxios from 'vue-axios'

//安装路由 、ElementUI、 axios
Vue.use(router);
Vue.use(ElementUI);
Vue.use(VueAxios,axios);


Vue.config.productionTip = false

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

 

 

 

3、准备数据 ： 只有我们的 static 目录下的文件是可以被访问到的，所以我们就把静态文件放入该目录下。 数据和之前用的json数据一样 需要的去上述axios例子里
 

 
 
 // 静态数据存放的位置  
 
 
 static/mock/data.json
 

 

 

{
  "name": "gh_xiaohe个人博客",
  "url": "https://blog.csdn.net/gh_xiaohe",
  "page": 1,
  "isNonProfit": false,
  "address": {
    "street": "含光门",
    "city": "陕西西安",
    "country": "中国"
  },
  "links": [
    {
      "name": "bilibili",
      "url": "https://www.bilibili.com/"
    },
    {
      "name": "个人博客",
      "url": "https://blog.csdn.net/gh_xiaohe"
    },
    {
      "name": "百度",
      "url": "https://www.baidu.com/"
    }
  ]
}
 

 

4.在 beforeRouteEnter 中进行异步请求 Profile.vue
 

<template slot-scope>
  <!--所有的元素，必须不能在跟节点下-->
  <div>
    <h1>个人信息</h1>
    {{id}}
  </div>

</template>

<script>
  export default {
    name: "UserProFile",
    props: ['id','name'],
    beforeRouteEnter: (to,from,next) => {
      console.log('进入路由之前');//加载数据
      next(vm => {
        vm.getData();//进入路由之前执行getData()
      })
    },
    beforeRouteLeave: (to,from,next) => {
      console.log('进入路由之后');
      next()
    },
    methods: {
      getData() {
        this.axios({
          method: 'get',
          url: 'http://localhost:8080/static/mock/data.json'
        }).then((response) => {
          console.log(response)
        })
      }
    }
  }
</script>

<style scoped>

</style>

 

5.路由钩子和axios结合图
 

 

 


                

        

        

    




    

      

        

            

              
                
                  gh-xiaohe
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    2
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    4
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
                
  • 
                  
                    打赏
                    
                  
                  
    打赏
    
                
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
vue + element 项目实战

				
			

			

				

					qq_32265719的博客
				

				

					07-01
					
					984
					
				

			

		

		

			
				
element-upload


<el-upload style="display: inline-block; margin-right: 13px" action=""
   :http-request="importExcel"
   :before-upload="beforeAvatarUpload"
   :show-file-list="...

			
		

	



                

              
                



	

		

			

				
					
Vue+ElementUI实战

				
			

			

				

					qq_41359998的博客
				

				

					08-18
					
					818
					
				

			

		

		

			
				
Vue+ElementUI实战

使用之前创建vue-cli项目的方法
1.创建一个名为hi-vue的工程
vue init webpack hi-vue

2.安装依赖，我们需要安装element-ui、sass-loader和node-sass
# 进入工程目录
cd hello-vue
# 安装 element-ui
npm i element-ui -S
# 安装依赖
npm install
# 安装 SASS 加载器
cnpm install sass-loader node-sass --sav

			
		

	



                


  
              

                


	

		

			

				
					
vue2.0-element后台实例

				
			

			

				

					03-08
				

			

		

		

			
				
vue2.0+element饿了吗框架写的一个前端后台例子，需要安装过vue2.0才能够正常运行。

			
		

	





	

		

			

				
					
Vue项目新手上路

				
			

			

				

					code_J的博客
				

				

					11-01
					
					312
					
				

			

		

		

			
				
目录

一、创建工程

1.创建工程

2.安装依赖

3.npm命令解释

4.项目目录安排

二、创建登录页面

三、路由嵌套

1.创建用户信息组件

2. 修改首页视图

3. 配置嵌套路由

四、参数传递

五、组件重定向

路由模式与 404

六、 疑问解答



一、创建工程

1.创建工程

vue2创建工程的命令格式为：


vue init webpack 项目名

我们创建一个 learn 项目


vue init webpack learn

一路都选择no即可

说明：

Pr

			
		

	



		

			
		



	

		

			

				
					
VUE组件库Element的简单使用

					
最新发布

				
			

			

				

					m0_68599156的博客
				

				

					07-02
					
					678
					
				

			

		

		

			
				
这两行就相当于是事件监听,双引号中的handleSizeChange和handleCurrentChange就是事件监听所触发的函数,官方文档: https://element.eleme.cn/#/zh-CN/component/table。打开https://element.eleme.cn/#/zh-CN/component/button。然后我们再把下面一坨也复制过来(这个表格就需要复制script的部分,而上面的按钮那个就不需要)在这个分页组件中只涉及到了如下的属性,以及它们的功能👇。

			
		

	





	

		

			

				
					
VUE&Element&案例实战

				
			

			

				

					树叶子的博客
				

				

					03-15
					
					1089
					
				

			

		

		

			
				
今日目标：接下来我们学习一款前端的框架，就是 VUE。Vue 是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。我们之前也学习过后端的框架  ， 是用来简化  代码编写的；而  是前端的框架，是用来简化  代码编写的。前一天我们做了一个综合性的案例，里面进行了大量的DOM操作，如下学习了  后，这部分代码我们就不需要再写了。那么  是如何简化 DOM 书写呢？基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上。之前我们是将关注点放在

			
		

	





	

		

			

				
					
Vue+Element 项目实战（一）

					
热门推荐

				
			

			

				

					不愿意做鱼的小鲸鱼の博客
				

				

					02-20
					
					2万+
					
				

			

		

		

			
				
项目所用到的资源  点我下载
今日目标

初始化项目
基于Vue技术栈进行项目开发
使用Vue的第三方组件进行项目开发
理解前后端分离开发模式

1.电商业务概述
客户使用的业务服务：PC端，小程序，移动web，移动app
管理员使用的业务服务：PC后台管理端。
PC后台管理端的功能：管理用户账号（登录，退出，用户管理，权限管理），商品管理（商品分类，分类参数，商品信息，订单），数据统计
电商后台...

			
		

	





	

		

			

				
					
vue-element-template实战案例

				
			

			

				

					04-30
				

			

		

		

			
				
`vue-element-template` 是一个基于 Vue 和 Element UI 的管理后台前端框架模板。它集成了很多常用的开发工具和技术，如 Vuex、Vue Router、axios 等，可以快速搭建一个功能完备的后台管理系统。  #### 二、项目结构...

			
		

	





	

		

			

				
					
vue-typescript-admin-element-ui:基于Vue + typescript版的后台管理系统模板

				
			

			

				

					03-11
				

			

		

		

			
				
ts香不香这里我就不做过多吹捧了，基础有比较清晰的介绍，本篇博客主要分享Vue + typescript + element-ui，后台管理系统实战篇。 简单来说，ts属于强类型语言，它的优势在于静态类型检查，概括来说主要包括以下几点...

			
		

	





	

		

			

				
					
python flask vue-element-admin selenium 爬虫 后台.zip

				
			

			

				

					12-28
				

			

		

		

			
				
实战项目：结合实际案例，让您在实践中掌握Python爬虫的运用，真正做到学以致用。 三、适用人群  无论您是数据分析师、网络开发者还是对Python爬虫感兴趣的爱好者，这些资源都将为您的学习和实践提供有力的支持。  ...

			
		

	





	

		

			

				
					
简单的桌面化登录系统DEMO，electron-vue3-element-plus.zip

				
			

			

				

					01-04
				

			

		

		

			
				
Vue3，springboot，element-ui使用技巧，实战应用开发小系统参考资料，源码参考。 详细介绍了一些Qt框架的各种功能和模块，以及如何使用Qt进行GUI开发、网络编程和跨平台应用开发等。 适用于初学者和有经验的开发者...

			
		

	





	

		

			

				
					
vue + elementUI 项目搭建Demo

				
			

			

				

					12-05
				

			

		

		

			
				
使用vue-cli脚手架搭建vue + elementUI 小案例，功能代码不多，主要包括vue项目目录的创建、elementUI的引入、前端路由、i18n国际化语言、scss、引入iconfont

			
		

	





	

		

			

				
					
基于vue2.0+element-ui的管理后台实例源码

				
			

			

				

					09-05
				

			

		

		

			
				
基于vue2.0+element-ui的管理后台实例源码，包括路由管理，动态路由加载，全局导航守卫处理等功能，可以作为管理后台开发的非常好的参考

			
		

	





	

		

			

				
					
vue-element 完整版

				
			

			

				

					09-14
				

			

		

		

			
				
vue-lement 3.7.2版本，所有组件都已经下载其中，在没有联网状态下可用

			
		

	





	

		

			

				
					
Vue 人资 实战篇一 vue-element-admin学习，项目初始化，sass运用

				
			

			

				

					m0_55170432的博客
				

				

					05-31
					
					978
					
				

			

		

		

			
				
人力资源的环境搭建
1.0 vue-element-admin的了解和介绍
vue-element-admin  (https://panjiachen.gitee.io/vue-element-admin-site/zh/)

是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。
是一个后台集成方案, 集成了PC项目中很多的业

			
		

	





	

		

			

				
					
vue-element

				
			

			

				

					maxle的博客
				

				

					06-15
					
					359
					
				

			

		

		

			
				
为了记笔记。阅读官方文档CloneNpm问题淘宝镜像不行，百度说是需要查看日志信息。使用如下方法：最后，解决方法只是重启，清空npm cache clean –force然后更新路由表。查找问题，清除缓存。最后竟然是更新dns/host文件。.npm安装警告，运行还行。最终本地运行成功，进行启动下一步进行项目管理，熟悉各个文件。使用vscode打开。安装vue扩展包。VueLF是专门为Vue 3构建的语言支持插件。它基于@vue/reactivity按需计算所有内容，实现本机TypeScript语言服务级别

			
		

	





	

		

			

				
					
Vue + Element-UI —— 项目实战（四）

				
			

			

				

					HuoZhiyan 的博客
				

				

					06-07
					
					2130
					
				

			

		

		

			
				
Elementui + Vue 项目实战四

			
		

	





	

		

			

				
					
vue之项目实战elementUI经验之谈，成体系化的神级前端进阶笔记,

				
			

			

				

					m0_60721860的博客
				

				

					03-19
					
					748
					
				

			

		

		

			
				
由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】链图片转存中…(img-xOsmwE5h-1710847726623)][外链图片转存中…(img-rXRpkRqv-1710847726623)]由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

			
		

	





	

		

			

				
					
Vue + Element-UI —— 项目实战（六）

				
			

			

				

					HuoZhiyan 的博客
				

				

					06-12
					
					2433
					
				

			

		

		

			
				
Elementui + Vue 项目实战

			
		

	





	

		

			

				
					
Vue-Element-Template实战：构建顶部菜单与侧边栏

				
			

			

				

					
				

			

		

		

			
				
"vue-element-template实战案例，通过vue.js技术栈实现顶部一级菜单和左侧多级菜单功能"  在本文中，我们将深入探讨如何使用Vue.js框架和Element UI库来构建一个包含顶部一级菜单和左侧二级及以下菜单的Web应用。Vue...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
gh-xiaohe

			
你的鼓励将是我创作的最大动力

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

			
您的余额不足，请更换扫码支付或充值

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值