一,我们使用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)的内容

name与author:交互字段名称,可在后续条件交互或模板渲染时通过该字段读取到交互的的结果。 type:交互类型,有input,confirm,list,rawlist,expand,checkbox,password,editor八种类型 message:交互的提示信息 when:进行该条件交互的先决条件 default:默认值,当输入为空时默认此值 required:默认为false,该值是否为必填项 validate:输入验证函数 模板基本语法(Handlebars.js)

filters中键名是要控制输出的文件的路径,键名对应的值为命令行交互中得到的数据

将模板渲染为项目后输出一些提示信息,取值为字符串

2,手写一个loader

{
test: /\.txt$/,
use: {
loader: path.resolve(__dirname, './txt-loader.js'),
options: {
name: 'YOLO'
}
}
}

txt-loader.js的代码

module.exports = function (source) {
// const options = utils.getOptions(this)
source = source.replace(/\[name\]/g, 'ddd')
return `export default ${JSON.stringify({
content: source,
filename: 'dddd'
})}`
}

在app.js里面引用

import test from './a.txt'
console.log('cccc' + JSON.stringify(test))

定制团队自己的 Vue template的更多相关文章

  1. vue init深度定制团队自己的Vue template

    大家都知道,使用vue-cli可以快速的初始化一个基于Vue.js的项目,全局安装脚手架之后,你可以通过vue list命令看到官方提供的5个模板 vue list 当开发一个独立项目的时候,使用官方 ...

  2. 团队协作统一vue代码风格,vscode做vue项目时的一些配置

    1. 安装Vetur 扩展 主要是用于让vscode能识别vue文件,对vue代码进行高丽处理,并且它内置了一些代码格式化的设置 2. 安装ESLint 如果你的项目已经开启了eslint规范, 再有 ...

  3. 团队开发前端VUE项目代码规范

    团队开发前端VUE项目代码规范 2018年09月22日 20:18:11 我的小英短 阅读数 1658   一.规范目的: 统一编码风格,命名规范,注释要求,在团队协作中输出可读性强,易维护,风格一致 ...

  4. Python - 定制pattern的string模板(template) 具体解释

    定制pattern的string模板(template) 具体解释 本文地址: http://blog.csdn.net/caroline_wendy/article/details/28625179 ...

  5. vue template

    vue template <template> <div class="custom-class"> ... </div> </templ ...

  6. vue & template & v-else & v-for bug

    vue & template & v-else & v-for bug nested table bug https://codepen.io/xgqfrms/pen/wvaG ...

  7. vue init定制团队模板之meta.js/meta.json写法入门

    在上一篇文章中,我们提到了meta.js,这次我们详细了解一下meta.js里面各个模块的写法. 对于 meta.js/metajson 文件, 目前主要字段如下: prompts<Object ...

  8. vue init定制团队模板使用方法

    每次做项目都要自己搭建项目目录,或者换了公司就的重新搭建项目目录,是不是很麻烦呢?有没有想过一次性把项目目录搭建好,以后直接用呢?你首先想到的可能是复制自己原来的项目,然后删除.修改等等.然而有个更方 ...

  9. vue template标签

    在普通的html里面: template标签默认有个 display:none; 属性,并且其里面的内容是不可见的. 在vue里面: template标签类似一个隐藏的div,在审查元素的时候是找不到 ...

随机推荐

  1. linux运维、架构之路-Kubernetes集群部署

    一.kubernetes介绍        Kubernetes简称K8s,它是一个全新的基于容器技术的分布式架构领先方案.Kubernetes(k8s)是Google开源的容器集群管理系统(谷歌内部 ...

  2. 15 Spring Boot Shiro 验证码

    1. <dependency> <groupId>com.github.axet</groupId> <artifactId>kaptcha</a ...

  3. js加密php解密(CryptoJS)碰到的坑

    今天做了一个功能,需要js传密码到php文件,对js密码 进行判断,为想为这个传输过程进行解密,参考了网上的一个方法(这个方法我只是使用了,并没有太深了解0.0) 首先要引入3个js文件 (在网上可搜 ...

  4. mysql Alias操作符 语法

    mysql Alias操作符 语法 作用:为列名称和表名称指定别名 大理石构件 语法:SELECT column_name(s) FROM table_name AS alias_name mysql ...

  5. Java大文件上传详解及实例代码

    1,项目调研 因为需要研究下断点上传的问题.找了很久终于找到一个比较好的项目. 在GoogleCode上面,代码弄下来超级不方便,还是配置hosts才好,把代码重新上传到了github上面. http ...

  6. 手动写Makefile编译Android NDK的so

    之所以摒弃NDK,是因为NDK编译出来的so太大,而且导出表总有一些没用的符号.而且手动编译的话,可以得到编译过程中间的.i和.s文件,可以删除一些没用的汇编代码.现在代码列出来:我的NDK C的代码 ...

  7. [LOJ2289][THUWC2017]在美妙的数学王国中畅游:Link-Cut Tree+泰勒展开

    分析 又有毒瘤出题人把数学题出在树上了. 根据泰勒展开,有: \[e^x=1+\frac{1}{1!}x+\frac{1}{2!}x^2+\frac{1}{3!}x^3+...\] \[sin(x)= ...

  8. 大数据笔记(十五)——Hive的体系结构与安装配置、数据模型

    一.常见的数据分析引擎 Hive:Hive是一个翻译器,一个基于Hadoop之上的数据仓库,把SQL语句翻译成一个  MapReduce程序.可以看成是Hive到MapReduce的映射器. Hive ...

  9. TimeUtils

    public class TimeUtils { public static final int YEAR = 0; public static final int MONTH = 1; public ...

  10. CMakeLists.txt 语法

    命令不区分大小写(参数区分大小写) add_executable(demo main.cpp main.h main.rc) 用main.cpp源文件,main.h文件,main.rc文件构造可执行文 ...