摘要:不知道大家每次新建組件的時候,是不是都要創建一個目錄,然后新增一個文件,然后寫這些東西,如果是公共組件,是不是還要新建一個用來導出組件雖然有有代碼片段能實現自動補全,但還是很麻煩,今天靈活運用工作流,自動生成文件和目錄。
不知道大家每次新建組件的時候,是不是都要創建一個目錄,然后新增一個.vue文件,然后寫template、script、style這些東西,如果是公共組件,是不是還要新建一個index.js用來導出vue組件、雖然有vscode有代碼片段能實現自動補全,但還是很麻煩,今天靈活運用scripts工作流,自動生成vue文件和目錄。
實踐步驟安裝一下chalk,這個插件能讓我們的控制臺輸出語句有各種顏色區分
npm install chalk --save-dev
yarn add chalk --save-dev
在根目錄中創建一個 scripts 文件夾
新增一個generateComponent.js文件,放置生成組件的代碼
新增一個template.js文件,放置組件模板的代碼
template.js文件,里面的內容可以自己自定義,符合當前項目的模板即可
// template.js module.exports = { vueTemplate: compoenntName => { return `${compoenntName}組件` }, 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(`${message}`)) const successLog = message => console.log(chalk.blue(`${message}`)) const errorLog = error => console.log(chalk.red(`${error}`)) const { vueTemplate, entryTemplate } = require("./template") const _ = process.argv.splice(2)[0] === "-com" const generateFile = (path, data) => { if (fs.existsSync(path)) { errorLog(`${path}文件已存在`) return } return new Promise((resolve, reject) => { fs.writeFile(path, data, "utf8", err => { if (err) { errorLog(err.message) reject(err) } else { resolve(true) } }) }) } // 公共組件目錄src/base,全局注冊組件目錄src/base/global,頁面組件目錄src/components _ ? log("請輸入要生成的組件名稱、如需生成全局組件,請加 global/ 前綴") : log("請輸入要生成的頁面組件名稱、會生成在 components/目錄下") let componentName = "" process.stdin.on("data", async chunk => { const inputName = String(chunk).trim().toString() // 根據不同類型組件分別處理 if (_) { // 組件目錄路徑 const componentDirectory = resolve("../src/base", inputName) // vue組件路徑 const componentVueName = resolve(componentDirectory, "main.vue") // 入口文件路徑 const entryComponentName = resolve(componentDirectory, "index.js") const hasComponentDirectory = fs.existsSync(componentDirectory) if (hasComponentDirectory) { errorLog(`${inputName}組件目錄已存在,請重新輸入`) return } else { log(`正在生成 component 目錄 ${componentDirectory}`) await dotExistDirectoryCreate(componentDirectory) } try { if (inputName.includes("/")) { const inputArr = inputName.split("/") componentName = inputArr[inputArr.length - 1] } else { componentName = inputName } log(`正在生成 vue 文件 ${componentVueName}`) await generateFile(componentVueName, vueTemplate(componentName)) log(`正在生成 entry 文件 ${entryComponentName}`) await generateFile(entryComponentName, entryTemplate) successLog("生成成功") } catch (e) { errorLog(e.message) } } else { const inputArr = inputName.split("/") const directory = inputArr[0] let componentName = inputArr[inputArr.length - 1] // 頁面組件目錄 const componentDirectory = resolve("../src/components", directory) // vue組件 const componentVueName = resolve(componentDirectory, `${componentName}.vue`) const hasComponentDirectory = fs.existsSync(componentDirectory) if (hasComponentDirectory) { log(`${componentDirectory}組件目錄已存在,直接生成vue文件`) } else { log(`正在生成 component 目錄 ${componentDirectory}`) await dotExistDirectoryCreate(componentDirectory) } try { log(`正在生成 vue 文件 ${componentName}`) await generateFile(componentVueName, vueTemplate(componentName)) successLog("生成成功") } catch (e) { errorLog(e.message) } } process.stdin.emit("end") }) process.stdin.on("end", () => { log("exit") process.exit() }) function dotExistDirectoryCreate (directory) { return new Promise((resolve) => { mkdirs(directory, function () { resolve(true) }) }) } // 遞歸創建目錄 function mkdirs (directory, callback) { var exists = fs.existsSync(directory) if (exists) { callback() } else { mkdirs(path.dirname(directory), function () { fs.mkdirSync(directory) callback() }) } }
配置package.json,scripts新增兩行命令,其中-com是為了區別是創建頁面組件還是公共組件
"scripts": { "new:view":"node scripts/generateComponent", "new:com": "node scripts/generateComponent -com" },
執行
npm run new:view // 生成頁組件 npm run new:com // 生成基礎組件 或者 yarn run new:view // 生成頁組件 yarn run new:com // 生成基礎組件
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/101598.html
摘要:基于搭建的前端模板,本倉庫,即可搭建完成一個新項目的基礎模板,源碼地址,歡迎或特性預編譯語言,做了一定的封裝,詳見雪碧圖移動的適配方案引入了及,可以自由地用去開發常用的工具類引用全局注入相關的文件,如通用的及等常用的的集合支持 基于 vue-cli3 搭建的前端模板,clone 本倉庫,即可搭建完成一個新項目的基礎模板,源碼地址,歡迎 star 或 fork 特性 CSS 預編譯語言...
摘要:好了,項目啟動了,目錄結構也清楚了,接下來就是整個現有項目的遷移了目前正在改造項目,文章尚未寫完,會抽時間不定期的繼續更新項目的改造過程及分享改造過程中遇到的問題 公司項目,最初只為了實現前后端分離式開發,直接選擇了vue框架進行開發,然而現在項目基本完成了,發現蜘蛛根本就抓取不到網站數據,搜索引擎搜出來,都是一片空白沒有數據,需要對項目做SEO優化。 本人第一次接觸SEO的優化,完全...
摘要:相信不少使用的開發者和公司都有定制一套屬于自己的組件庫的需求。針對這個問題,我搭建了一個專門用來構建的組件庫的開發框架,以節省搭建環境的勞動力,專心于組件庫的開發。首先我們嘗試了使用的方案,就是把組件庫直接作為項目的子模塊使用。 showImg(https://segmentfault.com/img/bVNais?w=1226&h=1159); 相信不少使用Vue的開發者和公司都有定...
摘要:下面一步步拆解上述流程。切換至分支檢測本地和暫存區是否還有未提交的文件檢測本地分支是否有誤檢測本地分支是否落后遠程分支發布發布檢測到在分支上沒有沖突后,立即執行。 背景 最近一直在著手做一個與業務強相關的組件庫,一直在思考要從哪里下手,怎么來設計這個組件庫,因為業務上一直在使用ElementUI(以下簡稱Element),于是想參考了一下Element組件庫的設計,看看Element構...
閱讀 2942·2021-10-28 09:32
閱讀 2967·2021-10-11 10:57
閱讀 3114·2021-10-08 10:05
閱讀 2588·2021-09-28 09:36
閱讀 2213·2019-08-30 15:55
閱讀 2270·2019-08-30 15:44
閱讀 2394·2019-08-30 14:02
閱讀 3076·2019-08-29 17:16