常用工具及配置
本地dns解析
- 帮助我们上线后,本地调试
- 原本dns做的事情 我们可以本地先做dns解析找到对应的ip地址
解析方法- 在c/windows/System/drivers/etc/hosts 右键属性>安全>编辑> User当前用户>完全控制√ 确定
- 之后用记事本或者vscode 来设置域名的默认ip
- 例如:127.0.0.1 www.163.com
- #叫注释 切换访问线上
配置环境变量
- 例如:
如何将node设置为全局 >打开PC的属性 > 高级系统属性 > 环境变量 > 系统变量中的path > 将node放入配置环境中
Sass
-
首先安装ruby(下载安装)
-
gem -v
-
gem install sass 安装sass
-
gem install compass
-
sass -v 查看版本
-
安装成功
-
安装beautify css/sass/scss/less和Sass 插件
-
新建sass文件夹和sass文件
-
sass ./路径/sass文件 ./目标路径/css文件
-
侦听转换
-
sass --watch ./sass:./dist
node安装
- 安装nvm 管理员身份运行 必须装在c盘(自行下载)
- 打开终端
- nvm -v
- 配置环境变量 将nvm配置到环境变量中
- 找到安装好的nvm地址
- c>用户>asus>appData>roaming>nvm>setting
- 添加淘宝镜像:
- node_mirror:https://npm.taobao.org/mirrors/node/
- npm_mirror:https://npm.taobao.org/mirrors/npm/
- nvm install 14.3.0/12.16.3/12.16.0/10.12.0/10.9.0
- 所有版本全部安装一遍
- nvm ls 查看版本
- nvm use v12.16.0 切换版本
gulp 打包工具
- nvm ls
- nvm use v10.12 切换版本
- nvm ls 查看版本
- npm i gulp@3 -g 全部安装为了使用gulp命令
- npm i gulp@3 --save-dev 或者/D 开发依赖
- npm init -y初始化
- 新建gulpfile.js 名称固定不可更换
- var gulp=require(“gulp”)
- gulp.task(“a”,function(){
console.log(“aaa”);
})
typescript
- 终端:
npm i typescript -g 全局安装typescript
tsc -v 查看版本
ts和sass一样需要转换成为js
终端中 tsc a.ts a.js 方法一转换
tsc --init 初始化 形成一个tsconfig.json的配置文件 - 在配置文件中 module 转换为amd amd使用的require lib是前置库若有需要可以自行配置
- outDir 导出到的文件夹
- tsc -w或者–watch 来转换ts为js文件 开启转换
- 之后用node命令 运行转换过的js文件(可以用supervisor命令来调用js文件)
- 如果用es6 node搭建服务因为没有http导入 所以需要下载node API ts库插件 npm i @types/node 一定要下载到ts中
- declaration和declarationMap是生成ts.map文件 类似于接口
自动重启node服务
- 安装 npm install supervisor -g 下方的均可使用
- supervisor
- nodemon
- forever
- pm2
使用方法 supervisor 路径 // 修改代码后自动重启服务和node 使用方法一样
jquery导入方法
npm i jquery -S
- –save || -S // 运行依赖
- –save-dev || -D //开发依赖
<script src="jQuery地址"></script>
如何运行mjs文件
- 打开json的配置文件 找到scripts添加 “main”: “node --experimental-modules Main.mjs”
这个命令的意思是将后面的命令用main 来替代
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"main": "node --experimental-modules Main.mjs"
},
git 推送(cmd或者git Bash找到对应路径)
git init //初始化 管理仓库
git add . //将所有内容加入暂存区
git commit -m "说明" //形成历史版本
git branch dev //创建分支 如不需要可以不写
git branch // 查看分支
git checkout dev // 切换分支
git branch // 查看分支
git add . //同样推送分支内容到暂存区
git commit -m "dev" // 形成分支历史版本
新建仓库 //打开Google 打开git网址 新建一个仓库
git remote add origin 仓库地址 //复制仓库地址后,来进行推送
git push -u origin master // 推送主分支
git push -u origin dev // 推送dev分支
mongodb
-
进入mongodb官网 进入右边有个 Try Free[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
-
选择 On-Premises
-
选择MongDB Community Server
-
MongoDB Community Server 一般不下载最新版本 自行下载(4.0.21)
-
双击安装 遇到complete 点击进入**,取消Install MongoD as a Service** 然后下一步
-
取消 Install MongoDB Compass
-
直接安装到完成
-
自动安装在c盘 > Program Files > MongoDB > Server > 4.0 > bin
- 在这个目录启动cmd 使用mongod命令来运行
- mongodb 安装完成后,只是一个服务,没有磁盘空间来写内容
- 自己创建一个文件夹,位置随意,名称均为英文
- 在bin路径下使用cmd输入指令 $ mongod --dbpath e:data //这里后面为db的路径,根据你的文件夹位置决定的
- 这样就可以启动数据库了 // 启动的是服务黑窗口,是不能关闭的,关闭就无法使用了,这里放在这不用管即可
- 新建一个cmd进行数据库操作
-
为了使用方便把mongodb配置到环境变量
-
找到安装mongodb的bin目录,复制下路径,右键打开计算机属性,高级里面的环境变量,在系统变量中的path里面把路径粘贴进去这样我们在任意地方都可以启动服务了
-
桌面新建文本文档 txt 输入mongod --dbpath e:data 后保存 更改名称后缀名为bat
- 因为每次启动mongdb都需要命令行输入$ mongod --dbpath e:data,所以我们将它直接写好即可
- 更改后缀名为bat 每次开启Mongodb 先双击执行下这个bat文件放在一边即可
Robo 3T
mongodb的可视化工具
- 配合mongodb数据库使用
- 官网自行下载即可,可下载两个软件,一个免费软件,studio3T一个试用需要收费软件
- 直接安装即可
- 双击桌面bat文件开启服务,再打开Robo3T连接到数据库即可使用
Postman
- 测试请求工具
- 官网下载即可
- 使用(纯英文操作页面)
- 点击collections new一个collections
- 点击右侧上方的加号
- 选择get或者post等方式 地址和携带参数自行填写(post请选择body进行参数填写)
图片压缩,精灵图,轮播图网址
- https://tinypng.com/
- https://www.toptal.com/developers/css/sprite-generator
- https://www.swiper.com.cn/
Typora
- 程序员的word
- 自行安装(资源里有安装包)
art-template 前端使用方法
前端使用模板引擎
- 下载 npm i art-template
- 引入 template-web.js 文件
=> 文件引入以后会向外暴露一个 template 方法 - 准备一个 script 标签, 书写模板
- 因为 script 标签里面书写的内容不会显示在页面上
- script 因为有一个属性叫做 type=“text/javascript”
- 只要我们把 type 属性随便换成别的内容, 就不会当作 js 代码执行
- 推荐写成 text/html 或者 text/template, 因为会有代码高亮
- 给这个模板 script 标签书写一个 id 属性
- 为了捕获元素
- 使用模板渲染页面
- template 方法
语法: template(模板id, {}) - 模板 id , 就是你模板标签的 id 属性(必须是 id)
- {}: 在模板里面使用的数据, 没有传递一个空对象
- template 方法
模板语法
- 输出内容
- 原生 js 输出
<%= 变量 %> 不认识 html 格式
<%- 变量 %> 认识 html 格式 - 模板语法输出
{{ 变量 }} 不认识 html 格式
{{@ 变量 }} 认识 html 格式
- 原生 js 输出
- 条件判断
- 原生 js 输出
<% if () { %>
根据 if 条件决定 这个位置的内容是不是渲染
<% } else { %>
根据 if 条件决定 这个位置的内容是不是渲染
<% } %> - 模板语法输出
{{ if 条件 }}
{{ /if }}
- 原生 js 输出
- . 循环渲染
- 原生 js 输出
<% for () { %>
这个位置的结构会根据 for 循环渲染多少次
<% } %> - 模板语法输出
{{ each 数组 }}
{{ /each }}
- 原生 js 输出
<script type="text/html" id="tmp">
<% for (let i = 0; i < hobby.length; i++) { %>
<li><%= hobby[i] %></li>
<% } %>
<br>
{{ each hobby }}
<li class="{{ $index === 0 ? 'active' : '' }}">{{ $value }} ----- {{ $index }}</li>
{{ /each }}
</script>
const div = document.querySelector('div')
// 相当于在 模板标签里面拥有了一个叫做 title 的变量, 值式 '你好 世界'
div.innerHTML = template('tmp', {
title: '你好 世界',
str: '<span>我是一段超文本</span>',
boo1: true,
boo2: false,
hobby: ['吃饭', '睡觉', '打游戏']
})
webpack模块化打包
- webpack 为了可以正常运行必须依赖node 环境
- node 环境为了可以正常的执行很多代码,其中必须包含各种依赖的包 (可以使用npm i -dev导入package.json中记录的包)
- 全局安装webpack(请了解清楚所需版本)
- npm install webpack@3.6.0 -g
作者：程序员客栈
链接：https://www.zhihu.com/question/64606609/answer/1652726745
Responsively App：网页调试必备法宝
- 像我一样搞过前端的都知道，现在的大厂越来越重视网页在移动端的使用体验，是移动端的尺寸和型号太多，在不同的移动端上进行设备调试是个非常繁琐的工作。虽然Chrome 浏览器默认的工具也还不错，但是一次只能针对一种尺寸，开发成本相对还是高了一些。Responsively 最主要的特色就是你只需要在一台设备上进行任何操作，便会实时同步到所有设备上，并且可以在一个窗口里查看所有目标设备的情况，形成一个镜像交互的效果。让你在进行网页调试的时候，如虎添翼。
D3.js：网红级数据可视化工具
- 这个工具可能是最受欢迎和最广泛的Javascript数据可视化库，足足收获了80kstars。它的优势就是在于能够将有数据的文档，使用HTML，SVG和CSS转化为一个可视化的图表，让信息更直观更灵活。而且它的通用性很强，并不需要通过专用框架，就可以直接与现代浏览器的功能结合，像是canvas类图表, 无论你代码操作粒度再细, 放在react组件里的无非就是一个canvas元素.而D3可以把任意数据绑定到文档对象模型（DOM），与react更好的结合。
CodePen：实现新创意代码
- Codepen可以说是前端界的Dribbble，（一个展示设计和作品的网站）。它最大的存在意义，就是将HTML、CSS、JavaScript等创作出来的设计，更进一步的实现出来，把工具推向一个更真实的境地。它几乎支持所有你能够想到的库，也允许你添加外部资源，可以说是一块很好的实现创意的“画布”。所以如果你也是一个热衷于demo实现的设计师，那这里也将会是你研究技术、参观作品的灵感源泉。
bit.dev：很棒的组件中心
- 我一般用它来托管、记录和管理不同项目中的可重用构件。它最大的优势Bit可以轻松地在任何规模的项目和应用程序之间共享和管理组件。等于是只编写一次，就可以随处使用。而且它具有完全自动化的依赖性定义/分辨率和可扩展的版本控制，基本上满足设计系统所需，可以帮助你重新构建系统。它还允许在团队之间共享组件，从而允许你的团队与其他团队协作。能够提高你们的团队协作效率，加快开发进程。
Npkill：系统打扫型工具
- 前端开发者一定能了解，node_modules 这个庞大的文件夹，每次执行 npm install 的时候都会安装项目的依赖包以及依赖的依赖，它存在于我们的每一个项目中，随着时间越来越长，它会变得越来越大，占据了不少储存空间。
373
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
