【Vue实战项目】学完前端基础后，可能你还需要掌握这些才能接手开发项目

_BugMan

已于 2024-05-18 22:16:40 修改

阅读量980

点赞数 68

分类专栏：前端文章标签： javascript vue.js 前端

于 2024-05-18 22:12:53 首次发布

本文链接：https://blog.csdn.net/Joker_ZJN/article/details/139023683

版权

前端专栏收录该内容

19 篇文章

订阅专栏

1.前言

本文是作者前端系列专栏中的一文，本专栏主要针对JAVA后端，协助JAVA后端快速入门前端，让JAVA后端能在日常工作中看懂、微调一些前端内容，专栏地址：

https://blog.csdn.net/joker_zjn/category_12469788.html?spm=1001.2014.3001.5482

在当前的前端项目的开发中，往往会有这样的感觉，前端三大件HTML、CSS、JS，以及会经常用到的vue、webpack、less等内容都学了，但是还是写不动项目。原因就在于，项目中有一些“粘合剂”般的内容属于上面的范畴或者属于上面范畴里面我们在学习时不太容易留意到的内容，但这些“粘合剂”在攒起整个项目的骨架中扮演了很重要的角色，不搞懂它们，就会给人一种前端已经学了，但是还是接手不动项目的感觉。

系列的前文中，我们已经从0开始入门前端三大件HTML、CSS、JS，以及会经常用到的vue、webpack、less等内容，并且从0一步搭建了一个vue项目出来。基于这个架子我们开发了学生管理模块。虽然前文每一步都讲得很清楚，跟着文章能一步步做出来，到这里我们就来解决一下项目中这些"粘合剂"的问题。

来到一切的入口main.js，秘密就藏在这里面。看到main.js我们就要提出几个疑惑了：

使用UI框架的时候为什么是Vue.use(ElementUI)喃？Element作为依赖为什么不像其它依赖一样在要用到的组件内部引入它喃？

为什么使用我们自定义路由（router）的时候，要去new Vue{router,render:h=>h(App)}喃？这一步是干什么？我们自定义的路由又是怎么实现的？

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import 'font-awesome/css/font-awesome.min.css'
import router from './router'
import service from './utils/service';

Vue.use(ElementUI)
//挂载到原型，可以在全局使用
Vue.prototype.service=service;
Vue.config.productionTip = false

new Vue({
  //挂在router
  router,
  render: h => h(App),
}).$mount('#app')

除此之外还有一些问题，诸如：

export用来做什么？怎么用？

Vue的生命周期钩子函数

等等问题

可以说掌握了HTML、CSS、JS、Vue、node.js、less、webpack、ts这些基础必备的前端技能后，还要搞明白本文所提到的这些很散的知识点，才能完全比较顺畅的在当前流程的前端项目的架子下进行上手开发。

2.export

export是es6开始出现的新语法，允许全局暴露变量、方法、对象出去，方便在其它地方调用。export一般和import配合使用。

代码示例：

mathOperations.js

// 导出一个名为 multiply 的函数
export const multiply = (a, b) => a * b;
// 导出一个名为 divide 的函数
export const divide = (a, b) => a / b;

导入并使用

// 导入 mathOperations 模块中的 multiply 和 divide 函数
import { multiply, divide } from './mathOperations';

// 使用导入的函数
console.log(multiply(10, 5)); // 输出 50
console.log(divide(20, 4)); // 输出 5

在vue中会使用export来对外暴露组件:

export default {
  name: "HelloWorld",
  data() {
    return {
      message: "JAVA天下第一",
    };
  }

上面的代码其实就是用export来暴露了一个对象。要注意的是这是标准的es6语法，在es6中允许函数进行简写，前面不用function修饰，所以data(){}是合法的语法。

export default和export的区别：

export default一个模块（一个js）中只能有一个，用来导出这个模块中所有要对外暴露的东西。

export一个模块（一个js）中可以有很多个，用来分散导出想对外暴露的所有东西，export需要跟上名称。

3.Vue.use()

当我们在使用诸如ElementUI之类的全局都要用到的东西时，会用以下语法来注册它们：

import Vue from 'vue'
import ElementUI from 'element-ui';
Vue.use(ElementUI);

vue中有一个Vue构造器，所有vue组件都是基于这个Vue构造器来进行构造的，这个构造器允许向其中注册各种Vue插件，以实现各个vue组件中都能使用到注册插件的效果。ElementUI就是一种vue插件，vue插件需要满足一些标准，就能被Vue构造器识别。

当不用Vue.use()时，要在组件中用到ElementUI中的组件时，就会是以下效果：

<template>
  <div>
    <el-button>默认按钮</el-button>
  </div>
</template>

<script>
import ElButton from 'element-ui/lib/button'; // 导入 ElButton 组件

export default {
  components: {
    ElButton, // 注册 ElButton 为局部组件
  },
};
</script>

components是专门用来暴露组件的属性。

这时候可能会有一个疑惑：

为什么要export喃？import了还不够吗？

光是import不行，因为import可以import很多内容，js的依赖层级也可能很复杂很深，通过import来编译，性能会炸掉，不好根据import来编译<el-button>标签，所以用export机制来将依赖的组件全部暴露出去，方便编译。

4.Vue.component

5.路由

main.js是程序的入口，脚手架搭建出来就会有new Vue()的代码段，router是Vue的一个成员变量，在new Vue的时候可以指定自定义的router:

import router from './router'

new Vue({

 //挂在router

 router,

 render: h => h(App),

}).$mount('#app')

，.mount 或 .$$mount（在某些版本中是 $mount）是 Vue 实例上的一个方法，用于将 Vue 实例挂载到 DOM（文档对象模型）上。必须将Vue示例挂载到HTML元素上，Vue才会被浏览器解析出来。

自定义的router：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
    routes:[
        {
            path:'/',
            redirect:'/login',
            hidden:true,
            component: ()=>import('@/components/Login')
        },
        {
            path:'/login',
            name:'Login',
            hidden:true,
            component: ()=>import('@/components/Login')
        },
        {
            path:'/home',
            name:'学生管理',
            iconClass:'fa fa-users',
            //默认转跳到学生管理页
            redirect:'/home/student',
            component: ()=>import('@/components/Home'),
            children:[
                {
                    path:'/home/student',
                    name:'学生列表',
                    iconClass:'fa fa-list',
                    component: ()=>import('@/components/students/StudentList'),

                },
                {
                    path:'/home/info',
                    name:'信息列表',
                    iconClass:'fa fa-list-alt',
                    component: ()=>import('@/components/students/InfoList'),

                },
                {
                    path:'/home/infos',
                    name:'信息管理',
                    iconClass:'fa fa-list-alt',
                    component: ()=>import('@/components/students/InfoLists'),

                },
                {
                    path:'/home/work',
                    name:'作业列表',
                    iconClass:'fa fa-list-ul',
                    component: ()=>import('@/components/students/WorkList'),

                },
                {
                    path:'/home/workMent',
                    name:'作业管理',
                    iconClass:'fa fa-list',
                    component: ()=>import('@/components/students/WorkMent'),

                }
            ]
        },
        {
            path:'/home/dataview',
            name:'数据分析',
            iconClass:'fa fa-bar-chart',
            component: ()=>import('@/components/Home'),
            children:[
                {
                    path:'/home/dataview',
                    name:'数据概览',
                    iconClass:'fa fa-list',
                    component: ()=>import('@/components/dataAnalysis/DataView'),

                },
                {
                    path:'/home/mapview',
                    name:'地图概览',
                    iconClass:'fa fa-line-chart',
                    component: ()=>import('@/components/dataAnalysis/DataView'),

                },
                {
                    path:'/home/travel',
                    name:'旅游地图',
                    iconClass:'fa fa-line-chart',
                    component: ()=>import('@/components/dataAnalysis/ScoreMap'),

                },
                {
                    path:'/home/score',
                    name:'分数地图',
                    iconClass:'fa fa-line-chart',
                    component: ()=>import('@/components/dataAnalysis/TravelMap'),

                }
            ]
        },
        {
            path:'/users',
            name:'用户中心',
            iconClass:'fa fa-user',
            component: ()=>import('@/components/Home'),
            children:[
                {
                    path:'/home/user',
                    name:'用户概览',
                    iconClass:'fa fa-list',
                    component: ()=>import('@/components/users/User'),

                }
            ]

        },
        {
            path:'*',
            name:'NotFound',
            hidden:true,
            component:()=>import('@/components/NotFound')
        }
    ],
    mode:'history'
})

6.生命周期钩子函数

Vue.js 提供了一套生命周期钩子函数，用于在组件的不同阶段插入回调函数的，这些阶段包括组件从创建到销毁的整个过程。Vue 2.x 和 Vue 3.x 的生命周期有所变化，尤其是在 Vue 3 中引入了组合式 API。以下是 Vue 2.x 的生命周期钩子函数及其简要说明，以及一些代码示例：

常用到的无非就是创建时的前置操作，销毁时的前置操作。

创建时的前置操作：

   export default {
     data() {
       return { message: 'Hello from created hook!' };
     },
     created() {
       console.log(this.message);
       // 这里可以进行数据的获取或其他初始化操作
     }
   };

销毁前的前置操作：

   export default {
     beforeDestroy() {
       console.log('Component is about to be destroyed...');
       // 清理工作
     }
   };

销毁后的前置操作：

   export default {
     destroyed() {
       console.log('Component is destroyed.');
       // 执行必要的清理操作
     }
   };