基于node+vetur+Vue Styleguidist 生成全局组件配置(代码提示)

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情

前言

做这个主要是因为在新公司需要了解公用组件,发现没有代码提示然后用Element-ui发现是有提示的然后查看了Vetur文档发现Vetur针对Element有做捆绑,再就是看到了手动新增全局组件代码

效果图

代码中用的库介绍

• vue-docgen-api:用来解析sfc文件获取详细内容

安装

yarn add vue-docgen-api

不多bb,直接上代码

1.首先需要递归整个项目获取sfc文件地址

// mian.js
const fs = require('fs')
const path = require('path')
const { parse } = require('vue-docgen-api')
// 递归循环获取sfc文件
const readDirRecur = async (file, callback) => {
  let files = await fs.readdirSync(file)
  files = files.map((item) => {
    var fullPath = path.resolve(`${file}/${item}`)
    if (item === 'node_modules') return
    const isDir = fs.statSync(fullPath).isDirectory()
    if (isDir) {
      // eslint-disable-next-line no-return-await
      readDirRecur(fullPath, callback)
    } else {
      const extname = path.extname(fullPath, '.vue')
      if (extname === '.vue') {
        callback && callback(fullPath)
        return item
      }
    }
  })
  return Promise.all(files)
}

readDirRecur(__dirname, function (filePath) {
  fileList.push(filePath)
}).then(function () {
  console.log('do something...')
}).catch(function (err) {
  console.log(err)
})

2.获取所有sfc文件地址后遍历解析sfc获取数据

//这里就是do something ^-^
Promise.all(fileList.map(item => getVueScript(item))).then(() => {
    veturWrite()
})

// 写入tag、attrubutes
const veturWrite = async () => {
  createDir(path.resolve('vetur'))
  await formatterDate(vueScriptList)
  createFiles(path.resolve('vetur/tags.json'), JSON.stringify(tagJson))
  createFiles(
    path.resolve('vetur/attributes.json'),
    JSON.stringify(attributesJson)
  )
}
// 新建文件
const createFiles = async (p, data) => {
  await fs.writeFileSync(p, data)
}

function createDir (name) {
  if (fs.existsSync(name)) {
    return true
  } else {
    if (createDir(path.dirname(name))) {
      fs.mkdirSync(name)
      return true
    }
  }
}
// 格式化数据
const formatterDate = async data => {
  return data.forEach(item => {
    tagJson[item.displayName] = {
      description: `this is components ${item.displayName}`,
      attributes: item.props && item.props.map(prop => {
        attributesJson[`${item.displayName}/${prop.name}`] = {
          description: prop.description ? prop.description : prop.type.name
        }
        return prop.name
      })
    }
  })
}

3.根目录下：node main.js

4.在package.json中加入

"vetur": { "tags": "./vetur/tags.json", "attributes": "./vetur/attributes.json" }

5.最后重启vscode就可以愉快的看到代码提示啦！！！