猿急送>

长沙前端兼职程序员

ID：387855

Ann_

前端开发

公司信息：
蓝拓商务贸易公司

工作经验：
5年

兼职日薪：
500元/8小时

兼职时间：
可工作日驻场（自由职业原因）

所在区域：
长沙
全区

技术能力

我主要掌握了基于Vue的Next.js（即Nuxt.js）和Tailwind CSS这两项技术能力。Nuxt.js是一个强大的Vue.js框架，专注于服务器端渲染（SSR）和静态网站生成，使得构建高性能的Web应用变得更加高效。我能够利用Nuxt.js的路由功能、模块系统以及中间件，为客户提供灵活且快速的解决方案。此外，我熟悉其数据获取方法，如asyncData和fetch，能够根据项目需求选择合适的数据获取策略。

另一方面，Tailwind CSS是一种实用优先的CSS框架，它极大地简化了样式的编写过程。通过使用Tailwind，我能够快速构建响应式和美观的用户界面，而无需编写大量自定义CSS。我擅长使用Tailwind的各种工具类，能够灵活地进行布局、间距和色彩的调整，从而提升开发效率和用户体验。

结合这两项技术，我能够为客户提供高效、可维护的Web解决方案，确保项目在功能和视觉上的完美结合。同时，我也注重代码的可读性和可复用性，以便于团队协作和后续维护。我始终保持对新技术和最佳实践的学习，以便为客户提供最新的解决方案。

项目经验

项目技术:vue3,nuxt3,fetch,tailwind, echarts, lodash, ag-grd, element-plus, moment,
项目地址：https://dev.elcuk-erp.com/
项目描述:此项目是基于 vue 3开发的公司内部的办公系统,主要用于公司货物的对外贸易以及公司内部人员的管理,之前使用的技术是 jQuery ,现在对系统进行更新换代。使用的框架是 nuxt。
项目职责:
1.项目主要由财务,海外仓,市场,奥莱,产品,采购,物流,系统等模块。
2.项目是由 nuxt 3做的底层架构,网络请求使用的 fetch 来做的架构
3.使用@vueuselrouter 将请求 table 的参数同步的路由中,使用户通过 url 可以直接访问。
4.通过 store和 slot 来封装权限组件。
5.通过 ag-grid 插件来将 table 实现虚拟列表,实现性能优化。
6.通过 tailwind 插件书写 css。
7.将 EIMessageBox,EINotfication,moment 抽取成组件,优化代码。

项目难点：
1.项目中有一些不规则的table数据结构，需要转换成el-table所要求的数据结构来渲染。el-table
要求的数据结构是数组每一个对象是一行数据，后端返回的数据是每一列是一个对象。第一列数据是前
端写死的。但是其他列的表头和cell是由后台返回的数据，所以还需要遍历 el-table-column。
解决：首先let c=第一列。然后let a=后台返回的数据 a.map拿到表头的数组，再循环渲染表头。使用lodash的_.keyBy(a)将后台返回的数据转成对象，对象的key就是每一个column。然后再computed属性里面 c.map((m,k) =>{
let row = {nane: m}; 表头.forEach(n => row[n] = {value: 转成对象[n][k] });
return row; //这样就完成了每一项的定义；
})；
最后将这个计算属性放进el-table 再循环的table-column 的插槽里面通
scope.row[每一项表头].value拿到数据。

2.由于每个页面请求数据都需要项目id，所以使用store管理项目id，但是每个菜单的主页面都可以修改项目，用户打开多个主页面后如果切换项目，那么其他页面刷新后项目也会随之更改。
解决：查看文档，nuxt路由支持传递一个params id, 所以将整个项目代码用一个文件夹包裹，在app.vue里面将项目id setStore, 那么跳转页面后都会从路径上拿到项目id 并将它setStore,。并将切换项目id的select封装成组件，在每次切换项目时都setStore且刷新一下页面。

3.将后台返回的数组分成 <= 3个数组。
解决：需要通过索引来截取。首先将数组的长度除以3，得到每一个数组有几个item，来判断从哪里开始截取。定义一个索引，不能大于3，最后通过循环索引，在循环里面截取后台返回的数组。
let size = Math.floor(list.length / 3);
let index = size > 3 ? 3 : size;
for (let i = 1; i <= index; i++) {
arr.push({ purview: list.slice((i - 1) * size, i * size) });
}

4.使用亚马逊的 json-schema 生成form 表单。使用 vue 提供的第三方包生成schema 表单。
但是没有渲染。
解决：通过排查，这个插件在vue项目里面是可以被渲染的，而在本项目中未被渲染，原因是 nuxt 的底层是做的服务端渲染，而这个第三方包是不支持的。所以需要在nuxt 提供的方法里面将这个第三方包做成服务端渲染。

5.写一个富文本组件，在富文本组件中添加一个输入@就会弹出用户列表点击用户将就会输入到富文本里面。
解决：规定使用trix富文本包。但是这个富文本没有用户列表的功能。
1.写一个用户列表的盒子，将他影藏起来，盒子使用fixed定位，高度通过光标高度计算。
2.监听富文本的 @input 如果输入了@，就显示用户列表。
3.点击某一个用户后，将@通过replace替换成用户名，这样也可以影藏用户列表。