Vue2项目练手——通用后台管理项目第八节

最新推荐文章于 2024-05-27 09:45:00 发布
最新推荐文章于 2024-05-27 09:45:00 发布
阅读量277 收藏
点赞数 1
分类专栏： 前端 Vue基础 文章标签： 前端 javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34306228/article/details/132755413
版权

Vue2项目练手——通用后台管理项目

菜单权限功能

  1. 不同的账号登录，会有不同的菜单权限
  2. 通过url输入地址来显示页面
  3. 对于菜单的数据在不同页面之间的数据通信

tab.js

import Cookie from "js-cookie";
export default {
    state:{
        menu:[]
    },
	mutations:{
	//设置menu的数据
        setMenu(state,val){
            state.menu=val
            console.log("val",val)
            Cookie.set('menu',JSON.stringify(val))
        },
        //动态注册路由
        addMenu(state,router){
            //判断缓存中是否有数据
            if(!Cookie.get('menu')) return
            const menu=JSON.parse(Cookie.get('menu'))
            state.menu=menu
            //组装动态路由的数据
            const menuArray=[]
            menu.forEach(item=>{
                if(item.children){
                    item.children= item.children.map(item=>{
                        item.component=()=>import(`../pages/${item.url}`)
                        return item
                    })
                    menuArray.push(...item.children)
                }else{
                    item.component=()=>import(`../pages/${item.url}`)
                    menuArray.push(item)
                }
            })
            console.log("menuArray",menuArray)
            //路由的动态添加
            menuArray.forEach(item=>{
                router.addRoute('main',item)
            })
            console.log("menuArray",menuArray)
        }
    }

全部代码：

import Cookie from "js-cookie";
export default {
    state:{
        isCollapse:false,  //控制菜单的展开还是收起
        tabsList:[
            {
                path:'/',
                name:"home",
                label:"首页",
                icon:"s-home",
                url:'Home/Home'
            },
        ],  //面包屑数据
        menu:[]
    },
    mutations:{
        //   修改菜单展开收起的方法
        collapseMenu(state){
            state.isCollapse=!state.isCollapse
        },
        //更新面包屑
        selectMenu(state,val){
            //判断添加的数据是否为首页
            if(val.name!=='home'){
                // console.log("state",state)
                const index=state.tabsList.findIndex(item=>item.name===val.name)
                //如果不存在
                if(index===-1){
                    state.tabsList.push(val)
                }
            }
        },
        //删除指定的tag
        closeTag(state,item){
            const index=state.tabsList.findIndex(val=>val.name===item.name)
            state.tabsList.splice(index,1)   //splice(删除的位置，删除的个数）
        },
        //设置menu的数据
        setMenu(state,val){
            state.menu=val
            console.log("val",val)
            Cookie.set('menu',JSON.stringify(val))
        },
        //动态注册路由
        addMenu(state,router){
            //判断缓存中是否有数据
            if(!Cookie.get('menu')) return
            const menu=JSON.parse(Cookie.get('menu'))
            state.menu=menu
            //组装动态路由的数据
            const menuArray=[]
            menu.forEach(item=>{
                if(item.children){
                    item.children= item.children.map(item=>{
                        item.component=()=>import(`../pages/${item.url}`)
                        return item
                    })
                    menuArray.push(...item.children)
                }else{
                    item.component=()=>import(`../pages/${item.url}`)
                    menuArray.push(item)
                }
            })
            console.log("menuArray",menuArray)
            //路由的动态添加
            menuArray.forEach(item=>{
                router.addRoute('main',item)
            })
            console.log("menuArray",menuArray)
        }
    }
}

Login.vue

getMenu(this.form).then(({data})=>{
            console.log(data)
            if(data.code===20000){
              Cookie.set('token',data.data.token)
              //获取菜单的数据，存入store中
              this.$store.commit('setMenu',data.data.menu)
              this.$store.commit('addMenu',this.$router)
              //跳转到首页
              this.$router.push('/home')
            }else{
              this.$message.error(data.data.message)
            }
          })

全部代码：

<template>
  <div id="app">
    <div class="main-content">
      <div class="title">系统登录</div>
      <div class="content">
        <el-form label-width="70px" :inline="true" :model="form" status-icon :rules="rules" ref="ruleForm" class="demo-ruleForm">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="form.username" placeholder="请输入账号"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="form.password" type="password" autocomplete="off" placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button></el-col>
          </el-form-item>
        </el-form>
      </div>
    </div>

  </div>

</template>

<script>
// import Mock from 'mockjs'
import Cookie from 'js-cookie'
import {getMenu} from "@/api";
export default {
  name: "login",
  data(){
    return{
      form: {
        username: '',
        password:""
      },
      rules: {
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
        ],
        password: [
          {required:true,message:"请输入密码",trigger:"blur"}
        ]
      }
    }
  },
  methods:{
    //登录
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //token信息
          /*const token=Mock.Random.guid()  //生成随机数
          //token信息存入cookie用于不同页面间的通信
          Cookie.set('token',token)*/
          getMenu(this.form).then(({data})=>{
            console.log(data)
            if(data.code===20000){
              Cookie.set('token',data.data.token)
              //获取菜单的数据，存入store中
              this.$store.commit('setMenu',data.data.menu)
              this.$store.commit('addMenu',this.$router)
              //跳转到首页
              this.$router.push('/home')
            }else{
              this.$message.error(data.data.message)
            }
          })

        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
  }
}
</script>

<style lang="less" scoped>
#app {
  display: flex;
  background-color: #333;
  height: 100vh;
  .main-content{
    height: 300px;
    width: 350px;
    //line-height: 100vh;
    background-color: #fff;
    margin: 200px auto;
    border-radius: 15px;
    padding: 35px 35px 15px 35px;
    box-sizing: border-box;
    box-shadow: 5px  5px 10px rgba(0,0,0,0.5),-5px -5px 10px rgba(0,0,0,0.5);
    .title{
      font-size: 20px;
      text-align: center;
      font-weight: 300;
    }
    .content{
      margin-top: 30px;
    }
    .el-input{
      width: 198px;
    }
    .el-button{
      margin-left: 105px;
    }
  }
}
</style>

CommonAside.vue

data() {
    return {
    };
  },
menuData(){
      //判断当前数据,如果缓存中没有，当前store中获取
      return JSON.parse(Cookie.get('menu'))||this.$store.state.tab.menu
    }

全部代码：

<template>
    <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
             :collapse="isCollapse" background-color="#545c64" text-color="#fff"
             active-text-color="#ffd04b">
      <h3>{{isCollapse?'后台':'通用后台管理系统'}}</h3>
      <el-menu-item @click="clickMenu(item)"  v-for="item in noChildren" :key="item.name" :index="item.name">
        <i :class="`el-icon-${item.icon}`"></i>
        <span slot="title">{{item.label}}</span>
      </el-menu-item>
      <el-submenu :index="item.label" v-for="item in hasChildren" :key="item.label">
        <template slot="title">
          <i :class="`el-icon-${item.icon}`"></i>
          <span slot="title">{{item.label}}</span>
        </template>
        <el-menu-item-group>
          <el-menu-item @click="clickMenu(subItem)" :index="subItem.path" :key="subItem.path" v-for="subItem in item.children">
            {{subItem.label}}
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>

</template>



<style lang="less" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.el-menu{
  height: 100vh;  //占据页面高度100%
  h3{
    color: #fff;
    text-align: center;
    line-height: 48px;
    font-size: 16px;
    font-weight: 400;
  }
}
</style>

<script>
import Cookie  from "js-cookie";
export default {
  data() {
    return {
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    clickMenu(item){
      // console.log(item)
      // console.log(this.$route.path)
      // 当页面的路由与跳转的路由不一致才允许跳转
      if(this.$route.path!==item.path && !(this.$route.path==='/home'&&(item.path==='/'))){
        this.$router.push(item.path)
      }
      this.$store.commit('selectMenu',item)
    }
  },
  mounted() {
    // console.log(this.$route.path)
  },
  computed:{
    //没有子菜单的数据
    noChildren(){
      return this.menuData.filter(item=>!item.children)
    },
    //有子菜单数组
    hasChildren(){
      return this.menuData.filter(item=>item.children)
    },
    isCollapse(){
      return this.$store.state.tab.isCollapse
    },
    menuData(){
      //判断当前数据,如果缓存中没有，当前store中获取
      return JSON.parse(Cookie.get('menu'))||this.$store.state.tab.menu
    }

  }
}
</script>

router/index.js

{
            // 子路由
            name:"main",
            path:'/',
            redirect:"/home",  //重定向 当路径为/，则重定向home
            component:Main,
            children:[
                    /*{
                        name:"user",
                        path:"user",
                        component:User,
                        meta:{title:"用户管理"}
                    },
                    {
                        name:"home",
                        path:"home",
                        component:Home,
                        meta:{title:"首页"}
                    },
                    {
                        name:"mall",
                        path:"mall",
                        component:Mall,
                        meta:{title:"商品管理"}
                    },
                    {
                        name:"page1",
                        path:"page1",
                        component:PageOne,
                        meta:{title:"页面1"}
                    },
                    {
                        name:"page2",
                        path:"page2",
                        component:PageTwo,
                        meta:{title:"页面2"}
                    }*/
            ]
        }

全部代码：

import VueRouter from "vue-router";
import Login from "@/pages/Login.vue";
import Main from '@/pages/Main.vue';
import User from "@/pages/User.vue";
import Home from "@/pages/Home.vue";
import Mall from "@/pages/Mall.vue";
import PageOne from "@/pages/PageOne.vue";
import PageTwo from "@/pages/PageTwo.vue";
import Cookie from "js-cookie";

const router= new VueRouter({
    // 浏览器模式设置，设置为history模式
    // mode:'history',
    routes:[
        {
            name:'login',
            path:"/login",
            component:Login,
            meta:{title:"登录"},
        },
        {
            // 子路由
            name:"main",
            path:'/',
            redirect:"/home",  //重定向 当路径为/，则重定向home
            component:Main,
            children:[
                    /*{
                        name:"user",
                        path:"user",
                        component:User,
                        meta:{title:"用户管理"}
                    },
                    {
                        name:"home",
                        path:"home",
                        component:Home,
                        meta:{title:"首页"}
                    },
                    {
                        name:"mall",
                        path:"mall",
                        component:Mall,
                        meta:{title:"商品管理"}
                    },
                    {
                        name:"page1",
                        path:"page1",
                        component:PageOne,
                        meta:{title:"页面1"}
                    },
                    {
                        name:"page2",
                        path:"page2",
                        component:PageTwo,
                        meta:{title:"页面2"}
                    }*/
            ]
        }

    ]
})
//添加全局前置导航守卫
router.beforeEach((to,from,next)=>{
    //判断token存不存在
    const token=Cookie.get('token')
    //token不存在，说明当前用户是未登录，应该跳转至登录页
    if(!token&&to.name!=='login'){
        next({name:'login'})
    }else if(token && to.name=="login"){   //token存在，说明用户登录，此时跳转至首页
        next({name:'home'})
    }else{
        next()
    }
})
// 后置路由守卫
router.afterEach((to,from)=>{
    document.title=to.meta.title||"通用后台管理系统"
})
export default router

请添加图片描述

权限管理问题解决

router/tab.js

clearTabs(state){
            //清除除过首页之外的所有面包屑
            state.tabsList=state.tabsList.splice(0,1)
        }

全部代码：

import Cookie from "js-cookie";
export default {
    state:{
        isCollapse:false,  //控制菜单的展开还是收起
        tabsList:[
            {
                path:'/',
                name:"home",
                label:"首页",
                icon:"s-home",
                url:'Home/Home'
            },
        ],  //面包屑数据
        menu:[]
    },
    mutations:{
        //   修改菜单展开收起的方法
        collapseMenu(state){
            state.isCollapse=!state.isCollapse
        },
        //更新面包屑
        selectMenu(state,val){
            //判断添加的数据是否为首页
            if(val.name!=='home'){
                // console.log("state",state)
                const index=state.tabsList.findIndex(item=>item.name===val.name)
                //如果不存在
                if(index===-1){
                    state.tabsList.push(val)
                }
            }
        },
        //删除指定的tag
        closeTag(state,item){
            const index=state.tabsList.findIndex(val=>val.name===item.name)
            state.tabsList.splice(index,1)   //splice(删除的位置，删除的个数）
        },
        //设置menu的数据
        setMenu(state,val){
            state.menu=val
            console.log("val",val)
            Cookie.set('menu',JSON.stringify(val))
        },
        //动态注册路由
        addMenu(state,router){
            //判断缓存中是否有数据
            if(!Cookie.get('menu')) return
            const menu=JSON.parse(Cookie.get('menu'))
            state.menu=menu
            //组装动态路由的数据
            const menuArray=[]
            menu.forEach(item=>{
                if(item.children){
                    item.children= item.children.map(item=>{
                        item.component=()=>import(`../pages/${item.url}`)
                        return item
                    })
                    menuArray.push(...item.children)
                }else{
                    item.component=()=>import(`../pages/${item.url}`)
                    menuArray.push(item)
                }
            })
            console.log("menuArray",menuArray)
            //路由的动态添加
            menuArray.forEach(item=>{
                router.addRoute('main',item)
            })
            console.log("menuArray",menuArray)
        },
        clearTabs(state){
            //清除除过首页之外的所有面包屑
            state.tabsList=state.tabsList.splice(0,1)
        }
    }
}

CommonHeader.vue

handleClick(command){
      if(command==='cancel'){
        console.log("登出")
        //清除Cookie的token信息
        Cookie.remove('token')
        //清除cookie中的menu
        Cookie.remove('menu')
        this.$store.commit('clearTabs')
        this.$router.push('/login')
      }

    }

全部代码：

<template>
  <div class="header-container">
    <div class="l-content">
      <el-button style="margin-right: 20px" icon="el-icon-menu" size="mini" @click="handleMenu"></el-button>
      <!--      面包屑-->
<!--      <span class="text">首页</span>-->
      <el-breadcrumb separator="/">
        <el-breadcrumb-item v-for="item in tags" :key="item.path" :to="{ path: item.path }">{{ item.label }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="r-content">
      <el-dropdown @command="handleClick">
          <span class="el-dropdown-link">
            <img src="@/assets/user.webp" alt="">
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>个人中心</el-dropdown-item>
            <el-dropdown-item command="cancel">退出</el-dropdown-item>
          </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>

</template>

<script>
import {mapState} from 'vuex'
import Cookie from 'js-cookie'
export default {
  name: "CommonHeader",
  methods:{
    handleMenu(){
      this.$store.commit('collapseMenu')
    },
    handleClick(command){
      if(command==='cancel'){
        console.log("登出")
        //清除Cookie的token信息
        Cookie.remove('token')
        //清除cookie中的menu
        Cookie.remove('menu')
        this.$store.commit('clearTabs')
        this.$router.push('/login')
      }

    }
  },
  computed:{
    ...mapState({
      tags: state=>state.tab.tabsList
    })
  }
}
</script>

<style scoped lang="less">
.header-container {
  height: 60px;
  background-color: #333;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;

  .text {
    color: #fff;
    font-size: 14px;
    margin-left: 10px;
  }
  .r-content{
    img{
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
  }
  .l-content{
    display: flex;
    align-items: center;
    /deep/.el-breadcrumb__item{   /*元素没有绑定data-v-5a90ec03这样的编号时候，样式不起作用，使用deep进行穿刺可解决问题*/
      .el-breadcrumb__inner{
        font-weight: normal;
        &.is-link{
          color: #666;
        }
      }
      &:last-child{
        .el-breadcrumb__inner {
          color: #fff;
        }
      }
    }
  }
}
</style>

main.js

created(){
    store.commit('addMenu',router)
  }

全部代码：

import Vue from 'vue'
import App from './App.vue'
import VueRouter from "vue-router";
import router from "@/router";
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'
import store from '@/store'
//引入mock模拟
import '@/api/mock'

Vue.config.productionTip = false
Vue.use(VueRouter)
Vue.use(ElementUI)
new Vue({
  store,
  router,
  render: h => h(App),
  created(){
    store.commit('addMenu',router)
  }
}).$mount('#app')

请添加图片描述

项目到此Vue2部分也就结束了

VillanelleS
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue2实现仿小米商城练手项目前端篇(1-项目介绍)
qq_39064418的博客
03-06 1019
基于Vue2实现仿小米商城练手项目
Vue2项目练手——通用后台管理项目第六节
qq_34306228的博客
09-07 457
使用的组件和前面的表格使用的一致。 mock.js 新增代码： 全部代码： index.js 新增代码 全部代码： Users.vue 新增代码 全部代码： 新增和编辑功能 Users.vue 新增代码： 全部代码： 新增代码： 全部代码：
零基础使用Vue2搭建前端项目
zwl2220943286的博客
05-27 573
如何配置vue运行环境，如何使用vue-cli脚手架进行vue项目的搭建
Vue2项目练手——通用后台管理项目第四节
qq_34306228的博客
09-01 886
mock官方文档 前端用来模拟后端接口的工具，通过拦截前端发起的请求，自己定义一些数据 src/api/mockServeData/home.js main.js 安装echarts 柱状图: 饼状图 全部代码：
Vue2.0练手项目开发笔记-2、Vue-router
virinko的博客
04-13 538
先理解下路由（route）是什么意思引用知乎这位前辈的答案。App.vue中的代码&lt;template&gt; &lt;div id="app"&gt; &lt;v-header&gt;&lt;/v-header&gt; &lt;div class="tab"&gt; &lt;div class="tab-item"&
vue练手项目（day2：路由元信息控制底部组件是否显示和函数式路由编程）
qq_51172685的博客
12-23 685
分析页面发现，当页面处于home和search页面的时候Footer组件是可见的，但是当页面处于login和register的时候Footer是不可见的，这时候自然可以相到要用条件渲染：v-if或者是v-show；但是用哪个呢？一般来说v-if会对真实dom进行操作，选择要不要把dom挂载到页面上，而v-show是通过display样式控制是否显示元素，所以从效率上来看用v-show比较合适。那么v-show接受的是一个Boolean值，那么通过哪个值来控制页面是否显示呢？ ...
前端vue2+elementUI，后端express文章管理超简单练手小项目
04-10
前端：vue2+elementUI 后端：express+mysql 可以跟着b站up敲，仅记录最终代码和踩过的坑。 视频链接：https://www.bilibili.com/video/BV1t441187pL?share_source=copy_web 我主页写了对应的博文（每个文件可以直接粘贴就不用下资源类），可能后续会改进。 如果你有积分的话，请随便下，没有传node_modules文件夹，要自己下载哦。
Vue项目 - 通用后台管理资料
05-05
这个通用后台管理资料包含了一个Vue项目的完整流程，从项目初始化到运行成型，以及如何使用Yarn作为项目依赖管理工具，同时也涵盖了与后台交互的基础知识。以下是这些知识点的详细说明： 1. **Yarn**： Yarn是...
vue2后台管理项目实例合集
最新发布
06-27
【vue2后台管理项目实例合集】包含多个vue2版本后台管理项目实例 【项目质量】：所有源码都经过严格测试，可以直接运行。功能在确认正常工作后才上传。【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者...
前端项目笔记——网易云音乐、通用后台管理
06-15
本文将围绕“前端项目笔记——网易云音乐、通用后台管理”这一主题，深入探讨相关知识点，主要关注Vue.js框架的运用和其他前端技术的整合。 一、Vue.js框架基础 Vue.js是一款轻量级的渐进式JavaScript框架，以其...
基于Vue2的后台管理端项目源码.zip
11-02
基于Vue2的后台管理端项目源码.zip基于Vue2的后台管理端项目源码.zip基于Vue2的后台管理端项目源码.zip基于Vue2的后台管理端项目源码.zip基于Vue2的后台管理端项目源码.zip基于Vue2的后台管理端项目源码.zip
Vuejs:Vue练手实战小项目
08-03
当前仓库用于存储 blog个人博客静态页面生成器、ewshop-master做过的项目、interview还有面试题等。 Vuejs ├── blog 修改过的静态网站生成器，生成个人博客专用 ├── docs 所有文章都在这 │ └── ..vuepress │ ├── components 可以写一些Vue组件，暂时用不上 │ ├── dist npm run build 后 存放静态文件夹 │ ├── public 博客的公共资源 │ ├── styles 暂时用不上 │ ├── ······ │ └── README.md ├── ewshop-master 已经做完的图书商城项目 │
Vue2实现仿小米商城练手项目前端篇(2-首页实现)
qq_39064418的博客
03-06 2890
基于Vue2实现仿小米商城练手项目
vue项目练手-尚品汇
song_song0927的博客
01-10 493
学习记录--vue项目创建...
【前端项目】时间不够？刚学完vue2应该练的项目--todoList项目
薇z的博客
07-26 1276
该项目是一个非常简易的vu2项目,适合刚学习完vue2,或者是刚接触vue2的新手使用，但是又不想花费大量时间练大型项目的小伙伴。项目虽然小，但是涉及了最常用的增删改查功能，以及各组件之间进行传数据的方式。父子组件，自定义事件。全局事件总线等，有一定的练手意义............
适合初学者练手的vue小项目
写代码的渣渣苏
07-15 5547
适合初学者练手的vue小项目
Vue练手项目技术总结
HARDWORKING SURELY PAYS OFF
05-05 361
Vue练手项目技术总结 源码已上传到gitee，如果感到对你有帮助，欢迎star一下~ 通过css3实现的反转盒子登陆、注册界面 效果展示 首先定义一个父盒子，两个子盒子，设置相同的尺寸、位置，使之重叠。 然后将登录盒子默认设置在上层，并将注册盒子沿y轴旋转90度 然后定义父盒子的透视属性，以及动画效果。 再定义一个vue中的数据isRotate，使其初始数据为false。 再定义一个旋转的css属性，使整个盒子沿y轴旋转负90度，并将其是否生效绑定给isRotate 最后再定义一个方法，使isRotate
Vue2.0实战
qq_42636335的博客
03-06 5871
目录 项目初始化 1.vue-cli脚手架初始化项目 2.项目的其他配置 3.项目路由分析 4.完成非路由组件Header和Footer业务 5.完成路由组件搭建 6. Footer组件显示与隐藏 7.路由传参 7.3路由传参面试题 Home模块组件拆分 1.三级联动组件 2.完成其余静态组件 3.postman测试接口 4.axios二次封装 5.接口统一管理 6.nprogress进度条的使用 6. vuex状态管理库 7.完成TypeNav三级联动展示数据业..
适合新手学习vue+vuex+vue-router练习的项目
weixin_34038652的博客
03-27 171
vue练手项目 目的 这个项目主要是用vue+vuex实现一个单页面应用，纯粹是熟悉vue全家桶相关开发模式，用于练手非常合适。 着手开发完了之后可以学的东西： 熟悉vue单文件组件开发方式 熟悉如何写一个vue插件 熟悉如何使用vue-router以及挂载路由钩子函数 熟悉vuex是如何运作的，模块化维护应用状态数据 体验typesc...
学完vue2的练手项目
09-14
很高兴听说您已经学完了Vue2，那么接下来可以考虑做一些练手项目来巩固所学的知识。以下是一些建议的练手项目： 1. Todo List 应用：创建一个可以添加、删除、更新和标记完成的任务列表应用。 2. 新闻应用：使用Vue...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值