如何通过shell脚本自动生成vue文件

前言

最近在写nuxt项目的时候，每次都要新建一个页面，然后引入各种需要的依赖关系，非常麻烦。因此，有必要编写一个脚本来自动生成文件，而无需手动创建

现在写下实现方法，供大家参考

它可以直接在Mac下运行，在需要安装Cygwin软件并在Windows下配置环境变量后运行

施用方式

1.需要修改package.json的scrpts并添加一个create或custom的名称，主要是让我们在终端输入指令后运行相应的脚本。

package.json

2.在项目的根目录中创建一个模板文件夹来放置您自己的模板文件。

文件内容根据项目需要进行修改

模板

3.然后在构建文件夹下创建一个新的create.sh脚本文件(代码如下)

4.然后在终端输入npm运行创建命令。此命令支持携带不必要的参数作为文件名(npm运行创建xxxx)或直接输入npm运行创建

影响

文件名不能重复。如果重复，不会覆盖原始文件，只会输出错误

重名

生成的文件及其内容

生成的文件

创建. sh脚本文件

修改组件路径和页面路径，以更改为它们自己的真实模板路径

运行脚本后，

组件在组件文件夹下创建新组件

Pages在pages文件夹下创建一个新页面

#!/usr/bin/env shcreate(){ if[[$ reply=~ ^[yy]$]]然后PATH_DIR='。/components/$ NAME ' else PATH _ DIR='。/pages/$NAME' fi if [！-d '$PATH_DIR' ]然后mkdir $ PATH _ DIR if[[$ PATH _ DIR=~ ' components ']]然后CLASE _ NAME=' COMPONENT-$ NAME ' CP $ COMPONENT _ PATH ' $ PATH _ DIR/index . vue ' else CLASE _ NAME=' PAGE-$ NAME ' CP $ PAGE _ PATH ' $ PATH _ DIR/index . vue '完成生成\ N.\n' else echo -e '\n文件夹已经存在\ N$PATH_DIR' fi}set -eecho '开始生成代码.'component _ path='。/template/component . vue“page _ path=”。/template/page.vue '如果[[-n $1]]那么name=$ 1 read-p '(y/n)'-n 1-relse echo '没有找到名称。“请输入一个名称，”读取名称读取p '代码$ NAME-是组件吗？(y/n)' -n 1 -rfi创建模板组件引用

template div class=' class-' component/div/templatescriptexport default { props : }、data(){ return } }、methods : { init(){ } }/script style lang=' scss '作用域@ import ' @/common/scss/var . scss '；@ import ' @/common/scss/mixin . scss '；类-{ }/样式模板页面引用

template div class=' class-' page/div/templatescriptimport { baseMixin } from ' @/common/mixin/index ' export default { mixin :[baseMixin]，data(){ return } }，async asyncData({ $axios }) {}，head() { return { title: '' } }，mounted() { this.init() }，methods 3: { init(){ } }/script style lang=' SCS '作用域@import '@/common/scss/var。@ import ' @/common/scss/mixin . scss '；类-{ }/样式摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。谢谢你的支持。