定制团队自己的 Vue template
一,我们使用vue-cli 可以快速初始化vue.js的项目,官方提供了webpack,pwa,browserify-sipmple,等常用template
二、置知识
1,模板结构
template:该目录主要存放模板文件,初始化项目生成文件来源与此
meta.js/meta.json:用于描述初始化项目时命令行交互动作
2,Metalsmith
Metalsmith 在渲染文件担任的角色是gulp.js,可以通过添加一些插件对结构文件处理,如重命名,合并等
3,download-git-repo
使用vue-cli初始化项目使用该工具下载目标仓库
4,inquire.js
vue-cli库下载完成,使用inquire.js使用交互式命令对meta.js进行配置,
5,Handlebars.js
这里 vue-cli 选用的是 Handlebars.js —— 一个简单高效的语义化模板构建引擎。
三、meta.js 配置文件(Inquirer.js)
1,helpers:自定义 Handlebars.js 的辅助函数
2,prompts:基于 Inquirer.js 的命令行交互配置
3,filters:根据命令行交互的结果过滤将要渲染的项目文件
4,completeMessage:将模板渲染为项目后,输出一些提示信息,取值为字符串
5,metalsmith:配置 Metalsmith 插件,文件会像 gulp.js 中的 pipe 一样依次经过各个插件处理
四、结合本身项目总结
辅助函数可以接受若干个参数,最后一个参数options为辅助函数的钩子,调用options.fn(this)即输出该辅助函数运算结果为真时的内容,反之调用options.inverse(this)的内容
filters中键名是要控制输出的文件的路径,键名对应的值为命令行交互中得到的数据
将模板渲染为项目后输出一些提示信息,取值为字符串
2,手写一个loader
txt-loader.js的代码
在app.js里面引用
定制团队自己的 Vue template的更多相关文章
- vue init深度定制团队自己的Vue template
大家都知道,使用vue-cli可以快速的初始化一个基于Vue.js的项目,全局安装脚手架之后,你可以通过vue list命令看到官方提供的5个模板 vue list 当开发一个独立项目的时候,使用官方 ...
- 团队协作统一vue代码风格,vscode做vue项目时的一些配置
1. 安装Vetur 扩展 主要是用于让vscode能识别vue文件,对vue代码进行高丽处理,并且它内置了一些代码格式化的设置 2. 安装ESLint 如果你的项目已经开启了eslint规范, 再有 ...
- 团队开发前端VUE项目代码规范
团队开发前端VUE项目代码规范 2018年09月22日 20:18:11 我的小英短 阅读数 1658 一.规范目的: 统一编码风格,命名规范,注释要求,在团队协作中输出可读性强,易维护,风格一致 ...
- Python - 定制pattern的string模板(template) 具体解释
定制pattern的string模板(template) 具体解释 本文地址: http://blog.csdn.net/caroline_wendy/article/details/28625179 ...
- vue template
vue template <template> <div class="custom-class"> ... </div> </templ ...
- vue & template & v-else & v-for bug
vue & template & v-else & v-for bug nested table bug https://codepen.io/xgqfrms/pen/wvaG ...
- vue init定制团队模板之meta.js/meta.json写法入门
在上一篇文章中,我们提到了meta.js,这次我们详细了解一下meta.js里面各个模块的写法. 对于 meta.js/metajson 文件, 目前主要字段如下: prompts<Object ...
- vue init定制团队模板使用方法
每次做项目都要自己搭建项目目录,或者换了公司就的重新搭建项目目录,是不是很麻烦呢?有没有想过一次性把项目目录搭建好,以后直接用呢?你首先想到的可能是复制自己原来的项目,然后删除.修改等等.然而有个更方 ...
- vue template标签
在普通的html里面: template标签默认有个 display:none; 属性,并且其里面的内容是不可见的. 在vue里面: template标签类似一个隐藏的div,在审查元素的时候是找不到 ...
随机推荐
- linux运维、架构之路-Kubernetes集群部署
一.kubernetes介绍 Kubernetes简称K8s,它是一个全新的基于容器技术的分布式架构领先方案.Kubernetes(k8s)是Google开源的容器集群管理系统(谷歌内部 ...
- 15 Spring Boot Shiro 验证码
1. <dependency> <groupId>com.github.axet</groupId> <artifactId>kaptcha</a ...
- js加密php解密(CryptoJS)碰到的坑
今天做了一个功能,需要js传密码到php文件,对js密码 进行判断,为想为这个传输过程进行解密,参考了网上的一个方法(这个方法我只是使用了,并没有太深了解0.0) 首先要引入3个js文件 (在网上可搜 ...
- mysql Alias操作符 语法
mysql Alias操作符 语法 作用:为列名称和表名称指定别名 大理石构件 语法:SELECT column_name(s) FROM table_name AS alias_name mysql ...
- Java大文件上传详解及实例代码
1,项目调研 因为需要研究下断点上传的问题.找了很久终于找到一个比较好的项目. 在GoogleCode上面,代码弄下来超级不方便,还是配置hosts才好,把代码重新上传到了github上面. http ...
- 手动写Makefile编译Android NDK的so
之所以摒弃NDK,是因为NDK编译出来的so太大,而且导出表总有一些没用的符号.而且手动编译的话,可以得到编译过程中间的.i和.s文件,可以删除一些没用的汇编代码.现在代码列出来:我的NDK C的代码 ...
- [LOJ2289][THUWC2017]在美妙的数学王国中畅游:Link-Cut Tree+泰勒展开
分析 又有毒瘤出题人把数学题出在树上了. 根据泰勒展开,有: \[e^x=1+\frac{1}{1!}x+\frac{1}{2!}x^2+\frac{1}{3!}x^3+...\] \[sin(x)= ...
- 大数据笔记(十五)——Hive的体系结构与安装配置、数据模型
一.常见的数据分析引擎 Hive:Hive是一个翻译器,一个基于Hadoop之上的数据仓库,把SQL语句翻译成一个 MapReduce程序.可以看成是Hive到MapReduce的映射器. Hive ...
- TimeUtils
public class TimeUtils { public static final int YEAR = 0; public static final int MONTH = 1; public ...
- CMakeLists.txt 语法
命令不区分大小写(参数区分大小写) add_executable(demo main.cpp main.h main.rc) 用main.cpp源文件,main.h文件,main.rc文件构造可执行文 ...