工作日记（九）：完整项目开发之编写前端vue代码

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框架，类似但还是不太一样），感觉好多标签甚至不如原生的好用。

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