<一统江湖的大前端>系列是自己的前端学习笔记,旨在介绍javascript在非网页开发领域的应用案例和发现各类好玩的js库,不定期更新.如果你对前端的理解还是写写页面绑绑事件,那你真的是有点OUT了,前端能做的事情已经太多了, 手机app开发 , 桌面应用开发 , 用于神经网络人工智能的库 , 页面游戏 , 数据可视化 , 甚至 嵌入式开发 ,什么火就搞什么,活脱脱一个蹭热点小能手.如果你也觉得前端的日常开发有些枯燥,不妨一起来看看前端的另一番模样. 一.[懒]--才是第一生产力 你没有看错,…

一个使用界面进行交互的命令行集合 4.0以上的版本只支持node 6以上的,node4请使用3.x 目标和理念(hilosophy) 努力去做一个容易的 嵌入式的(embeddable) 和优美的命令行界面 应该简化一下的过程: -提供一个错误回调 -询问 -解析(parsing )输入 -验证答案 -管理层次提示 导入(Installation) npm install inquirer var inquirer = require('inquirer'); inquirer .prompt(…

1 创建文件夹cli-demo 2 执行npm init  3 创建cli.js 文件 内容如下: //js文件变成可执行文件 #!/usr/bin/env node console.log("hello world my cli"); // 根据附带参数 执行相应的代码 function run(argv) { if (argv[0] === '-v' || argv[0] === '--version') { console.log('version is 1.0.0'); } e…

在上一篇文章中,我们提到了meta.js,这次我们详细了解一下meta.js里面各个模块的写法. 对于 meta.js/metajson 文件, 目前主要字段如下: prompts<Object>: 收集用户自定义数据 filters<Object>: 根据条件过滤文件 completeMessage<String>: 模板渲染完成后给予的提示信息, 支持 handlebars 的 mustaches 表达式 complete<Function>: 模板渲染…

转载自JSCON-简时空:<自定义Yeoman生成器> 1.Getting Started 1.1.设置Node模块 Yeoman提供了generator-generator方便快速编写自己的生成器. 安装: npm install -g generator-generator运行: yo generator 创建一个名为generator-name的文件夹(name为你的生成器名);[important] 创建package.json文件,这是NodeJS模块的“信息图”,可以手动或者使用命…

前言 vue-cli, webpack-cli 等脚手架是不是用起来爱不释手?自己写了个模版每次来回复制粘贴代码是不是很难维护?如果你是对前端.Node操作有一定的了解,同时也存在以上疑问,那就请尽情阅读尝试吧! 本篇文章按照al-block-cli举例, al-block-cli是一个基于vue和elementUI而集成的一个开发模版,可安装进行使用 依赖 Commander.js 命令行工具 download-git-repo git仓库代码下载 chalk 命令行输出样式美化 Inquir…

在前端工程化系列[05] Yeoman脚手架使用入门这边文章中,对Yeoman的使用做了简单的入门介绍,这篇文章我们将接着探讨Yeoman这个脚手架工具内部的核心机制,主要包括以下内容 ❏ Yeoman脚手架工具的价值讨论❏ generator[生成器]的内部结构❏ generator[生成器]的项目模板❏ Yeoman脚手架工具的核心运转机制❏ Yeoman 的主要组装流程 Yeoman这样的脚手架工具解决了什么问题? 所有新事物都不是凭空产生的,它们的出现总有某些内在的驱动力.一项新技术,一…

cross-env https://www.npmjs.com/package/cross-env 在package.json设置环境变量的时候,会有兼容性问题,如: { "scripts": { "start": "APP_TYPE=site umi dev", } } 这一步,是想先设置环境变量APP_TYPE为site,然后再执行脚手架umi. 但有可能报错.所以我们需要使用cross-env,就可以解决 npm install --sav…

vue-cli是一个简单的vuejs脚手架命令行工具. 安装 准备:Node.js(>=4.x,推荐6.x版本),npm版本3以上和Git. $npm install -g vue-cli 使用 $vue init <template-name> <project-name> Example: $vue init webpack my-project 上面的命令会从vuejs-templates/webpack拉取模板并显示提示信息,最后在./my-project/.下面生成…

目录 readline 实现 使用process实现 使用 inquirer 调用的生成模板方法 (generator 方法) 创建时间:2019-10-15 测试环境:win10 node-v10.16.1 受 vue-cli 初始化项目的启发,想探究其原理和自己实现一套类似方法,以便在项目中创建公用模板块. 这里采用三种方式实现 node 自带的 readline 使用process实现 第三方包 inquirer 还有其它实现方式如 commander.js 等,这里不做具体实现 所有实现…

方法一:通过原生的NodeJs API,方法如下:   #!/usr/bin/env node # test.js var argv = process.argv; console.log(argv)   通过以下命令执行: node test.js param1 --param2 -param3   结果输出如下: [ '/usr/local/Cellar/node/10.10.0/bin/node',   'test.js',   'param1',   '--param2',   '-pa…

原文 手把手教你写一个 Node.js CLI 强大的 Node.js 除了能写传统的 Web 应用,其实还有更广泛的用途.微服务.REST API.各种工具……甚至还能开发物联网和桌面应用.JavaScript 不愧是宇宙第一语言. Node.js 在开发命令行工具方面也是相当方便,通过这篇教程我们可以来感受下.我们先看看跟命令行有关的几个第三方包,然后从零开始写一个真实的命令行工具. 这个 CLI 的用途就是初始化一个 Git 仓库.当然,底层就是调用了 git init,但是它的功能不止这…

1 .inquirer.js —— 一个用户与命令行交互的工具 2. existsSync 方法说明: 以同步的方法检测目录是否存在. 如果目录存在 返回 true ,如果目录不存在 返回false语法:fs.existsSync(pach);由于该方法属于fs模块,使用前需要引入fs模块 var fs = require('fs');接收参数: path:将检测的目录路径例子: var fs = require("fs"); var checkDir = fs.existsSync(…

前言 像我们熟悉的 vue-cli,create-react-app 等脚手架,只需要输入简单的命令 vue init webpack project,即可快速帮我们生成一个初始项目.在实际工作中,我们可以定制一个属于自己的脚手架,来提高自己的工作效率. 为什么需要需要脚手架? 减少重复性的工作,不再需要复制其他项目再删除无关代码,或者从零创建一个项目和文件. 根据交互动态生成项目结构和配置文件等. 多人协作更为方便,不需要把文件传来传去. 思路 要开发脚手架,首先要理清思路,脚手架是如何工作的…

一,我们使用vue-cli 可以快速初始化vue.js的项目,官方提供了webpack,pwa,browserify-sipmple,等常用template 二.置知识1,模板结构template:该目录主要存放模板文件,初始化项目生成文件来源与此meta.js/meta.json:用于描述初始化项目时命令行交互动作2,MetalsmithMetalsmith 在渲染文件担任的角色是gulp.js,可以通过添加一些插件对结构文件处理,如重命名,合并等3,download-git-repo使用vu…

react-ts-template 脚手架 使用 npm i -g maple-react-cli maple-react-cli init 选择模板 'react-ts-template' 输入自定义的项目名 创建模板成功 模板详情: react-ts-template 模板2.0 实现 自己整理了一套日常用的模板,但每次初始化都比较麻烦,所以创建了一个工具并传到npm库,下面介绍实现过程 github 一.准备模板 react-ts-template 一般放到github repos即可 二…

大家都知道,使用vue-cli可以快速的初始化一个基于Vue.js的项目,全局安装脚手架之后,你可以通过vue list命令看到官方提供的5个模板 vue list 当开发一个独立项目的时候,使用官方提供的template确实很方便,省去了繁琐的依赖配置,webpack等配置问题,甚至连项目目录结构也不需要去考虑,着实方便.但是,当我们需要开发多个系统,每个系统依赖的包,webpack都不一致的时候,vue官方提供的模板就显得捉襟见肘了,这是我们就需要去考虑,能否开发一套自己定制化的templa…

目录 简介 nodejs的历史 nodejs简介 nodejs的运行环境 process 终止进程 env argv CLI交互 exports模块 nodejs API nodejs的框架 简介 javascript虽然一直都可以做服务端编程语言,但是它更多的是以客户端编程语言来展示在世人面前的.也许javascript自己都忘记了还可以做服务器端编程,直到2009年nodejs的横空出世. nodejs的历史 javascript作为一门解释性语言,是不需要像C或者C++那样进行编译的.但是…

cli 的全称 command-line interface(命令行界面),也就是前端同学常用的脚手架,比如 yo.vue cli.react cli 等. cli 可以方便我们快速创建项目,下图是引用 vue cli 的介绍: 创建项目 运行下面的命令,创建一个项目: npm init 执行命令完成后,可以看到项目根目录只有一个 package.json 文件. 在 package.json 文件增加 bin 对象,并指定入口文件 dist/index.js. 在命令行运行需要在入口文件的第一…

本文转载自用一次就会爱上的cli工具开发 写在前面 最近接手任务--使用nodejs开发一个公司内部使用的cli工具,简而言之就是输入一行命令快速搭建好项目结构,也可以通过不同的命令引入不同的文件. 了解 首先要基于node环境,然后我们需要知道cli是什么?cli是command-line interface的缩写,即命令行工具,常用的vue-cli, create-react-app,express-generator 等都是cli工具. 回顾 创建一个exercise-cli目录,并使用c…

什么是脚手架? Yeoman是什么? 实现自定义脚手架 基于Yeoman实现Vue-cli 一.什么是脚手架? 手脚架从功能上来讲就是创建项目初始文件,这其中包括生成功能模块配置.自动安装依赖.自动生成标准化(结构的)文件,提高项目创建速度降低手动操作可能发生的低级错误. 关于手脚架在周俊鹏的<前端工程化>中有这样描述,从项目方案定型之后的繁琐配置映射为方案各个模块的功能定制,这整个流程可以归纳为:选定方案--配置方案细节--配置完成--根据定制方案创建项目文件--结束流程.从项目选型到落地这…

Aug 19, 2013 Tags: bowergruntJavascriptjsnodejsyeomanyo Comments: 10 Comments Yeoman自动构建js项目 从零开始nodejs系列文章,将介绍如何利Javascript做为服务端脚本,通过Nodejs框架web开发.Nodejs框架是基于V8的引擎,是目前速度最快的Javascript引擎.chrome浏览器就基于V8,同时打开20-30个网页都很流畅.Nodejs标准的web开发框架Express,可以帮助我们迅速…

出发点并不是小程序本身,是想要做一个脚手架(command-line interface),看过 VUE / REACT 脚手架,觉得很厉害,但是并不太知道里面是怎么做成的,所以最近研究了研究,看能不能自己做成一个 简单的脚手架. 之所以以小程序未入点来开发一个 cli, 是因为最近在做小程序的时候有点不方便, 比如每次新建一个 page module, 都要 mkdir x, touch x.json, x.wxml, x.js, x.wxss, 很麻烦.比如,我查找 bug 的时候习惯自己新…

备注:   比较简单就是使用nodejs 的两个类库帮助我们进行开发而已,具体的使用参考类库文档 1. 项目初始化 a. 安装依赖 yarn init -y yarn add commander inquirer ├── README.md ├── bin │ └── index.js ├── package.json └── yarn.lock 2. 项目代码 a. package.json { "name": "mynode-cli", "versio…

背景 第一次接触代码生成器用的是动软代码生成器,数据库设计好之后,一键生成后端 curd代码.之后也用过 CodeSmith , T4.目前市面上也有很多优秀的代码生成器,而且大部分都提供可视化界面操作. 自己写一个的原因是因为要集成到自己写的一个小工具中,而且使用 Node.js 这种动态脚本语言进行编写更加灵活. 原理 代码生成器的原理就是:数据 + 模板 => 文件. 数据一般为数据库的表字段结构. 模板的语法与使用的模板引擎有关. 使用模板引擎将数据和模板进行编译,编译后的内容输出到文件…

vue 生命周期 1,beforeCreate 组件刚刚被创建 2,created 组件创建完成 3,beforeMount 挂载之前 4,mounted 挂载之后 5,beforeDestory 组件销毁前调用 6,destoryed 组件销毁后调用 <template> <h3>我爱你</h3> </template> <script> export default{ data(){ return{ } }, beforeCreate(){…

1.运行node脚本     新建app.js   写入代码console.log('hello')     cmd终端执行 node app.js 2.node读取环境变量     浏览器地址:https://www.cnblogs.com/fhen/p/6293763.html     首先设置环境变量(window)         查看:set NODE_ENV         添加:set NODE_ENV = production         追加:             se…

MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自动传递给 View,即所谓的数据双向绑定. Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库,专注于View 层.它的核心是 MVVM 中的 VM,也就是 ViewModel. ViewModel负责连接 View 和 Model,保证视图和数据的一致性,这种轻量…

iframe可以说是比较老得话题了,而且网上也基本上在说少用iframe,其原因大致为:堵塞页面加载.安全问题.兼容性问题.搜索引擎抓取不到等等,不过相对于这些缺点,iframe的优点更牛,跨域请求.制作富文本编辑器.历史记录管理.长连接.无刷新文件上传等方面,可参考一下知乎的这个回答:Iframe 有什么好处,有什么坏处?国内还有哪些知名网站仍用Iframe,为什么?有哪些原来用的现在抛弃了?又是为什么?. 今天就总结一下操作iframe的方法,以及平时的一些使用. 知识点汇总 有些事情平时不…

之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者服务器 一.安装webpack 你需要之前安装node.js $ npm install webpack -g 安装成功后,便可以使用webpack命令行了. ok,开始工作! 二.新建一个空目录,名字为myApp,文件如下 entry.js document.write("It works.&qu…