前言前几天因为看源码的热情，搞了个玩具Js库Strview.js。为什么会有这样的玩具图书馆？其实也不全是因为晚上没事做，主要是想通过实际操作来锻炼自己的开发能力。之前我也写过一篇文章，那篇文章只是大概的介绍，没有细说。之前，你可能认为它类似于Vue.js。不错，是参考了Vue.js的思路，但还是有一些差异（个人看法）。那么，今天，本文就来介绍一下基于Strview.js的项目脚手架工具StrviewApp。如果您觉得对您有用，可以继续阅读。如果你认为这篇文章绝对是一篇垃圾邮件，你也可以避开它。好的，让我们现在开始谈正事。你准备好了吗？跟我来！StrviewAPP快速上手你可以通过StrviewCLI快速初始化StrviewAPP项目，你可以这样做：全局安装。npmistrview-cli-g安装完成后，可以查看版本。strview-cli-v最后初始化项目，就是自定义项目的名字。strview-cliinit或者strview-clii这样就构建了一个StrviewAPP工程。StrviewAPP项目结构下图是StrviewAPP项目的组织结构。下面，我将描述每个文件和文件夹的作用。config这是webpack的配置文件夹，这里配置了所有关于webpack的配置。文件夹中有以下三个文件，分别为：-webpack.base.js//基础配置-webpack.dev.js//开发环境配置-webpack.pro.js//生产环境配置公共资源文件夹.-favicon.ico//网站logo-index.html//模板文件.gitignore哪些文件不需要加入版本管理。.prettierrcPrettier规则配置文件。package.json定义了本项目所需的各个模块，以及项目配置信息（如名称、版本、许可证等元数据）。src文件夹是StrviewAPP项目的主文件夹。让我们看看这个文件夹里有什么。-assets//存放静态文件-components//组件文件夹-data//publicstate文件夹-methods//方法文件夹-style//样式文件夹-template//模板文件夹-App.js//页面入口-main.js//项目入口文件src文件夹详解上面我们已经分析了项目结构，接下来我们将进一步分析src文件夹中的文件组成以及它们是如何相互配合的。1.main.js首先我们来看main.js文件，它是项目的入口文件。让我们看一下文件的内容。import{createView}from'strview';importdatafrom'./data';importAppfrom'./App';importmethodsfrom'./methods';createView({el:"#app",template:App,data});//该事件在createviewAPI方法()之后处理；我们首先引入了strview.js并引入了createViewAPI来创建视图。那么，让我们跳下去看看这个API是如何使用的。首先我们传入一个对象字面量，第一个属性是el属性，也就是挂载的DOM节点。第二个属性是template属性，就是用来展示视图的模板。第三个属性是data属性，传入的值就是显示的数据。最后我们看到有这么一行注释TheeventishandledafterthecreateviewAPI，也就是说事件方法必须在createViewAPI之后调用，也就是methods();这里。2.App.js上面说了App.js是使用模板来展示视图的，下面我们就来看看吧。importmyParagraphfrom'./components/myParagraph';importcardfrom'./components/card';importhelloTemplatefrom'./template/helloTemplate';import'./style/index.css';constApp=`${helloTemplate}点击{a}，{b}，（a和b都变了）