自定义element组件,elementui动态添加组件
本文主要介绍element-ui用脚本自动构建新组件的实现实例。通过示例代码非常详细，有一定的参考价值。感兴趣的朋友可以参考一下。
目录
背景element-ui的自动构造是怎么做的？makefilenew.jsfile-save是指对资源文件的修改。fs.createWriteStream摘要
背景
在公司的项目中，每次遇到新的需求，你还用新页面=给页面添加内容，比如vue模板=添加路由吗？你不觉得很麻烦吗？如果有，可以尝试自动构造。好香啊~
element-ui的自动化构建是怎么做的
在开源项目中，尤其是UI库的开发，需要太多人一起合作，每个人的代码习惯都不一样。而且UI库中的每个组件还会涉及到组件的多语言、单元测试、路由、readme.md文档等文件。所以每次慢慢创建这些文件太麻烦了，而且很多人修改路由文件等公共文件的时候会有很多冲突。所以开源项目中有很多脚本可以自动生成某些文件。
makefile
element-ui项目的根目录下有一个makefile，每个命令的作用都在注释里。Windows用户希望使用make命令下载脚本。Mac用户不需要。
@ #默认的#注释将被输出到日志中，但是@ #不会。
@#的功能。PHONY:忽略检查是否与下面脚本命令中的dist和test目录冲突，也就是说命令无论如何都会执行。假的：dist测试
@ #执行make命令时，默认情况下会执行帮助脚本。
默认：帮助
@ #执行make build-theme意味着执行npm run build:theme脚本，
@ #:冒号前面是执行的命令，冒号后面第二行第一个应该是制表符，后面是脚本命令。
@ #也就是说，下面是‘tab NPM NPM build:theme’
#构建所有主题
@ #以上关于build theme的评论可以在下面的截图中查看，会在日志中输出。
构建主题：
npm运行构建：主题
安装：
npm安装
开发人员：
npm运行开发
@ # $()是一个使用函数。
@ # $ @是当前命令本身，如“新建”，而$ @是新的。
@ # MakeMDGoals特殊变量，记录命令行参数指定的目标列表。也就是说，使用这个变量，我们可以得到命令行参数。
@ #例如，当我们创建一个新组件时，使用脚本make new wailen` MAKECMDGOALS等于wailen。
@# filter-out反过滤功能，过滤掉$(MAKECMDGOALS)中所有包含$ @的内容
@ #结合new.js的内容，下面的脚本意思是新建一个编队，传入组件名，一定不能是新的。如果组件名称是新的，可以查看下面的截图。
新：
节点build/bin/new.js $(filter-out $@，$(MAKECMDGOALS))
@ #省略了部分脚本，有兴趣的可以自行查看源代码。
帮助：
@ echo \ 033[35mm ake \ 033[0m \ 033][1m命令指令\ 033 [0m]
@ echo \ 033[35mm ake install \ 033[0m \ t \ 033[0m \ t \ 033[0m \ t \ 033[0m \ t-安装依赖]
@ echo \ 033[35mm make new component-name[中文名]\ 033[0m \ t-新建组件包。例如，“制作新按钮”
@ echo \ 033[35mm ake dev \ 033[0m \ t \ 033[0m \ t \ 033[0m \ t \ 033[0m \ t-开发模式]
@ echo \ 033[35mm ake dist \ 033[0m \ t \ 033[0m \ t \ 033[0m \ t-编译项目并生成目标文件]
@ echo \ 033[35mm ake deploy \ 033[0m \ t \ 033[0m \ t \ 033[0m \ t \ 033[0m \ t-部署演示
@ echo \ 033[35mm ake pub \ 033[0m \ t \ 033[0m \ t \ 033[0m \ t \ 033[0m \ t-发布在npm上]
@ echo \ 033[35mm ake new-lang lang \ 033[0m \ t \ 033[0m \ t \ 033[0m \ t-给网站添加新语言。例如，“创建新语言”
#注释输出
过滤新关键字。当传入的参数是新的时，将其过滤掉。
当然，如果你不想用make直接执行节点脚本，比如make new的组件名就相当于nodebuild/bin/new.js的组件名。
new.js
New.js是自动化的核心文件。我们先考虑一下。创建一个组件文件无非是两个步骤。
创建文件
添加内容
file-save
主要是通过file-save包来创建文件和添加内容。我们先来看看api。
const file save=require( file-save )；
const content= const fs=require( fs )；
Const callback=()={console.log(脚本执行)}
保存(“文件路径”)。write(文件内容如上述内容， utf8 ，回调)//成功的内容写入将触发回调。写(继续添加内容， utf8 )。end(\n) //文件操作以空行结束。
这将生成以下文件
更多文档请参见文件-保存。
在element-ui中，要创建的文件名和代码内容由Files数组对象管理。
这样就可以通过直接循环文件来创建相应的文件。
//创建包
//组件生成的目录
const package path=path . resolve(_ _ dirname，././packages ，component name)；
Files.forEach(file={
文件保存(path.join(PackagePath，file.filename))。写入(file.content， utf8 )。end( \ n )；
});
引用资源文件的修改
另外，一般在创建一个组件时，需要修改组件需要引用的地方，比如路由配置文件。我们也可以通过文件-保存来添加相应的路线。文件保存本身将覆盖前一个文件的内容，也就是说，它将被删除并重新生成。所以，如果在原有基础上增加操作，就需要获取原文件的内容，然后在此基础上拼接新的内容。我们可以这样做：
const file save=require( file-save )；
const fs=require( fs )；
const content=` const file save=require( file-save )；`
const oldCode=fs.readFileSync(。/demo.js )
文件保存( demo.js )。写入(旧代码内容，“utf8”)。结束( \n )
即通过fs模块读取文件的旧内容，然后进行拼接。element-ui的作用是：
fs.createWriteStream
文件保存的原理是通过api fs.createWriteStream做一层封装。
简单来说就是用。
const fs=require(fs )
//创建一个可以写fs的对象。WriteStream类，从Stream继承。可写的
const writer=fs . create writestream( create stream . js )，{//查找文件，如果文件不存在，则创建它。
//默认值为w .调用writer.write方法写数据时，会直接覆盖文件的所有内容，
//文件之前的所有内容都将被删除，并写入新的数据。
标志：“w”
})
//将数据写入流
Writer.write(此文件的新内容)
文件保存的源代码内容可以在下面的伪代码中查看。
const savefs={}
savefs。_create_dir=function (fp，opts) {
mkdirp.sync(fp，opts)；
}
savefs.wstream=函数(文件){
var ws=fs . createwritestream(file)；
this.writer=ws
还这个；
}
savefs.write=function(chunk，encoding，cb) {
.
}
savefs.end=function(chunk，encoding，cb) {
.
}
savefs.finish=function(cb) {
.
}
savefs.error=function(cb) {
.
}
导出{ savefs }
当然，其实我们可以直接使用node的fs.writeFile API来创建文件，
Fs.writeFile(文件路径，写什么，[编码]，回调函数)；
您可以找到与文件保存相同的参数。
总结
说到底，自动创建组件无非是增加了两个核心创建文件。文件保存包可以实现这两个操作，然后我们可以根据自己的业务配置生成文件的路径和内容，修改一些公共文件对新文件资源的引用。是不是觉得按节点写脚本比写后端有趣多了~
这就是本文关于构建新组件的元素脚本自动化的实现示例。有关元素脚本自动化构建新组件的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。