1. 项目工具相关
1.1. ESLint代码检测工具
ESLint属于一种QA工具,是一个ECMAScript/JavaScript语法规则和代码风格的检查工具,可以用来保证写出语法正确、风格统一的代码。
ESLint旨在完全可配置,它的目标是提供一个插件化的javascript代码检测工具。
1.2. nginx
Nginx 是俄罗斯人编写的十分轻量级的 HTTP 服务器,Nginx,它的发音为“engine X”,是一个高性能的HTTP和反向代理服务器,同时也是一个 IMAP/POP3/SMTP 代理服务器。
Nginx 以事件驱动的方式编写,所以有非常好的性能,同时也是一个非常高效的反向代理、负载平衡。其拥有匹配 Lighttpd 的性能,同时还没有 Lighttpd 的内存泄漏问题。
1.3.docker
Docker 是一个开源的应用容器引擎,实现了应用程序的带环境安装。Docker 将应用程序与该程序的依赖,打包在一个文件里面,属于 Linux 容器的一种封装。
1.4. Mock.js
生成随机数据,拦截Ajax 请求。 使前后端分离, 让前端攻城师独立于后端进行开发。 增加单元测试的真实性. 通过随机数据,模拟各种场景。
1.5. Fly.js
一个支持所有JavaScript运行环境的基于Promise的、支持请求转发、强大的http请求库。可以让您在多个端上尽可能大限度的实现代码复用。
引入之后,可以对fly实例进行全局配置、添加拦截器、发起网络请求。
1.6.webpack
2.阅读列表
2.1.从开发环境到vue框架
之前学习使用vue的时候,看视频和文档,大都是用简单的单文件demo练习,实际开发环境中总是会使用到npm、脚手架、eslint、babel等,开发中也会用到一些东西,比如vue-router、mock、字体文件、CSS预处理器、组件库。
npm是jacascript包管理工具,作用就和python的pip差不多,可以下载、上传包,自动解决依赖。
安装好npm之后,就可以方便的下载其他东西。
脚手架工具用于搭建一个项目的基本环境,如:目录结构、本地调试、代码部署、单元测试、热加载(文件改动后,以最小的代价改变页面相应的区域)。
脚手架工具有webpack、vue-cli、create-react-app、yoman,网上也有很多自建脚手架的教程。npm init的时候可以指定脚手架工具,或者使用npm install安装相应的脚手架后使用脚手架的命令。
脚手架工具搭建好的项目中,一般会安装有eslint、babel。eslint用于检测js代码,常用于统一代码风格(风格不符合配置的规则就会报错提示)。babel可以将ES6代码转换成ES5代码使其能在不支持ES6的浏览器上工作,这样就可以放心的使用ES6开发了。
2.2.commitlint+husky规范commit 日志
在团队协作开发时,定义一个commit信息的规范,在commit时自动检查是否符合规范,并提示修改。
2.3.在小程序、mpvue中使用flyio发起网络请求
Fly.js 一个基于Promise的、强大的、支持多种JavaScript运行时的http请求库。它使得我们可以使用一份http请求代码在浏览器、微信小程序、Weex、Node、React Native、快应用中都能正常运行。
3.代码
3.1. [{},{},...]复制数组并在{}中增、删、改字段
? 增、改b = c.map((item,index)=>({...item,html1:"4444"}))
3.2. 自定义组件与插槽(小程序)
父组件通过 Prop 向子组件传递数据,通过插槽向子组件传递内容。
插槽:用于父组件向子组件传递node节点,在子组件中开一个槽<slot></slot>
,父组件可以向这个槽中插入东西(元素、组件)。
使用name在子组件中声明一个具名插槽:
<slot name="up"></slot>
在父组件中使用slot属性讲元素插入相应的插槽。
<div class="tmpl" slot="up">
<span>菜单1</span>
<span>菜单2</span>
<span>菜单3</span>
<span>菜单4</span>
<span>菜单5</span>
<span>菜单6</span>
</div>
作用域插槽: 用于子组件向父组件传递数据
(下述例子是匿名插槽)
在子组件中为插槽绑定了数据:
<slot v-bind="slotData"/>
在父组件中使用数据:
<Child>
<h1 slot-scope="abc">{{ abc.msg }}</h1>
</Child>
3.3. 遍历
- while 、 for
- for...of 对可迭代对象,迭代属性值
- for...in 以任意顺序 迭代属性名称
下面是数组特有的一些遍历方法
- forEach()
- map() 会返回处理后的新数组
- reduce()
- filter() 返回符合条件的数组
- every()
- some()
3.4. 微信小程序自定义组件
3.5. 给子组件传参,并用参数设置样式
设置样式的properties(一般取String),父组件传入后,子组件设置到相应元素的style属性中去。
原文地址:https://www.cnblogs.com/mthz/p/week2.html