本文会从零开始配置一个monorepo类型的组件库，包括规范化配置、打包配置、组件库文档配置及开发一些提升效率的脚本等，monorepo 不熟悉的话这里一句话介绍一下，就是在一个git仓库里包含多个独立发布的模块/包。
本文出自于掘金的子弈[1]，原文链接 从零开始配置 TypeScript 项目[2]。
package.json 是前端每个项目都有的 json 文件，位于项目的根目录。许多脚手架在搭建项目时也会自动帮我们自动初始化好 package.json。
Vue3 跟 Vite 正式版发布有很长一段时间了，生态圈也渐渐丰富起来，作者已在多个项目中使用，总结一下：就是快！也不用担心稳定性问题，开发体验真不是一般好！还没尝试的同学可以从本文开始学习，从 0 开始手把手带你搭建一套基于 Vite + Vue3 + TypeScript 规范的前端工程化项目环境。
创建模式有两种，一种是默认配置（没有带其他辅助功能的 npm包），另一种是手动配置（可按照生产需要进行配置）
以上涉及到的rule规则在扩展包的基础上做了调整，基于两个规范做了修改适合你的规范规则
最近遇到了一个老项目，比较有意思的是这个项目集前后端的代码于一起，而后端也会去修改前端代码，所以就出现了后端用 IntelliJ IDEA 来开发前端项目，而前端用 VSCode 来开发前端项目的情况。于是乎，出现了代码规范的问题，所以就有了这篇文章，整理了一下前端代码校验以及在 Vue 项目中的实践。
Git Hooks 就是在 Git 执行特定事件（如commit、push、receive等）时触发运行的脚本，类似于“钩子函数”，没有设置可执行的钩子将被忽略。
在上一篇文章中，我们介绍了使用mpvue开发小程序所需要的一些开发环境的搭建，并创建了第一个mpvue小程序代码骨架并将其运行起来。在本文中，我们来研究熟悉一下mpvue项目的主要目录和文件结构。
Vite (法语意为 "快速的"，发音 /vit/) 是一种面向现代浏览器的一个更轻、更快的前端构建工具，能够显著提升前端的开发体验。除了Vite外，前端著名的构建工具还有Webpack和Gulp。目前，Vite已经发布了Vite2，Vite全新的插件架构、丝滑的开发体验，可以和Vue3的完美结合。
Vite已经出来很久了，新版本也比较稳定，有没有打算入手一下，推荐下面这篇文章。
【前端科普系列】帮助阅读者了解web前端，主要覆盖web前端的基础知识，但不深入讲解，定位为大而全并非细而精，适合非前端开发的同学对前端有一个系统的认识，能更好的与前端开发协作。尽可能的写成科普类文章，对于前端开发而言，只适合刚入门的新手。
本文属于新闻推荐实战-前端界面展示。前端开发是一个创建 WEB 页面呈现给用户的过程，通过 HTML，CSS 及 JavaScript 以及衍生出来的各种技术及框架来实现用户的界面交互。通过前端展现数据库中的数据结果可以使用户可以更加详细、准确、快速地看到数据间的关系的规律。本文将从前端的概念出发，介绍前端的基本知识和项目中用到的相关框架和技术。
本文是基于Vite+AntDesignVue打造业务组件库[2]专栏第 10 篇文章【在 monorepo 中怎么组织和优化研发流程？】，前面几篇都在说函数库开发的相关内容，所以本文接着围绕这块说，主要是把研发流程梳理清楚，方便后续更多内容的铺开。
本篇内容： Weex的项目结构 npm webpack ESLint Devtools
Weex的项目结构 npm webpack ESLint Devtools
看完 《前端规范之Git工作流规范（Husky + Commitlint + Lint-staged） https://www.cnblogs.com/Yellow-ice/p/15349873.html》，再次修改本文
一般多个项目使用一些公共组件的时候，我们没必要在每个项目里写公共组件代码，我们可以将公共组件封装成一个库，上传至npm，这样我们在项目中使用就可以直接从npm下载直接使用。当然我们也可以搭建自己本地的npm镜，而本文主要讲述上传npm。
技术基础 使用vue3+ts(x)作为基础 总纲 技术是服务于业务需求的 技术的选型是依据场景的 技术随着业务变化需要迭代的 注意事项与规范 项目工程规范 组件命名方式使用 ls-lint 进行校验，组件名称必须大写开头，修改目录 .git 文件中 config，ignorecase = False 防止出现文件大小写的问题 git 提交规范使用，可以使用 git-cz 做 git commit (): 项目中代码使用 gitHooks 进行代码 prettier 和 eslint 保证跨
然后，在写这系列文章时，发现有些操作需要用到package.json中的属性。然后，有些属性看起来人畜无害，但是用起来却需要查很多的资料。所以，就想着。写一篇或者两篇关于package.json的文章。
本文主要讲前端开发时遇到的 编码规范难以落地的问题 以及 解决方案 ，包括 编码规范 和 git commit 规范。
https://juejin.cn/post/6969758357288648718
ESLint是一个用来识别 ECMAScript 并且按照规则给出报告的代码检测工具，使用它可以避免低级错误和统一代码的风格。如果每次在代码提交之前都进行一次eslint代码检查，就不会因为某个字段未定义为undefined或null这样的错误而导致服务崩溃，可以有效的控制项目代码的质量。
#第二次出现 #空格勾选,回车下一步 (*) Babel #我们在VUe中一般都用ES6语法写的,这个插件功能很强大一般都选的把ES5语法解析成ES6 ( ) TypeScript #也是种语法js的升级版,脸书蛮推荐这个语法的,学这个蛮贵的 ( ) Progressive Web App (PWA) Support #前台优化的一个功能集合,提高前台项目效率 (*) Router #前后端交互中ajax交互来达成前后端分离,这个就是前台的路由 (*) Vuex #Vue中父组件与子子组件传递消息,设置成全局的单例来方便消息传递 ( ) CSS Pre-processors #如果选了后面他会让你选你用less或者sass中其中某个做预处理 (*) Linter / Formatter #规范编码格式 ( ) Unit Testing #测试相关 ( ) E2E Testing #测试相关 #一般勾选这四个,其它具体情况具体分析
大部分前端项目都配置Stylelint、Eslint、Tslint和Prettier四大前端代码校验工具。「代码校验工具」以下简称Lint，为了解决代码不严谨，通过预设规则校验代码，检测其是否存在错误/漏洞，并对错误/漏洞提示修复方案并尽可能依据修复方案格式化出正确代码。该功能称为「格式化代码」，基本上所有编辑器都需配置该功能。
| 导语 本文主要介绍在前端工程化的一些探索和实践，结合移动端的基础库重构和UI组件库开发这两个项目详细介绍工程化方案 。
https://cn.vuejs.org/v2/guide/installation.html#%E5%91%BD%E4%BB%A4%E8%A1%8C%E5%B7%A5%E5%85%B7-CLI
在创建node.js项目如一个vue项目，或一个react项目时，项目都会生成一个描述文件package.json 。
代码规范是指程序员在编码时要遵守的规则，规范的目的就是为了让程序员编写易于阅读、可维护的代码。
在最近的一个项目中，我们通过设置 ESLint 和 Prettier 来进行自动化语法检查，并对 JavaScript 项目的代码风格管理。
最近公司在推行单元测试，但是一些同事对于单元测试只是了解，甚至不怎么了解。因此推动单元测试的阻碍是有的，这种阻碍除了人的层面，还有基础设施的层面。希望通过本文，一方面加深大家对前端测试最佳实践的认知，另一方面可以作为手册，在日常开发中做参考。本文也会不断更新，期待你的参与。
众所周知，一个 Javasript 项目的脚本类工具，可以使用 package.json 中的 scripts 字段来组织，简单来说，这就是 npm script。
前端基建开发一直被认为是前端开发中的 “高阶技能”。而内部组件库的开发则算是基建中比较“容易”入手的一个方向。所以咱们今天就利用这篇文章，来看一看 组件库开发 的优化方案。
本文系统的梳理了vue-cli3搭建项目的常见用法，目的在于让你快速掌握独立搭建vue项目的能力。你将会了解如下知识点：
ESLint 是一个在前端工具链中被众人熟知的代码检查工具，它能够被开发者灵活的配置，使其能够达到我们提前制定好的代码规范的要求，并且在编码过程中实时检测输入的代码，对于不符合代码规范的代码警告或报错。不得不说，在有了 ESLint 这个工具之后，团队之间开发维护会舒服很多，因为在强制约束下，你只需要去理解代码本身的含义就可以了，对于风格的问题则少了很多麻烦。
随着业务的不断扩展，团队的项目越来越多，面对日益复杂的业务场景和代码逻辑，我们发现在前端工程化方面团队还停留在非常原始的阶段。现有的解决方案已经无法满足各种复杂的场景，我们每天都在疲于应付很多重复的工作，为此我们基于移动端基础库重构和UI组件库的建设这两个项目对团队的项目构建流程进行了详细的分析和梳理，并制定了一套适用于团队的工程化方案。
Eslint 可以静态检查 javascript 代码一些逻辑上的错误，还有一些代码格式的错误。原理是把代码 parse 成 AST，然后基于 AST 来检查一些问题。
[译] 原文地址：https://medium.com/nerd-for-tech/from-vue-cli-to-vitejs-648d2f5e031d
起因竟然是因为做了一个梦，不过是因为确实想明白这个弹幕是什么个原理，也想压测一下面对秒级百万覆盖的弹幕是不是会出现卡顿，然后这四个前端vue项目，我不碰前端的啊，上次写前端页面都追溯到20年1月写中台的时候了，就在今天我终于把他折腾起来了。
Vue 3 正式版已经发布有一段时间了，随着 Vite 脚手架注定成为下一代前端工具链，许多用户都想基于 Vite 来构建 Vue 项目，如果想基于 Vite 构建 Vue 3 项目，社区模板完全满足您的需求，如果想构建 Vite 3 + Vue 3 + JavaScript 项目，那社区模板不太能满足您的需求，因为社区模板提供 Vue 3 项目几乎是基于 Vite 2 + TypeScript 构建，对于不熟悉 TypeScript 语言的用户不是很友好，因此接下来从 0 开始手把手带大家搭建一套规范的 Vite 3 + Vue 3 + JavaScript 前端工程化项目环境。
笔者使用了 webpack5 将项目进行了重构，并全程使用的 webpack-chain 来配置 webpack，每个功能也都是独立文件，可单独使用。因此该项目的配置可以在任何项目中被使用。此项目可实战亦可当成 webpack 手册来学习。我开发这个项目的目的就是无论你是新手还是有经验的大佬都可以从中有所收获。此项目为想学 webpack 的同学提供了很好的实战平台，每一个 插件 每一个 loader 都会有详细的讲解及使用背景。
husky是一个Git Hook，可以帮助我们对commit前，push前以及commit提交的信息进行验证，现在我们就来安装并配置一下这个工具，首先通过自动配置命令安装，命令如下:
对于多人参与的中大型前端项目，代码质量与代码风格的重要性不言而喻，对于开发者而言，当你重构或者接手别人工作时，都期望是一目了然的舒爽，而不是令人头晕眼花的"shi shan"。对于团队而言，良好的代码质量可以减少产品的缺陷，一致的代码风格能够提升团队开发效率。
在当今全球化的世界中，对于web开发人员来说，创建可为来自不同地区和文化的用户轻松实现本地化的应用程序至关重要。Vue.js 是一个流行的 JavaScript 框架，它提供了一个名为 Vue I18n 的强大国际化（i18n）插件。在本文中，我们将逐步探讨使用 Vue I18n 插件实现 Vue 应用程序国际化的过程。无论您是经验丰富的 Vue 开发人员还是刚刚入门，本指南都将帮助您快速掌握如何轻松创建多语言应用程序。。
Vue3.x已经出了很久了，只是现在业务没有新工程，所以还是一直在vue2.x上工作，为了不被落下，理了理vue3.x新建项目的过程。
翻译：疯狂的技术宅 原文：https://blog.logrocket.com/getting-started-with-the-new-vue-cli-3-43bcbe1ae759
在前端项目开发中，我们可以根据实际情况不同程度地使用 Vue。利用 Vue CLI（或写成 vue-cli，即 Vue 脚手架）搭建出来的项目，是最能体现 Vue 的特性的。这点在接下来的内容中我们可以慢慢感受。
在日常需求迭代中，代码的规范与质量是编码的重要一环。Eslint 作为规则扫描器，能够对前端代码进行有效管控，避免出现低级错误，对于前端项目或多或少肯定都会看到 eslint 的相关配置。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
