前端项目开发者笔记 — 第一份实习

2019年12月24日,人生中的第一份实习。实习的公司虽然不大,但是团队氛围很好,带我的前辈们也特别好,真的非常感谢他们对我的帮助。实习过程中前辈给的建议:养成做技术总结文档的习惯。重视变成思想和底层技术。开发人员以后的职业出路可以是:资深工程师、创业、管理层(但是不能丢技术)。如果只做前端以后的职业发展会受限,我可以先从前端切入,前后端都要学习,以后才能成长为成架构师。开发人员三年是一个成长阶段。人无远虑,必有近忧。保持终身学习的思想。

  第一份实习过程中遇到的问题及解决方法 —— vue 前端实习生
* Element UI 在实际项目开发中用到的很多,传送门。如果有时间的话最好学习一下小程序。
1 vue 项目来发前最好新建一个代码风格配置文件:.editorconfig,该文件也可直接导入到已有项目,导入之后,如果项目之前代码不规范,可以通过:ctrl+alt+l 进行格式化。vue 项目给路径配置别名、统一代码风格配置
2

项目的文件路径用首字母小写的驼峰命名,比如:src/views/home/childComps。.vue组件文件用首字母大写的驼峰命名法。

3 项目中的静态资源,比如 css 样式和 img 图片,最好在 src 下新建 css 和 img 文件夹来存放,css 和 img 文件夹下可以针对不同组件新建子文件夹,存放指定组件的 css 和 img 资源,这样做的目的是使项目目录更加清晰,方便后期资源查找和项目维护。
4 vue.config.js 配置文件的端口号和域名,自己改的不要往上 git 代码托管工具上提。
5 vue项目中的 vue.config.js 配置文件,在修改之后需要重启服务 npm run serve。启动服务可以到 webStorm 编译器进行 npm 简单配置,+ npm serve。这样就不用每次重启服务都手动 npm run serve 了,可以直接一键运行。
6 不确定后台服务是否启动时,可以通过 Win + R cmd 命令行:ping 域名+端口,可以判断是否联通。
7 用 git 在 push 项目之前,先拉一下 ↙ 最新的代码,然后 √ ,直接 commit 即可(看到不想提交的文件,比如 vue.config.js 配置文件一般不提交,可以直接右键 revert 或删除)。commit 之后再 git push 即可,如果没有进行全局配置,则右键项目 git push。
8 VueRouter 的两种模式,hash 模式和 history 模式,history 模式下的 url 路径没有 # 号。修改模式的方法是在 VueRouter 的实例下写上如下代码:mode:'history' 或 mode:'hash'。这两种模式的区别:传送门
9 关于 git 克隆远程分支的问题:传送门

git 中 checkout 分支、tagname 的时候,不需要全写名,按 Tab 键可以自动补全。

10 如果想清空命令行里的信息,可以执行 cls 命令,即输入 cls 回车
11 Element UI 里的表格多选框,有一个 selectable 属性,仅对 type=selection 的列有效,类型为 Function,Function 的返回值用来决定这一行的 CheckBox 是否可以勾选。Function(row, index)
12

Element UI 官网的 Table 表格中提到:通过 Scoped slot 可以获取到 row, column, $index 和 store(table 内部的状态管理)的数据,我们可以理解为:tableData 是给到 table 的数据集合,scope 是 table 内部基于 tableData 生成出来的数据表格,我们传进去的 tableData ,在 table 内部生成了类似于 Excel 的 scope,因此,通过scope.row.date,我们就可以读取到每一行中的date。

<el-table :data="tableData" style="width: 100%">

    <el-table-column label="日期" width="180">

        <template slot-scope="scope">        <!--template自定义渲染-->

            <span style="margin-left: 10px">{{ scope.row.date }}</span>

        </template>

    </el-table-column>

<el-table>            如上述代码,可以在 <template slot-scope="scope"> 中通过 scope.row.键名,获取所在行的某一列的数据。同时可以添加点击事件,也可以使用过滤器;传送门

13 Array 数组还有一个 includes() 方法,使用方式:array.incudes(element) ,返回 ture/false
14 JavaScript 日期处理类库:moment.js
15 使用 npm 安装依赖比较慢,可以设置 npm 为淘宝镜像:npm config set registry http://registry.npm.taobao.org,然后可以执行 npm config get registry 查看镜像地址,如果没问题的话会出现 "http://registry.npm.taobao.org"。最好装个 yarn。
16

vue cli 运行项目之后会抛出两个地址:Local 和 Network ,Local 地址是本地地址,只能在自己的计算机上访问。Network 地址是网络地址,和你处于同一局域网内的人可访问该地址。比如:你的同事需要访问你正在做的项目,可是你并没有部署上线,那么他就可以通过访问 Network 这个地址浏览你的项目。又或者,你正在做一个 web 移动端项目,你需要在手机上浏览效果,你打开手机浏览器输入 Network 这个地址(前提是你和电脑处于同一局域网,例如你连接了你们公司的 wifi),即可浏览。注意:生成的 Network 地址是不可改变的,因为他是你本机的 IP 地址,能改变的只有端口号。

在 vue-cli 3.0 中,设置 host:0.0.0.0,则生成 Local 和 Network 网络环境。
Local:http://localhost:端口号  >例:http://localhost:8080  、Network:http://本机ip+端口号 >例:http://192.168.1.134:8090

17 127.0.0.1 是回送地址,指本地机,一般用来测试使用。回送地址(127.x.x.x)是本机回送地址(Loopback Address),即主机 IP 堆栈内部的 IP 地址,主要用于网络软件测试以及本地机进程间通信。
18

网站上看到中意的图片,想要拿到该图片的网址,以便自己开发使用:右键检查 → Open in new tab → 复制网址。

19 MAC(Media Access Control或者Medium Access Control)地址,意译为媒体访问控制,或称为物理地址、硬件地址,用来定义网络设备的位置,在 OSI 模型中,第三层网络层负责 IP 地址,第二层数据链路层则负责 MAC 地址,因此一个主机会有一个 MAC 地址,而每个网络位置会有一个专属于它的 IP 地址。MAC 地址是网卡决定的,是固定的。
20 快速拿到<meta>,检查网页源码,然后复制黏贴大法好:<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no,minimal-ui">
21 Element UI 的分割线:传送门、2.0.11 版本没有分割线功能。
22 修改 Element UI 的原始样式,需要到项目目录下的 theme/index.css 文件中查找相应的样式做修改。
23 记录一下因前端路由写错一个字母调试了半天。以后尽量仔细点,不要出现这种缺失字母的问题,问题挺小的,但是很难排查。
24

element ui el-checkbox 多选框竖向排列:在 el-checkbox 中加入样式:style=" display : block;"

   
  websocket 是一个请求与响应的常连接 ***
发布了188 篇原创文章 · 获赞 13 · 访问量 7248

猜你喜欢

转载自blog.csdn.net/Marker__/article/details/103726869