前言 前端规范主要是为了让代码能有更好的可读性以及优雅性。不要为了规范而去规范，使用某些花里胡哨的写法，本质上是为了代码的维护性更强一些，所以才会制定规范来约束。...推荐-Vue实例选项顺序 推荐-Vue实例选项顺序 在Vue中，export default对象中有很多约定的API Key。...prettier: 代码格式化。强制格式化。 husky：本地的git钩子工具。 另外敏捷开发过程中，代码复查是至关重要的一环，团队需要使用工具辅助代码分析。...arrowParens: 'avoid', // 为单行箭头函数的参数添加圆括号，参数个数为1时可以省略圆括号 parser: 'babylon', // 指定使用哪一种解析器 jsxBracketSameLine...提交前强制格式化 在提交git时需要对整个项目执行format格式化，使得代码强制统一。格式化之后再用eslint检查语法错误，无误后把格式化后的代码用git add .添加进入。
此外，Vite还能提供热模块替换，这意味着我们在开发过程中，可以在浏览器中看到代码刷新，甚至可以使用它来编译项目的精简版本，并直接用于生产。...运行npm install sass --save-dev并重新启动观察程序后，就可以使用Sass满足我们的需求了。...在实际使用中Vite令人惊叹，我们可以在一两分钟内就建立一个非常高级的堆栈，并且能够轻松完成从JavaScript到TypeScript的转换以及从CSS到Sass的转换。...单页申请 接着我们来设置一个单页应用程序，试试Vue 运行npm init @vitejs/app并选择Vue模板后，可以获得Vite，Vue和一个来编译Vue的Vite插件。...开发人员经验 在以往的开发经验中，无论我们使用的是Grunt，Gulp，Rollup还是Webpack，这种大型复杂的项目都会花费不短的时间来调试并确保所有工具和插件都能正常运行。
这篇文章继续介绍脚手架中的交互处理。 什么是交互？ 说交互可能会引发一些歧义，我个人习惯将交互理解为客服，我们在购物的时候，客服会向你问一系列的问题，比如： 你的性别是？ 你的身高是？...等等问题，然后会根据你的需求，向你推荐合适的衣服。而Inquirer.js在命令行开发中则承担了这一角色，让我们根据使用者的需要，来做相应的处理。...比如vue-cli中的vue create命令，在创建项目时会问以下问题: 选择预设：Please pick a preset 选择特性：Check the features needed for your...，主要包括以下属性： message: 问题的描述 name: 问题答案值的属性名，可以理解为form表单prop choices: 选项列表 pagesize: choices过多时每页显示的个数 surfix...16.png 是否存为预设 17.png 打印用户的所有选择 13.png 总结 inquirer.js的实现简洁而优雅，文档清晰明了，对于脚手架开发的交互处理简单方便，定义了丰富的问题类型，和问题处理方法
反正就是很厉害啦~ 安装node和npm 在安装webpack之前，我们需要先安装npm，安装npm的之前呢，我们又必须安装nodejs。...有几个方法安装node的： 第一种方法：下载安装包 下载安装包或者源码包安装 https://nodejs.org/en/ 在Windows上安装时务必选择全部组件，包括勾选Add to Path。...不过你应该将webapck安装到当前的项目依赖中，这样可以根据本地项目使用对应版本的webpack 首先，我们创建一个测试目录： mkdir testapp 然后通过npm初始化该目录： npm init...我们再多做几个实验，看有没有卵用。 在app.js中引入一个button.js文件，它可以帮我们增加一个button按钮。...可以理解为是模块和资源的转换器，它本身是一个函数，接受源文件作为参数，返回转换的结果。这样，我们就可以通过require来加载任何类型的模块或文件，比如VUE、JSX、SASS 或图片。
前言 一周时间，没见了，大家有没有想我啊！哈哈！我知道肯定会有的。言归正传，我们切入正题。上一篇文章中我主要介绍了使用Vite2+Vue3+Ts如何更快的入手项目。...Transformers将代码和其他资产从一种语言编译成另一种语言，或者只是以某种方式转换文件。...例如配置格式（在package.json和.parcelrc中）和CLI参数。...使用HTML文件作为入口点使Parcel易于使用，因为它可以直接从HTML文件中检测依赖关系，并将所有检测到的依赖关系自动捆绑到各自的捆绑包中，而无需进行任何配置。...用户喜欢它提供的易用性和开发人员体验，但是总是有一些边际情况和实际用例需要更多的可定制性。 也就是说定制化配置你可以在package.json文件中配置。
初始化项目文件结构 ? image-20200312074244099 初始化 package.json 文件 package.json 使用存储记录 npm 安装相关包版本即可的。...[ext]' }, 上面这种输入参数的方式还有另一种方式，以对象的键值对方式，如下： { test: /\....包的查找规则： 1.找项目根目录中有没有 node_modules 的文件夹 2.在 node_modules 中 根据包名，找对应的 vue 文件夹 3.在 vue 文件夹中，找 一个叫做 package.json...image-20200313074819161 6.修改导入vue库的方式，使其支持完整功能 如果想要修改导入vue的 js，有两种方式， 第一种就是直接在 vue 库的package.json中main...此时就要使用resolve属性来设置导入库别名 alias 了。 7.在webpack.config.js中添加resolve属性： 首先将导入包的方式改回去，如下： ?
目前，企业中的绝大多数前端项目是基于Webpack打包工具来进行开发的。 1.2 Webpack的安装与使用 使用npm包管理工具安装webpack和webpack-cli两个模块。...js 模块，为了打包而构建 | | 使用方式 | 常规 js 开发，编写一系列构建任务( task ) | 编辑各种 JSON 配置项优点 | | 优点 | 适合多页面开发，易于学习，易于使用，接口优雅...加载器 在Webpack中，同时使用css-loader和style-loader加载器来打包处理CSS文件。...使用Sass语言以及Sass的样式库（如 Compass）有助于更好地组织管理样式文件，并更高效地开发项目。 在Webpack中，sass-loader加载器可以用来打包处理Sass文件。...作为CSS的一种形式的扩展，它并没有减少CSS的功能，而是在现有的CSS语法上，为CSS加入程序式语言的特性。 在Webpack中可以使用less-loader加载器来打包处理Less文件。
特征 在最基本的层次上，使用Vite进行开发与使用静态文件服务器没有太大区别。但是，Vite对本机ESM导入提供了许多增强功能，以支持通常在基于捆绑程序的设置中常见的各种功能。...NPM依赖关系解析和预捆绑 原生ES导入不支持如下所示的裸模块导入: import { someMethod } from 'my-dep' 上面的操作将在浏览器中抛出一个错误。...不需要为他们安装特定的插件，但相应的预处理器本身必须安装: # .scss and .sass npm install -D sass # .less npm install -D less # ....Vite改进了Sass和Less的@import解析，因此Vite别名也得到了尊重。此外，在与根文件不同的目录中，导入的Sass/Less文件中的相对url()引用也会自动重基，以确保正确性。...作为它的第二个参数实例化: init({ imports: { someFunc: () => { /* ... */ } } }).then(() => { /
Koa 并没有捆绑任何中间件， 而是提供了一套优雅的方法，帮助您快速而愉快地编写服务端应用程序。...3初始化koa项目 npm init 4安装koa npm i koa 5新建一个app.js // 导入koa const Koa = require('koa') // 创建一个koa对象 const...'; }) // 调用router.routes()来组装匹配好的路由，返回一个合并好的中间件 // 调用router.allowedMethods()获得一个中间件，当发送了不符合的请求时...', // methodNotAllowed: () => '不支持的请求方式' })); 14koa-router 不同请求方式 Koa-router 请求方式：get 、 put 、 post...主要是根据前端分页的参数，进行处理后，返回前端正确的数据，其实是一个很常见且简单的功能。但是是非常也是非常重要的。
SASS是一种预处理器及样式表语言，由它们自己的工具或模块捆绑器(如webpack)编译成CSS。它有几个可以用来使CSS整洁和可重用的功能，例如变量，嵌套规则，mixin，函数等。...特别是当您遵循BEM体系架构 时特别有用，因为Sass与它的体系结构非常兼容，因此他们在文档中经常提到它。 它是一种更优雅、更酷的UI设计方式。使用Sass构建CSS也更加容易。...现在如果你用sass来做这件事，它看起来是这样的： 上面的示例展示了SASS如何通过使用（＆）将CSS选择器串联在（{}）中来嵌套几个选择器。.../类中的父子关系分组，就像您进行选择器连接的方式一样，只是添加了一个与号(&)，您只需多加几个括号就能完成。...下面通过一个示例来展示它的用法吧 在左侧，我们有mixin absCenter，使用@include将它包含在.sidebar选择器中。生成的CSS中就会自动包括mixin的代码段了。
创建一个Gulp项目 第一步，本次教程，我们要创建一个叫project文件夹作为我们的根目录。在目录里运行npm init命令行来初始化项目。...Gulp预处理 在Gulp中，我们可以将Sass编译成CSS，使用一个叫做gulp-sass的插件。...你可以安装gulp-sass到你的项目中，通过使用以下命令 $ npm install gulp-sass --save-dev 在我们使用插件之前，我们需要从node_moudles文件夹中require...我们可以在Node globs的帮助下完成（globs参数是文件匹配模式，类似正则表达式,用来匹配文件路径包括文件名）。 供参考：Gulp-sass使用LibSass来将Sass转换成CSS。...我们编译Sass为CSS，压缩我们所有的资源文件以及复制必要的文件夹到dist文件夹。我们可以在命令行中运行gulp build来运行这个任务。
在实现上，她借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。通过本文，我们将学习如何使用Gulp来改变开发流程，从而使开发更加快速高效。...-save-dev npm install会自动检索所在目录下package.json中在dependencies配置的依赖模块并下载安装。...然而，对于捆绑的应用程序，无法达到Gulp提供的可定制性和可扩展性。...第一个表示包括在子文件夹在内所有文件夹中以“.scss”结尾的文件，第二个表示排除以“_”开头的文件。。这样我们可以使用SCSS的内置函数@import来连接_page.scss文件。...Browserify Browserify分析应用程序中的“require”调用并将其转换为捆绑的JavaScript文件。另外，还有一个可以转换成浏览器代码的npm软件包列表。
工程化是一种思想而不是某种技术。...有两种方式可以做到，第一种是改写sass处理的源码，当遇到import语句时跳过。...显然第一种成本比较高，也不好维护，所以我们采用第二种。 在处理import的时候，还有个地方是需要注意的。在sass中，import除了能引入css外，也可以引入变量，函数。...统一的webview 微信小程序提供了在小程序中内嵌HTML页面的能力，从微信小程序基础库1.6.4开始，可以在小程序内放置一个组件来链接HTML页面。...需要注意的一点是，如果需要在webvie链接拼接获取的参数，在某些安卓机型会因为提前渲染webview而src地址没有初始化而产生白屏，所以最好的方式是通过一个变量控制组件的展示隐藏，确保需要渲染组件时数据已经初始化完成以保证页面正常展示
初始化工程 npm init -y # 初始化npm配置⽂件 npm install --save-dev webpack@4.43.0 # 安装核⼼库 npm install --save-dev webpack-cli...@3.3.12 # 安装命令⾏⼯具 配置.npmrc设置npm源为淘宝镜像 ⼤家⼀开始使⽤ npm 安装依赖包时，肯定感受过那挤⽛膏般的下载速度，上⽹⼀查只需要将 npm 源设 置为淘宝镜像源就⾏，在控制台执...use: ["style-loader", "css-loader"], }, ], }, 集成less sass # sass npm install node-sass sass-loader...中，但是我们⼀般在⽣产环境会把css⽂件分离出来（有利于⽤户端缓存、并⾏加载及减⼩js包的⼤⼩），这时候就⽤到 mini-cssextract-plugin 插件。...其他配置 }), ] }; 自定义loader webpack.config.js中使用自定义loader loader路径为绝对路径，options参数，在loader中this.query
使用嵌套可以使你花费更少的时间来编写复杂的css选择器。 分块和导入 当涉及到可维护性和可读性上时，不可能将所有的代码都保存在一个大文件中。...BEM 是一种命名约定，表示“块 元素 修饰符”。 该方案可以使我们的代码更加结构化，更加模块化和更大的可复用性。现在我来解释下什么是块、元素和修饰符。 块 块通常被视为一个组件。...在你进行编码是运行npm run watch，并在浏览器中打开index.html文件，如果你想压缩你的 css 文件，使用npm run build命令 在index.html的head标签中将编译好的...css 文件进行引入 在package.json文件中添加这些script 生成项目：mkdir my-app && cd my-app 初始化项目：npm init 添加node-sass依赖库：npm...注意：这是个全局package 添加npm-run-all依赖：npm install npm-run-all:它将允许我们同时运行多个script 在package.json文件中添加如下script
image-20200310135709859 2.4 webpack安装的两种方式 运行npm i webpack -g全局安装webpack，这样就能在全局使用webpack的命令 在项目根目录中运行...npm i webpack --save-dev安装到项目依赖中 这两种方式一种是全局安装，一种是局部项目内安装，那么下面我示例采用全局安装的方式，如下： ?...建立好文档结构之后，在根目录下初始化package.json文件，执行： npm init -y 效果如下： ?...那么有没有偷懒的方式，让代码变化的时候，自动去打包编译呢？ 当然有办法，可以使用webpack-dev-server工具。...[ext]' }, 上面这种输入参数的方式还有另一种方式，以对象的键值对方式，如下： { test: /\.
npm install -g sass 注：国内 npm 建议使用淘宝镜像来安装，参考：NPM 国内慢的问题解决 Windows 上安装 我们可以使用 Windows 的包管理器 Chocolatey...SSL 证书错误 正常情况下，你是不会遇到 SSL 证书错误的，除非你的 Ruby 安装方式不正确。...建议部署 Linux 服务器的时候采用 这个 RVM 安装脚本 的方式安装 Ruby。...我们可以使用这个系统来 轻松地安装Sass和Compass。...compass 在每一个安装过程中，你都会看到如下输出： Fetching: sass-3.x.x.gem (100%) Successfully installed sass-3.x.x Parsing
PS：未能出现版本号，请尝试注销电脑重试； npm -v查看npm的版本号，npm是在安装nodejs时一同安装的nodejs包管理器， 最后出现版本号就是装上了。 ? ...据说npm的服务器在国外，如果我们在国内从npm上下载文件会反应慢，而且可能会异常报错。。装上这个东东就快了。。。...**其实，镜像只要装到局部（本地目录）就好了，毕竟全局我们只装一个gulp， 但是在本地目录中却要装好多个用到的gulp插件，如果没有镜像，要等半天也是不开心的。 ...//定义第一个任务，每一个任务都要通过task来定义 //my task 1是task的名字，就像上边的代码案例里，sass就是task的名字。...同样的，如果你default任务的task参数里边，有方括号设定其他依赖任务的顺序，那么他执行完default任务的回调函数后，会按照你指定的方括号里的任务名字顺序来执行。
对于构建过程中常见的优化方式有： 选用 alpine 版本的基础镜像 用 && 操作符来实现链式的 RUN 等指令以减少分层 在容器中使用 nginx 而非 node 来伺服静态文件（服务器软件本身至少能减少...的多阶段构建，在一个 Dockerfile 中解决问题；后面会有介绍 比较糟糕的一种做法可能是，每次让运维人员利用类似 npm run build && docker build ......因此交由运维人员或者自动化执行的 docker build 命令最好没有构建参数。...将 npm i node-sass --sass_binary_path=的.node文件> 语句整合进 Dockerfile 让镜像更易于交付 汇总之前分析的种种细节，来相对完整地看看如何配置镜像...但由于一来浏览器中无法用 process 感知环境，二来 Nginx 又不似 Node.js 应用一样可以直接传入参数；我们只好稍费周章，想办法 写入一些 Nginx 可以伺服的文件作为变量来源。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
云直播
对象存储
腾讯会议
