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

本文涉及的产品
可视分析地图(DataV-Atlas),3 个项目,100M 存储空间
数据可视化DataV,5个大屏 1个月
简介: 【Vue实战项目】学完前端基础后,可能你还需要掌握这些才能接手开发项目

1.前言

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


在当前的前端项目的开发中,往往会有这样的感觉,前端三大件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来编译标签,所以用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.');
       // 执行必要的清理操作
     }
   };
相关实践学习
基于Hologres轻松玩转一站式实时仓库
本场景介绍如何利用阿里云MaxCompute、实时计算Flink和交互式分析服务Hologres开发离线、实时数据融合分析的数据大屏应用。
阿里云实时数仓实战 - 项目介绍及架构设计
课程简介 1)学习搭建一个数据仓库的过程,理解数据在整个数仓架构的从采集、存储、计算、输出、展示的整个业务流程。 2)整个数仓体系完全搭建在阿里云架构上,理解并学会运用各个服务组件,了解各个组件之间如何配合联动。 3&nbsp;)前置知识要求 &nbsp; 课程大纲 第一章&nbsp;了解数据仓库概念 初步了解数据仓库是干什么的 第二章&nbsp;按照企业开发的标准去搭建一个数据仓库 数据仓库的需求是什么 架构 怎么选型怎么购买服务器 第三章&nbsp;数据生成模块 用户形成数据的一个准备 按照企业的标准,准备了十一张用户行为表 方便使用 第四章&nbsp;采集模块的搭建 购买阿里云服务器 安装 JDK 安装 Flume 第五章&nbsp;用户行为数据仓库 严格按照企业的标准开发 第六章&nbsp;搭建业务数仓理论基础和对表的分类同步 第七章&nbsp;业务数仓的搭建&nbsp; 业务行为数仓效果图&nbsp;&nbsp;
目录
相关文章
|
2天前
|
前端开发 Shell 应用服务中间件
shell实战脚本1-前端打包脚本
```markdown 这是一个Bash脚本,用于自动化前端应用的更新流程:切换到`performance-appraisal-web`目录,检出`release`分支,拉取最新代码,使用自定义镜像源安装npm包,构建无登录模式,清理Nginx静态目录,复制构建结果,打包dist目录为`dist.zip`,清除旧zip,并将zip文件复制到临时目录。最后,列出临时目录内容并记录日志到`faban.log`。 ```
31 18
|
16天前
|
前端开发
react18【实战】tab切换,纯前端列表排序(含 lodash 和 classnames 的安装和使用)
react18【实战】tab切换,纯前端列表排序(含 lodash 和 classnames 的安装和使用)
18 1
|
2天前
|
编解码 前端开发 JavaScript
现代Web开发中的前端技术趋势与挑战
随着互联网的迅猛发展,现代Web开发中前端技术正日益成为关注的焦点。本文探讨了当前前端技术的主要趋势和面临的挑战,从性能优化到跨平台适配,为开发者提供了深入的洞见和解决方案。
|
10天前
|
JavaScript 前端开发 数据安全/隐私保护
【vue】 前端vue2 全局水印效果
【vue】 前端vue2 全局水印效果
9 0
|
11天前
|
JavaScript 前端开发 数据安全/隐私保护
vue 前端 邮箱、密码、手机号码等输入验证规则
vue 前端 邮箱、密码、手机号码等输入验证规则
24 0
|
11天前
|
前端开发 JavaScript
Vue前端渲染blob二进制对象图片的方法
Vue前端渲染blob二进制对象图片的方法
13 0
|
11天前
|
JavaScript 前端开发
【vue】 接口返回的preview是张图片,前端如何渲染
【vue】 接口返回的preview是张图片,前端如何渲染
10 0
|
11天前
|
前端开发 JavaScript Java
【vue】 前端 基于 vue-simple-uploader 实现大文件断点续传和分片上传
【vue】 前端 基于 vue-simple-uploader 实现大文件断点续传和分片上传
28 0
|
12天前
|
前端开发 JavaScript 安全
前端技术栈都有那些,需要学会啥才可以上手写项目?
【7月更文挑战第9天】 前端技术栈包括HTML/CSS/JS基础,熟悉Vue.js/React/Angular等框架,掌握Git、Webpack等工具,理解HTTP协议及安全概念。使用Node.js和编辑器提升效率,从基础到框架层层深入,实践项目以巩固知识,持续学习应对技术更新。
20 0
|
14天前
|
前端开发 JavaScript Java
开发做前端好还是后端好?
开发做前端好还是后端好?
13 0