vue 輔助開發工具
前言
有沒有因為新建view,component,store的繁瑣操作而苦惱,需要新建文件件,新建vue文件,新建js文件,注冊路由...等一系列無價值操作浪費時間,為了解決這個問題,也在掘進看了一些文章引發的思路,自己就利用node操作文本的特性,做了一個快速新建view,component,store的工具.
好處
- 幫助我們簡化新增過程,減少操作,畢竟我們大家都很懶😁
- 有利於統一命名規范,我們可以在新增操作固定命名規范,媽媽再也不用擔心每個人的命名規范都不一致的問題了😁
- 以此為思路實現更多的工具,減少大家的工作量
項目地址: https://github.com/Jeff-Bee/vue-tools
聊聊思路
這里大致把實現思路說一下,就是使用node把想要創建的文件自動生成,自動注冊到路由或者store中.
以新增全局組件home講個例子
1. 這個是我們大致的目錄結構,正常操作是在components目錄下新增Home目錄,在Home目錄中新增Home.vue和index.js用於導出組件,然后在在components目錄下的index.js中注冊全局路由.
2. 我們就利用node幫我們新建文件,然后讀取文件使用正則匹配到index.js中的引入組件和注冊組件位置,插入本次新增組件即可
引入方法
- 把與src平級的scripts文件夾復制到項目中
- 項目目錄結構必須滿足components文件夾存放組件,views文件夾存放頁面,store文件夾存放vuex
- 在package.json文件加入如下配置項
"scripts": {
"new:view": "node ./scripts/generateView/index", "new:comp": "node ./scripts/generateComponent/index", "new:store": "node ./scripts/generateStore/index" },
- 然后就可以類似使用npm run命令新增頁面,組件,store了
寫在最后
目前只想到這么多,大家還有什么感覺可以使用自動生成簡化開發的可以提出來.