在開發組件時，我們可能會期望一類組件放在同一個代碼倉庫下，就像element那樣，我們可以使用element提供的腳手架，也可以使用vue cli 3創建一個更‘新'的項目。

項目創建

通過vue cli 3創建項目，創建文件夾packages用于存放組件。

單個組件目錄

在packages下就是每一個組件，每個組件和單獨項目一樣，會有package.json、README.md、src、dist等文件及目錄。

如何演示/調試組件

在組件開發過稱中，我們需要對組件進行展示，所以創建了examples文件夾，用于存放每個組件示例。

通過一個列表展示出所有的組件，點擊選擇當前開發的組件，進入對應的example。

路由的根就是一個導航列表，然后每個組件對應一個路由，通過一個配置文件的components.js來生成這個路由。

// 路由import Navigation from "./Navigation";import components from "./components";let routes = components.map(component => ({ path: `/${component.name}`, component: () => import(`../examples/${component.name}`)}));routes.unshift({ path: "", component: Navigation});export default routes;

自動化腳本

創建/編譯/發布

創建新的組件，需要修改components.js配置文件，在examples和packages下創建對應目錄。

編譯/發布組件，因為倉庫下會有多個組件，如果一次發布多個，就需要進入每個文件夾下執行命令。

上面過程實現自動化，有很多種方式，比如可以通過npm run <script>，可以直接通過node命令等。這里我參考element，采用了Makefile。

創建script文件夾，其中包括創建腳本new.js和構建腳本build.js。

創建腳本

創建腳本主要就是目錄的創建與文件的寫入，其中可能需要注意的可能就是格式問題。

一種方式是在``之間，按照規范格式去完成寫入內容，這樣做比較麻煩，而且可能面臨格式化要求修改問題。

另一種方式是在腳本中引入eslint，腳本中的eslint.CLIEngine可以根據配置文件(比如.eslintrc.js)格式化文件。需要注意的是需要比命令行中配置需要多添加fix: true配置, 如下

const CLIEngine = eslint.CLIEngine;const cli = new CLIEngine({ ...require("../.eslintrc.js"), fix: true });

eslint在腳本中的使用方法，更具體的可以參考eslint文檔中Node.js API部分。

// scripts/new.js部分...components.push({ label: newName, name: newName})const updateConfig = function(path, components) { writeFile(path, `module.exports = ${JSON.stringify(components)}`).then(() => {  console.log("完成components.js")  // 格式化  CLIEngine.outputFixes(cli.executeOnFiles([configPath])) })}const createPackages = function(componentName) { try {  const dir = path.resolve(__dirname, `../packages/${componentName}/`)  // 創建文件夾  if (!fs.existsSync(dir)) {   fs.mkdirSync(dir)   console.log(`完成創建packages/${componentName}文件夾`)  }  // 寫入README  if (!fs.existsSync(`${dir}/README.md`)) {   writeFile(    `${dir}/README.md`,    `## ${componentName}  ### 使用說明      `   ).then(() => {    console.log("完成創建README")   })  }  // 寫入package.json  if (!fs.existsSync(`${dir}/package.json`)) {   writeFile(    `${dir}/package.json`,    `{ "name": "@hy/${componentName}", "version": "1.0.0", "description": "${componentName}", "main": "./dist/hy-${componentName}.umd.min.js", "keywords": [  "${componentName}",  "vue" ], "author": "", "license": "ISC"}    `   ).then(() => {    console.log("完成創建package.json")   })  }  // 創建index.js  if (!fs.existsSync(`${dir}/index.js`)) {   writeFile(`${dir}/index.js`, `export {}`).then(() => {    console.log("完成創建index.js")    CLIEngine.outputFixes(cli.executeOnFiles([`${dir}/index.js`]))   })  } } catch (err) {  console.error(err) }}const createExample = function(componentName) { try {  const dir = path.resolve(__dirname, `../examples/${componentName}/`)  // 創建文件夾  if (!fs.existsSync(dir)) {   fs.mkdirSync(dir)   console.log(`完成創建examples/${componentName}文件夾`)  }  // 寫入index.vue  if (!fs.existsSync(`${dir}/index.vue`)) {   writeFile(    `${dir}/index.vue`,    `<template></template><script>import { } from '../../packages/${componentName}/index'export default { components: {}}</script>   `   ).then(() => {    console.log(`完成創建examples/${componentName}/index.vue文件`)    // 格式化index.vue    CLIEngine.outputFixes(cli.executeOnFiles([`${dir}/index.vue`]))   })  } } catch (err) {  console.error(err) }}...