当前位置: 首页 > Web前端 > HTML

自定义自己的vue-cli模板

时间:2023-04-02 20:53:10 HTML

自定义自己的vue-cli模板在使用vue-cli的过程中,常用的webpack模板只为我们提供了最基本的内容,但是每次我们都需要新建一个项目需要把之前项目的一些配置搬过来,会带来很多不便。如果是一个团队,那么维护一个通用的模板,我觉得还是很有必要的。例如下面是我常用的构建项目的目录。src├─api//接口├─assets//图片├─components//公共组件├─css//样式以scss为主├─js//第三方和工具├─page//页面├─router//路由└─store//vuex下面说说如何自定义自己的vue-cli模板从https://github.com/vuejs-templates/webpackfork一个模板fork一个库,然后提交自己的修改到【yourselfbranch】】,因为我们的大部分内容还是在此基础上修改的。vue-cli的源码分析,可以参考这篇文章,学习如何从vue-cli源码编写模板。vuejs-templates/webpack目录如下,│.gitignore│circle.yml│deploy-docs.sh│LICENSE│meta.js//这个文件必须导出为对象,用于定义的meta信息template│package.json│README.md│test.sh├─docs//介绍模板部分模块的一些文档└─template//模板内容D:\work\nodetest\webpack>meta.jsmeta.js主要是定义模板的一些配置。目前可以定义的字段如下:prompts:收集用户自定义数据filters:根据条件过滤文件completeMessage:模板渲染完成后给出的提示信息,支持mustachesexpressionofhandlebarscomplete:模板渲染完成后的回调函数,优先于completeMessagehelpers:自定义Handlebars辅助功能提示,有用过vue-cli的同学应该看过图下面看提示代码"prompts":{"name":{//项目名称"type":"string","required":true,"message":"项目名称"},"description":{"type":"string","required":false,"message":"Projectdescription","default":"AVue.jsproject"},"author":{"type":"string","消息”:“作者”},“路由器”:{"type":"confirm","message":"安装vue-router?"},...}所有用户输入完成后,template目录下的所有文件都会使用Handlebars(相关语法点这里)Render。用户输入的数据将作为模板渲染数据。比如cmd确认使用router后,main.js就会引入router。main.js中源码:{{#router}}importrouterfrom'./router'{{#if_eqlintConfig"airbnb"}};{{/if_eq}}//类似{{#if_eqlintConfig"airbnb""}};{{/if_eq}}是开启lint后的一些语法检查{{/router}}因为开发中常用vuex,我们可以添加vuex,修改meta.js"vuex":{"type":"confirm","message":"安装vuex?"},在安装过程中会询问vuex是否安装了helper上的if_eq,而源码中的unless_eq是原来vue-cli中注册的辅助函数,vue-cli中的generate.js:#vue-cli/lib/生成.js//。..//注册把手helperHandlebars.registerHelper('if_eq',function(a,b,opts){returna===b?opts.fn(this):opts.inverse(this)})Handlebars.registerHelper('unless_eq',function(a,b,opts){returna===b?opts.inverse(this):opts.fn(this)})同样的,你也可以自定义一些函数,方便一些数据,你可以在meta.js中的helpers对象中加入自己的方法,比如在源码中注册一个if_or方法,可以在文件中使用{{#if_orab}}{{/if_or}}使用“helpers”:{“if_or”:function(v1,v2,options){if(v1||v2){returnoptions.fn(this);}返回options.inverse(this);}},filters过滤器是根据条件过滤文件,源码:"filters":{".eslintrc.js":"lint",".eslintignore":"lint","config/test.env.js":“单元||e2e”,“测试/单元/**/*”:“单元”,“build/webpack.test.conf.js”:“单元”,“测试/e2e/**/*”:"e2e","src/router/**/*":"router"//比如上面router为true时,会添加这个目录},同理,这里我可以添加自己的vuex目录,当,vuex为true时,目录"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如果为真,这些importVuexfrom'vuex'{{#if_eqlintConfig"airbnb"}};{{/if_eq}}importstorefrom'./store/store'{{#if_eqlintConfig"airbnb"}};{{/if_eq}}Vue.use(Vuex){{#if_eqlintConfig"airbnb"}};{{/if_eq}}{{/vuex}}//store.js文件是我的写入vuexnewVue({el:'#app',{{#router}}router,{{/router}}{{#vuex}}store,{{/vuex}}{{#if_eqbuild"runtime"}}render:h=>h(App){{#if_eqlintConfig"airbnb"}},{{/if_eq}}{{/if_eq}}{{#if_eqbuild"standalone"}}template:'',组件:{App}{{#if_eqlintConfig"airbnb"}},{{/if_eq}}{{/if_eq}}}){{#if_eqlintConfig"airbnb"}};{{/if_eq}}同时将vuex“依赖项”添加到template/package.json:{"vue":"^2.5.2"{{#router}},"vue-router":"^3.0.1"{{/router}}{{#vuex}},"vuex":"^2.1.1"{{/vuex}}},那么你只需要在template/src中添加你需要的文件和文件夹即可,比如我这里添加一个query询问是否是移动端。如果是移动端,会引入lib-flexible.js和相关配置scss文件"isMobile":{"type":"confirm","message":"isMobileproject?"},最后提交到github的自己的分支,可以使用vueinitjamielhf/webpack#template1名称github地址https://github.com/jamielhf/webpack/tree/template1参考:vue-cliwebpack配置详解从vue-cli源码学习模板编写