计算机教程

当前位置:3522.com > 计算机教程 > 自定义自己的vue-cli模板

自定义自己的vue-cli模板

来源:http://www.4sports-uk.com 作者:3522.com 时间:2019-05-12 08:06

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

自定义自己的vue-cli模板

在使用vue-cli的过程中,常用的webpack模板只为我们提供最基础的内容,但每次需要新建一个项目的时候就需要把之前项目的一些配置都搬过来,这样就造成挺大的不方便,如果是作为一个团队,那么维护一个通用的模板,我认为是挺有必要的。
例如下面是我常用构建项目的目录。

src
├─api  //接口
├─assets //图片
├─components  //公用组件
├─css  //样式 主要是scss
├─js //第三方以及工具类
├─page  //页面
├─router //路由
└─store  //vuex

下面说下怎么自定义自己的vue-cli模板

vue list

fork一个自己的模板

https://github.com/vuejs-templates/webpack fork 一个库,再提交自己的修改到【自己的分支】,因为我们大部分内容还是在这个基础上做修改的。

关于vue-cli的源码分析可以参考下这个文章从vue-cli源码学习如何写模板

vuejs-templates/webpack目录如下,

│  .gitignore
│  circle.yml
│  deploy-docs.sh
│  LICENSE
│  meta.js   //该文件必须导出为一个对象, 用于定义模板的 meta 信息
│  package.json
│  README.md
│  test.sh
├─docs  // 一些介绍该模板一些模块的文档
└─template  //模板的内容


D:worknodetestwebpack>

3522.com 1

meta.js

meta.js主要是定义模板的一些配置, 目前可定义的字段如下:

  • prompts<Object>: 收集用户自定义数据
  • filters<Object>: 根据条件过滤文件
  • completeMessage<String>: 模板渲染完成后给予的提示信息, 支持 handlebars 的 mustaches 表达式
  • complete<Function>: 模板渲染完成后的回调函数, 优先于 completeMessage
  • helpers<Object>: 自定义的 Handlebars 辅助函数

当开发一个独立项目的时候,使用官方提供的template确实很方便,省去了繁琐的依赖配置,webpack等配置问题,甚至连项目目录结构也不需要去考虑,着实方便。但是,当我们需要开发多个系统,每个系统依赖的包,webpack都不一致的时候,vue官方提供的模板就显得捉襟见肘了,这是我们就需要去考虑,能否开发一套自己定制化的template,答案是肯定的,那么在开始定制之前我们需要了解一些前置知识。

prompts

有用过vue-cli的同学应该有看过下面的这个图

image

看下 prompts的代码

 "prompts": {
    "name": {  //项目名
      "type": "string",
      "required": true,
      "message": "Project name"  
    },
    "description": {  
      "type": "string",
      "required": false,
      "message": "Project description",
      "default": "A Vue.js project"
    },
    "author": {
      "type": "string",
      "message": "Author"
    },
    "router": {   
      "type": "confirm",
      "message": "Install vue-router?"
    },
    ...   
 }

所有的用户输入完成之后, template 目录下的所有文件将会用 Handlebars了解相关的语法点这里) 进行渲染. 用户输入的数据会作为模板渲染时的使用数据,例如,在cmd确认使用router后,那么main.js就会import router,main.js中源码:

{{#router}}
import router from './router'{{#if_eq lintConfig "airbnb"}};{{/if_eq}}
//类似 {{#if_eq lintConfig "airbnb"}};{{/if_eq}}是启用lint后一些语法的检查

{{/router}}

因为开发常用到vuex,我们可以加入vuex,修改meta.js

 "vuex":{
      "type": "confirm",
      "message": "Install vuex?"
    },

安装过程中,就会询问是否安装vuex

一、前置知识

helper

上面的if_eq,还有源码中的unless_eq是原本vue cli中注册的那个辅助函数,在vue-cli中的generate.js:

# vue-cli/lib/generate.js

//...

// register handlebars helper
Handlebars.registerHelper('if_eq', function (a, b, opts) {
  return a === b
    ? opts.fn(this)
    : opts.inverse(this)
})

Handlebars.registerHelper('unless_eq', function (a, b, opts) {
  return a === b
    ? opts.inverse(this)
    : opts.fn(this)
})

类似的,你也可以自定义一些函数,方便你自己去处理一些数据,在meta.jshelpers对象中可以加入自己的方法,如源码中就有注册一个if_or的方法,你在文件中就可以用{{#if_or a b}}{{/if_or}}去使用

"helpers": {
    "if_or": function (v1, v2, options) {
      if (v1 || v2) {
        return options.fn(this);
      }

      return options.inverse(this);
    }
  },

模板结构 

首先我们了解一下模板的主要结构,当我们从githup官网上去看vue官方给们提供的模板结构的时候,发现模板其实很简单,主要包括两个部分

  1. template 该目录用于存放模板文件,当你执行vue init <templateName> <myProject>的时候,初始化项目文件目录结构就来与此
  2. meta.js/meta.json用于描述初始化项目的时候在命令行和用户交互的行为

3522.com 2

filters

filters 是根据条件过滤文件,源码:

 "filters": {
    ".eslintrc.js": "lint",
    ".eslintignore": "lint",
    "config/test.env.js": "unit || e2e",
    "test/unit/**/*": "unit",
    "build/webpack.test.conf.js": "unit",
    "test/e2e/**/*": "e2e",
    "src/router/**/*": "router"  //例如上面的 router 为true的时候,就会加入这个目录
  },

同样,这里我可以加入自己的vuex目录,当,vuextrue的时候,会导入这个目录

 "filters": {
    ".eslintrc.js": "lint",
    ".eslintignore": "lint",
    "config/test.env.js": "unit || e2e",
    "test/unit/**/*": "unit",
    "build/webpack.test.conf.js": "unit",
    "test/e2e/**/*": "e2e",
    "src/store/**/*": "vuex",  //加入自己的目录
    "src/router/**/*": "router"
  },

然后在main.js引入vuex

{{#vuex}}  //vuex为true的时候就会写入这些
import Vuex from 'vuex'{{#if_eq lintConfig "airbnb"}};{{/if_eq}}
import store from  './store/store'{{#if_eq lintConfig "airbnb"}};{{/if_eq}}
Vue.use(Vuex){{#if_eq lintConfig "airbnb"}};{{/if_eq}}
{{/vuex}}

//store.js 文件是我写vuex的入口

new Vue({
  el: '#app',
  {{#router}}
  router,
  {{/router}}
  {{#vuex}}
  store,
  {{/vuex}}
  {{#if_eq build "runtime"}}
  render: h => h(App){{#if_eq lintConfig "airbnb"}},{{/if_eq}}
  {{/if_eq}}
  {{#if_eq build "standalone"}}
  template: '<App/>',
  components: { App }{{#if_eq lintConfig "airbnb"}},{{/if_eq}}
  {{/if_eq}}
}){{#if_eq lintConfig "airbnb"}};{{/if_eq}}

还有在template/package.json3522.com,中也要加入vuex

 "dependencies": {
    "vue": "^2.5.2"{{#router}},
    "vue-router": "^3.0.1"{{/router}}{{#vuex}},
    "vuex": "^2.1.1"{{/vuex}}

  },

后续的话只需要将自己需要的文件跟文件夹,加入到template/src,例如,我这里加入一个询问是否是移动端的,是移动端的话,会引入 lib-flexible.js以及相关配置的scss文件

  "isMobile":{
        "type": "confirm",
        "message": "is Mobile project?"
    },

最后,提交到github自己的分支上,就可以使用了

vue init jamielhf/webpack#template1 name

download-git-repo

使用vue-cli初始化项目时会使用该工具来下载目标仓库,默认我们平常都会下载webpack这个模板(vue init webpack myProject),自定义模板可以是一个GitHub仓库,也可以是一个本地文件,使用如下命令来初始化项目:

vue init username/repo my-project //其中username为自定义模板仓库所在GitHub用户名,repo是仓库名
vue init ./../ my-project  //本地文件

github地址

https://github.com/jamielhf/webpack/tree/template1

本文由3522.com发布于计算机教程,转载请注明出处:自定义自己的vue-cli模板

关键词: 3522.com

上一篇:Rollup处理并打包JS文件项目实例代码

下一篇:没有了