首页 > 技术文章 > 工作日记(九):完整项目开发之编写前端vue代码

codeToSuccess 2020-07-17 18:20 原文

2020.7.17

今天上午领导开例行站会,组长大概汇报了下任务进度,暂时没有遇到开发上的问题。

由于本人的接口已经开发完了,因此准备找点新活;后台一人一个接口,暂时不需要帮他们,就让组长问了下前端开发的进度。

不问不知道,一问吓一跳,前端伙伴还没有开始编写前端页面。

-------------------------------------------------------------------------------------------

本人所在的小组需要2个前端页面(细分的话需要4个前端页面,不过有3个页面都类似),看起来页面数量少,不过单个页面的功能都不少。

-------------------------------------------------------------------------------------------

好吧,前端伙伴是新调来的(2人),不熟悉需求,并且还有之前的项目需要优先处理。

-------------------------------------------------------------------------------------------

结果,就是本人开始了开发前端vue页面的工作。

已做好准备,本人的代码是保险措施,优先采用专业前端开发的页面;本人的代码如果到时候白写了就白写了吧,就当学习了。

-------------------------------------------------------------------------------------------

正式开始编写前端vue页面

1.首先,本人想搞清楚vue框架启动时的加载顺序;百度了不少文章,终于整明白了,简要记录如下:

(1) 执行:项目/public/index.html文件(这个页面的title标签可修改)

(2) 执行:项目/src/main.js文件

(3) 加载:项目/src/App.vue文件,用app.vue的templete替换index.html中的<div id="app"></div>  

      PS:App.vue文件内容很简单,如下:

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

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

请注意这个【<router-view />】标签,下一步会提到。

(4) main.js中注入了路由文件,将对应的组件渲染到router-view中。

(5) 路由文件:项目/src/router/index.js中,有一个【redirect: '/mylogin'】参数,这个参数决定了vue项目启动时显示的第一个页面是什么(例如mylogin页面),url具体对应的后缀为vue的页面也在这里配置。

PS:刚下载好的项目包中已包含src/router/index.js文件,本人发现同事将原本的文件重命名为index000.js用来备份,又新建了一个index.js文件。

 

2.找到项目/src/views目录,新建一个文件夹task,准备开发页面。这个文件夹即是本小组专用的。

3.创建文件:项目/src/views/task/index.vue,编写本小组的index页面。

4.创建文件夹与文件:项目/src/views/task/componets/other.vue,编写本小组需要的相关子页面。

后记

使用一下午时间将两个基本页面的布局大体实现了(html、css,虽然都堆到了一个vue文件中,不过还是可以分成这几部分),不过相关的js还没有实现。

自我感觉效率还可以,由于对vue框架不是很熟悉(之前用过angular框架,类似但还是不太一样),感觉好多标签甚至不如原生的好用。

今日已到下班时间,剩下的下周再说。

推荐阅读