定义自己的vue模版

作者: 不止前端 | 来源:发表于2017-10-11 20:37 被阅读0次

前言

使用vue这个框架已经陆陆续续做了好几个项目了,不知不觉也已经在公司呆了4个月,转正了。时间如水。。。(省略一万字)。/咳~不瞎扯了,公司是直接用的官方脚手架生成项目,官方模版没有vuex,axios这些支持,模版也是最原始的模版,所以每次初始化项目都要做一堆配置,非常麻烦。所以就想着自己定制一套。
非常幸运,vue友好的支持我们自己的模版仓库,这样可以节省不少抄作业的过程。开始动手学习吧。

template

fork一份自己喜欢的模版 ——以webpack为例

vue有一个官方模版组织 传送门:vue官方模版

这些官方模版都是可以fork自行改造的。fork到自己仓库后 ,我们就可以通过

vue init username/repo my-project

来生成自己模版,这里有个小坑,仓库不要忘了加分支,比如

vue init xu455255849/vue-xu#devlop my-project

不然你永远都是直接init master分支,而无法生成自己模版。po主也是被同事点醒~😢

自定义配置插件

文件目录有个 meta.js文件,其中有个prompts参数,可以定义用户输入,我们可以在这个地方添加或者删除一些配置。

用户选择

这样我们就可以获取用户对是否安装插件的选择,根据用户的选择我们可以判断是否生成该文件。

vuex

根据用户选择渲染文件(启用插件)

根据用户的选择,我们要判断是否渲染文件以及安装一些一些依赖。

依赖 插件启用

不同的插件,可能方式是不一样的,所以需要根据插件引入方式编写渲染逻辑。

定制自己的模版风格

上面讲了一些插件的自定义,接下来在谈谈po主的一些模版风格给大家参考参考,当然,自己喜欢就好。

路由 定义页面

后记

上面po主提的还都是些比较大众的,基本的配置,这些配置其实还可以细化,比如 提供多个css预处理工具选择,less,sass,stylus,可以随意切换,根据项目类型渲染模版,定制不同类型的模版,都可以在开发中节约大量时间。有个模版~复制代码都舒服多了😄~~

如果觉得本文对你有所帮助,就star一下吧~大传送之术! 我的博客Github

po主目前还在开发一个npm工具,配套模版使用,大致功能就是通过命令直接生成页面 ,组件等文件,仓库已经就绪,下篇文章会写这个npm插件相关开发过程~

new一个文件。。。创建 html,,,css,,,js,,又要复制一些基本的代码进来。。麻烦死了~

相关文章

  • 定义自己的vue模版

    前言 使用vue这个框架已经陆陆续续做了好几个项目了,不知不觉也已经在公司呆了4个月,转正了。时间如水。。。(省略...

  • vue-router 2.x v-link 修改

    1.模版中指定路径 定义组件模版 3.定义路由,加载模版 和之前版本的vue-router不太一样, 使用时加以注...

  • VSCODE配置vue模板

    VSCode -vue项目,自定义.vue模版 1.安装vscode vscode官网地址: 2.安装一个插件,识...

  • Vue 入门实例

    一、模块1.创建Vue模版文件header.vue,定义模块 2.父文件中引入、注册、使用 三、父组件向子组件传值...

  • 设计模式-模版方法模式

    设计模式-模版方法模式 定义 模版方法模式(Template Method Pattern)又叫模版模式,是指定义...

  • 6 Vue渲染页面 html模版、template模版、rend

    Vue渲染页面可使用html模版、template模版、render渲染函数;渲染过程的底层原理:模版[strin...

  • vscode创建VUE模版

    1、安装一个插件,识别vue文件 2、新建代码片段 3、在vue.json里写下自己想要生成的vue模版 注意

  • Vue: slot实现动态列表

    使用插槽前需要掌握Vue自定义组件的基础,插槽应用于自定义模板中,用于构建子模版,最形象的例子就是 列表标题(父模...

  • MS Office SmartArt 开发解析

    这里说说 MS Office 2007 引入的 SmartArt 工具的模版开发,用来自己定义图表的模版。 MSD...

  • 10.1KOA ejs 模版引擎

    ejs 模版引擎 安装模版引擎中间件 安装模版引擎 定义模版 使用模版引擎 具体 ejs 模版引擎使用 http:...

网友评论

    本文标题:定义自己的vue模版

    本文链接:https://www.haomeiwen.com/subject/jwhgyxtx.html