• 前端工程化学习笔记


    Node.js入门

    • node.js分LTS(稳定版)和current版(新特性版)
    • 查看版本node -v
    • Path环境变量与命令关系:在cmd执行命令时系统会去配置的这些目录找命令位置。
    • js = ECMAScript + DOM + BOM (DOM、BOM是浏览器支持的)
    • NodeJs = ECMAScript + Node模块API,系统模块即Node提供api的模块。
    • cmd工具执行js(装好NodeJs)
    • node → 输入js代码就可以跑了 —— 体验类似chrome的控制台
    • node执行js文件:cd到js目录cd nodenode js文件名称.js技巧:浏览到文件目录,然后shitf+右键+打开powershell或在地址栏cmd,打开命令工具 → node + 一直按tab可选文件或输几个字符按tab
    • js开发两大弊端:文件依赖,命名冲突。通过模块化解决这样的问题。
    • 模块开发类似台式电脑(TCL显示器+金士顿内存条+...),如果显示器坏了可以换个新的
    • NodeJs规定一个js文件就是一个模块,模块内定义变量和函数默认情况下外部无法得到。用exports对成员进行暴露,require(es6是import)导入其他模块
    • exports是module.exports的别名(地址引用关系),导出对象最终以module.exports为准。
    • 文件模块(fs)
    const fs= require('fs');//导入文件模块
    var c = fs.reaFile('文件路径','文件编码(可选)',回调函数);
    var c = fs.writeFile('文件路径','数据',回调函数);
    
    • nodeJS回调函数,也叫错误优先回调函数,默认第一个参数是返回错误对象。
    • 第三方模块(包),两种存在形式:js文件(一般本地安装,默认当前项目里) 、 命令行工具(一般全局安装,装到公共目录,所有项目都可使用),辅助项目开发。
    • npmjs.com是第三方模块存储和分发仓库。通过npm命令安装和卸载模块。
    • 下载模块:npm install 模块名@2.6.5(版本号选填)会被下载到项目根目录的node_modules文件夹。
    • 删除模块:npm uninstall 模块名@2.6.5
    • 文件保存后执行该文件,可以用nodemon命令工具代劳。npm install nodemon -g——全局安装,方便电脑上其他项目使用。执行命令后只要没飘红就说明安装成功。

    • Nexus Repository Manager搭建自己的npm包管理系统。

    • nrm(npm registry manager )是npm的镜像源管理工具,有时候国外资源太慢,使用这个就可以快速地在 npm 源间切换

    • Gulp自动化辅助工具的使用:

    • 1.使用npm install gulp下载gulp库文件
    • 2.在项目根目录下建立gulpfile.js文件
    • 3.重构项目的文件夹结构src目录放置源代码文件,dist目录放置构建后文件
    • 4.在gulpfile.js文件中编写任务(js代码).
    • 5.在命令行工具中执行gulp任务
    • gulp提供的方法:
    gulp.src():获取任务要处理的文件
    gulp.dest():输出文件
    gulp.task):建立gulp任务
    gulp.watch():监控文件的变化
    
    • gulpfile.js写任务代码入门
    • gulp提供方法少,丰富功能都是通过插件方式实现:css压缩、less转化、js混淆等。各类插件使用套路:下载插件,引用插件,按该插件说明写gulp代码,通过命令执行即可。
    • package.json文件,记录了项目信息(项目名称、版本、作者)和依赖的包,用npm init -y会在项目根目录生成改文件。
    • main,程序入口。
    • scripts,编译本地开发和打包发布等命令,命令简写,执行nmp rum 别名
    • dependencies,项目依赖的第三方模块。命令npm intall会下载此节点所有模块到node_modules中。
    • 依赖:项目依赖(在dependencies节点下),开发和运营都需要的第三方包。开发依赖:开发过程使用,上线后不需要的依赖,如gulp工具,此类依赖在devDependencies节点下。
    • npm install --prodiction只会按照项目依赖,不装开发依赖。
    • package-lock.json,锁定包版本,记录模块间依赖。
    • require('./find.js')引用模块,不写后缀则有他查找规则:找同名js文件,无则找同名文件夹里的index.js,仍无则找find文件夹下package.json里main的文件,最后会抛异常。不写路径,则认为它是系统模块,从node_modules中同名文件夹。
    • require('find'),会认为是系统模块,不是则有一套查找规则。
    • web服务器:node软件
    • nodeJs即js是事件驱动的语言。

    Vue.js到前端工程化(webpack打包,以及Vue-cli3和Element-UI的使用)

    • 每个模块只能使用一次导出export default {age,showInfo}(默认导出),否则会报错。按需导出不限个数。
    • import * as alasql from "alasql"; 通过*来批量接收,as 来指定接收的名字
    • import { SysMgr,SysParaMgr as 别名, Util } from "sj.sys";按需导入多个
    • import "./m2.js",直接导入并执行模块代码。
    • 相对路径的层级关系
    同级目录用:./或者什么也不写 
    上级目录用:../ 
    下级目录用:目录名/ 
    根目录    :/
    
    • 如:srcpagescisa.ts导入util模块
    import { CommonUtil } from '../../../components/util/util';//相对路径:srccomponentsutilutil.ts 
    
    • webpack是前端打包工具。提供友好的模块化正常、代码压缩混淆、处理js兼容问题、性能优化等,提高程序员开发效率。
    • webpack默认只能打包js文件,非js文件需要loader加载器才可以正常的打包。
    less-loader 可以打包处理.ess相关的文件
    sass-loader 可以打包处理.scss相关的文件
    url-loader  可以打包处理css 中与url路径相关的文件
    
  • 相关阅读:
    Validate US Telephone Numbers
    7月份总结
    Arguments Optional
    Everything Be True
    手机开发网页模板(20140124)
    整站开发初始化
    switch滑动开关
    js 面向对象
    Bootstrap 导航栏
    Bootstrap 标签页
  • 原文地址:https://www.cnblogs.com/anjun-xy/p/14364080.html
Copyright © 2020-2023  润新知