模块打包工具，可以将项目打包成兼容浏览器的格式，或者打包成手机app等。
它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用
node是一个在浏览器外执行JavaScript语言的环境，就好比JRE是Java的运行环境一样。
前端项目包含些什么？
当然常见得无非就是各种静态资源文件。
例如：
脚本(js)文件；
样式(css)文件
图片(png\jpg…)文件
其他媒体(MP3、MP4…)文件等等
（1）npm init
不常用，这个命令是创建node包项目的命令，因为vue项目实际可以看成一个node的包，所以，也可以用创建node包项目的方法去创建vue项目。
（2）vue init webpack 项目名
是vue-cli2.x的初始化方式，可以使用github上面的一些模板来初始化项目。
webpack是官方推荐的标准模板名。
假如想要使用其他的模板，就可以更改webpack为其他的模板的名称。
例如使用github上面electron-vue的模板。Electron-Vue是个可以让我们使用 Vue 来开发 Electron 桌面程序的框架，单页面的应用解决了在Electron中每次打开新页面都要创建窗口的烦恼。
使用方式：vue init electron-vue 项目名称
顺便介绍electron项目：
Electron是由Github开发，目的是使用HTML，CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。 为了达成这个目的，Electron通过将Chromium和Node.js合并到同一个运行时环境中，然后将其打包为Mac，Windows和Linux系统下的应用；
通俗的来讲Electron给前端项目套上了一个壳，这个壳是可以让你使用纯 JavaScript 调用丰富的原生 APIs（操作系统API） 来创造桌面应用。
（3）vue create 项目名 //是vue-cli3.x的初始化方式，模板是固定的，但是，模板的选项可自由配置
Vue-cli是什么？
上文提到打包工具，我们选择了在界面具有老大地位的Webpack，
随着使用Webpack的人越来越多， 针对Webpack的各种插件如百家争鸣般越来越多，
如果我们自己准备从0开始配置Webpack,那往往要琢磨好久好久...
有同学可能会想啦...
有没有一个工具能帮我们既合理又迅速的整合最佳配置呢？
让我们不需要将大部分时间浪费在配置环节呢？
对，你猜的没错，这就是Vue-cli（脚手架）
先看下官网介绍，如下图：
通过上图的文字说明可以知道：
有了它我们就不用关心Webpack如何有效配置；
有了它我们只需要专注于业务代码；
开箱即用多方便。
了解这三个的关系很简单，假设你现在需要做一个学生管理系统，那么你可以用html+css+js直接写个页面，但是这样子做的话开发速度太慢，修改下页面需要各种jQuery的调用。
这个时候你就会想要个能够让你快速进行开发的框架，这时你可以挑选anguar，react或者vue，很荣幸的是，你选中了vue。
接着你觉得写vue的时候很多组件都需要自己亲自去编写，毕竟自己是新手，重用性也不高。
比如一个控制图片滑动的swiper，自己就花了不少时间去实现各种功能，比如自动播放呀，轮播呀之类的。
然后你到网上一查，发现有个叫做element的vue组件库，已经实现了自己想要的大部分组件。
这时，你就会直接npm install该库，然后愉快的开始写代码了。但是这里你实现的只是网页端即前端。
既然是学生管理，那学生增删改的这些逻辑已经数据库的操作，你是不是应该在后端实现呢？
后端可以通过很多框架来实现，java的ssh，或者python的django，又或者nodejs之类的。很不幸，这次你又选中的nodejs+express！
特别提示： npm list 包名 -g 可以查看某个包的版本
uglifyjs是用 NodeJS 编写的 JavaScript 压缩工具
在网上搜下JS压缩优化，就会有很多压缩工具或者在线压缩，而且很多在线压缩都把各种常用的压缩工具都集合在一起，非常方便。
比如http://tool.css-js.com/，当然这个是在线压缩网址，如果不采用在线压缩网址，我们要采用哪种压缩工具呢？
现在流行的压缩工具各有各的优缺点，目前最流行的压缩工具是 UglifyJS ，JQuery 就是使用此工具压缩。
UglifyJS 压缩率高，压缩选项多，并且具有优化代码，格式化代码功能。
- build：webpack配置，用来编译打包项目生成dist目录
- config：本项目相关的配置
- node_modules: 通过npm install安装的依赖代码库
- src：项目源码
- assets：用来放置图片
- components:用来放置组件文件
- common：用来放置字体文件和通用的样式文件
- main.js：默认为整个项目的入口文件。
- App.vue：是项目的主组件，页面的入口文件。
- static：存放静态资源
- .babelrc：babel相关配置（因为我们的代码大多都是 ES6，而大多浏览器是不支持ES6的，所以我们需要babel帮我们转换成ES5语法）
- .editorconfig：编辑器的配置，可以在这里修改编码、缩进等
- .eslintignore：设置忽略语法检查的目录文件
- .eslintrc.js：eslint的配置文件
- .gitignore：git忽略里面设定的这些文件的提交
- index.html：入口html文件
- package.json：项目的配置文件，用于描述一个项目，包括我们init时的设置、开发环境的依赖插件、生产环境的依赖插件及版本等。
- README.md: 项目说明文件。
在Rails3.x应用程序中，我正在使用net::ssh并向远程pc运行一些命令。我想向用户的浏览器显示实时日志。比如，如果两个命令在net中运行::ssh执行即echo"Hello",echo"Bye"被传递然后"Hello"应该在执行后立即显示在浏览器中。这是代码我在rubyonrails应用程序中使用ssh连接和运行命令Net::SSH.start(@servers['local'],@machine_name,:password=>@machine_pwd,:timeout=>30)do|ssh|ssh.open_channeldo|channel|channel.requ
我正在为Jekyll编写一个转换器插件，需要访问一些页眉(YAML前端)属性。只有内容被传递给主要的转换器方法，似乎无法访问上下文。例子:moduleJekyllclassUpcaseConverter关于如何在转换器插件中访问页眉数据有什么想法吗？ 最佳答案 基于Jekyll源代码，无法在转换器中检索YAML前端内容。根据您的情况，我看到了两种可行的解决方案。您的文件扩展名可以具有足够的描述性，以提供您本应包含在前言中的信息。看起来Converter插件的设计就是这么基本的。如果修改Jekyll是一个选项，您可以更改Convert
一、简介之前在Vue项目中使用过element的上传组件，实现了点击上传+拖拽上传的两种上传功能。然后我就在想是否可以通过原生的html+js来实现文件的点击上传和拖拽上传，说干就干。首先是点击获取上传文件自然没的说，只需要借助input标签即可，但原生的点击上传按钮，实在是过于简陋，所以我的想法是通过一个div，模拟成上传按钮，然后监听其点击事件，通过input.click()去模拟点击真正的上传元素。然后是拖拽获取上传文件，这个稍有难度，我的想法是通过HTML5新增的drag拖放API+dataTransfer来实现文件的拖拽获取，但是由于是html5新增的，所以可能在某些低版本IE浏览器
一、介绍一下vercelvercel是一个站点托管平台，提供CDN加速，同类的平台有Netlify和GithubPages，相比之下，vercel国内的访问速度更快，并且提供Production环境和development环境，对于项目开发非常的有用的，并且支持持续集成，一次push或者一次PR会自动化构建发布，发布在development环境，都会生成不一样的链接可供预览。但是vercel只是针对个人用户免费，teams是收费的首先vercel零配置部署，第二访问速度比github-page好很多，并且构建很快，还是免费使用的，对于部署个人前端项目路、接口服务非常方便vercel类似于git
🐱个人主页：不叫猫先生🙋♂️作者简介：前端领域新星创作者、阿里云专家博主，专注于前端各领域技术，共同学习共同进步，一起加油呀！💫系列专栏：vue3从入门到精通、TypeScript从入门到实践📢资料领取：前端进阶资料以及文中源码可以找我免费领取🔥前端学习交流：博主建立了一个前端交流群，汇集了各路大神，一起交流学习，期待你的加入！(文末有我wx或者私信)目录前言一、vue自定义指令directive讲解二、基于DOM的实现方式1.思路整理2.新建index.vue3.新建`directives`文件4.在`directives`文件下创建`index.ts`文件5.在`main.ts`中全局引
一、乱花迷人眼我就是被迷的那双眼。有时候需求来了，用熟悉的套路进行开发，确实很节省时间也能保证功能的稳定，但是这些开发的惯性无形中阻碍了我对技术的探索。我一直想改造详情页，解放重复功能开发的劳动力，但是详情页一眼望都是内容平铺，好像并没有什么可做的代码设计。后来我拨开繁花，发现详情页的组件化不必想的过于复杂，后台系统风格统一即可。因为大部分的详情页面是内容的展示，偶尔会出现少量的操作功能。将风格统一的部分进行组件化处理，操作功能使用回调函数放回当前页面，避免组件里做过多的业务逻辑。看，这不就成了。项目基于React框架开发的，所以代码写法是JSX语法，组件开发使用的hooks函数式组件，UI框
2023届EDA领域校招总结，完结撒花！！！目录前言一、EDA公司介绍二、项目面试1.自我介绍2.项目深入3.专业经验4.成果和技能5.对面试官有什么问题三、C++面试1、高频考点2、其他知识点3、算法题四、逻辑综合面试1.逻辑综合知识详解2.开源逻辑综合ABC五、简历制作总结前言2022/08/26：本人2023年6月毕业，于2022年7-10月参加秋招，面试总结纯属个人经验，仅供参考面试的是EDA前端软件开发岗位，也会掺杂一些EDA其他流程的面试在面试过程中发现自己准备的很乱，没有一个清晰的思路，现在把自己面试的所有经历和题型整理出来，在这里做一个小的总结，不仅帮助自己整理思路，也给大家做
今天来说说前端低代码有多幸福？低代码是啥？顾名思义少写代码……这种情况下带来的幸福有：代码写得少，bug也就越少（所谓“少做少错”），因此开发环节的两大支柱性工作“赶需求”和“修bug”就都少了；要测的代码少了，那么测试用例也可以少写了。所以，总结低代码带来的幸福感有这三大点：开发效率提高开发成本减少维护性更高针对上述三点，我们展开说说。01、开发效率提高对于低代码的理解，个人认为可以通过配置化的低成本交互方式（主流是拖拽）加上少量的胶水代码，去满足一类应用的需求。这就说明，基于低代码，开发人员无需代码或说只需少量代码就可以开发出各类应用管理系统，如：OA协同办公、KM知识管理、CRM客户关系
我一直在研究使用像SVGO这样的库能够在前端清理用户提交的SVG代码。SVGO是一个基于node.js的库，通常在后端运行，所以我一直在努力思考如何将SVG代码从前端发送到后端，然后将清理过的代码反刍到前端。正是在我试图弄清楚这一点的时候，我检查了他们的webappexample,经检查，在链接脚本中运行代码，我通常会在前端的后端看到这些代码。特别是，它们的许多函数都具有签名(fullscript):1:[function(require,module,exports){"usestrict";varloadScripts=require("./load-scripts"),...mo
我已经尝试过使用Jasmine或Mocha测试NodeJS库，但我不知道如何测试前端项目。我在网上找到了教程，但所有内容都在工作流程中包含一个任务管理器，我想知道如何在没有任务管理器的情况下执行此操作。我发现以下问题与我要问的很接近:UsingTravis-CIforclient-sideJavaScriptlibraries?就我而言，我正在使用Jasmine并且已经设置了JasmineSpecRunner.html、Jasmine库和spec/mylibSpec.js。当我在浏览器上运行SpecRunner.html时，测试通过了。现在，我如何将它与Travis集成，没有Grunt