通過npm或yarn自動生成vue元件

2021-09-12 18:09:05 字數 2504 閱讀 7010

不知道大家每次新建元件的時候,是不是都要建立乙個目錄,然後新增乙個.vue檔案,然後寫template、script、style這些東西,如果是公共元件,是不是還要新建乙個index.js用來匯出vue元件、雖然有vscode有**片段能實現自動補全,但還是很麻煩,今天靈活運用scripts工作流,自動生成vue檔案和目錄。

template.js檔案,裡面的內容可以自己自定義,符合當前專案的模板即可

// template.js

module.exports = 元件 `

},entrytemplate: `import main from './main.vue'

export default main`

}

generatecomponent.js生成vue目錄和檔案的**

// generatecomponent.js`

const chalk = require('chalk') // 控制台列印彩色

const path = require('path')

const fs = require('fs')

const resolve = (...file) => path.resolve(__dirname, ...file)

const log = message => console.log(chalk.green(`$`))

const successlog = message => console.log(chalk.blue(`$`))

const errorlog = error => console.log(chalk.red(`$`))

const = require('./template')

const _ = process.ar**.splice(2)[0] === '-com'

const generatefile = (path, data) => 檔案已存在`)

return

} return new promise((resolve, reject) => else

})})

}// 公共元件目錄src/base,全域性註冊元件目錄src/base/global,頁面元件目錄src/components

_ ? log('請輸入要生成的元件名稱、如需生成全域性元件,** global/ 字首') : log('請輸入要生成的頁面元件名稱、會生成在 components/目錄下')

let componentname = ''

process.stdin.on('data', async chunk => 元件目錄已存在,請重新輸入`)

return

} else `)

await dotexistdirectorycreate(componentdirectory)

}try else

log(`正在生成 vue 檔案 $`)

await generatefile(componentvuename, vuetemplate(componentname))

log(`正在生成 entry 檔案 $`)

await generatefile(entrycomponentname, entrytemplate)

successlog('生成成功')

} catch (e)

} else .vue`)

const hascomponentdirectory = fs.existssync(componentdirectory)

if (hascomponentdirectory) 元件目錄已存在,直接生成vue檔案`)

} else `)

await dotexistdirectorycreate(componentdirectory)

}try `)

await generatefile(componentvuename, vuetemplate(componentname))

successlog('生成成功')

} catch (e)

} process.stdin.emit('end')

})process.stdin.on('end', () => )

function dotexistdirectorycreate (directory) )

})}// 遞迴建立目錄

function mkdirs (directory, callback) else )

}}

"scripts": ,
npm run new:view // 生成頁元件

npm run new:com // 生成基礎元件

或者yarn run new:view // 生成頁元件

yarn run new:com // 生成基礎元件

通過npm或yarn自動生成vue元件

不知道大家每次新建元件的時候,是不是都要建立乙個目錄,然後新增乙個.vue檔案,然後寫template script style這些東西,如果是公共元件,是不是還要新建乙個index.js用來匯出vue元件 雖然有vscode有 片段能實現自動補全,但還是很麻煩,今天靈活運用scripts工作流,自...

vscode 通過批處理快速自動生成c 專案

vscode 如何不敲命令生成c 專案。1.在儲存所有專案的資料夾下新建文字檔案。2.副檔名改為.bat。3.右鍵 通過vscode 開啟。4.輸入以下 儲存。echo off 1 set p projname input c project name if not exist projname d...

批量查詢語句如何通過儲存過程來自動生成

平時我們工作中常常會遇到分庫分表後,單單根據乙個條件無法定位該資訊具體是在哪個表中的時候,我們就需要多表搜尋,可是如果是在100張表裡面,我們還需要寫100條select語句嗎?這裡我們可以批量生成select語句。批量列印查詢條件 select from user channel info 0 u...