const fs = require('fs-extra') const path = require('path') const chalk = require('chalk') const uppercamelize = require('uppercamelcase') const Components = require('./get-components')() const packageJson = require('../package.json') const log = message => console.log(chalk.green(`${message}`)) const version = process.env.VERSION || packageJson.version function buildPackagesEntry () { const uninstallComponents = [] const importList = Components.map( name => `import ${uppercamelize(name)} from './${name}'` ) const exportList = Components.map(name => `${uppercamelize(name)}`) const intallList = exportList.filter( name => !~uninstallComponents.indexOf(uppercamelize(name)) ) const content = `import 'normalize.css' ${importList.join('\n')} const version = '${version}' const components = [ ${intallList.join(',\n ')} ] const install = Vue => { if (install.installed) return components.map(component => Vue.component(component.name, component)) } if (typeof window !== 'undefined' && window.Vue) { install(window.Vue) } export { install, version, ${exportList.join(',\n ')} } export default { install, version, ...components } ` fs.writeFileSync(path.join(__dirname, '../packages/index.js'), content) log('packages/index.js 文件已更新依赖') log('exit') } buildPackagesEntry()get-components.js const fs = require('fs') const path = require('path') const excludes = [ 'index.js', 'theme-chalk', 'mixins', 'utils', '.DS_Store' ] module.exports = function () { const dirs = fs.readdirSync(path.resolve(__dirname, '../packages')) return dirs.filter(dirName => excludes.indexOf(dirName) === -1) }
让 vue 解析 markdown
文档中心的 UI 是如何编码的这里不做阐述，小主可以自行参照 vue-cards 中的实现方式进行改造
需要安装以下的依赖，让 vue 解析 markdown
npm i markdown-it-container -D npm i markdown-it-decorate -D npm i markdown-it-task-checkbox -D npm i vue-markdown-loader -D
关于 vue.config.js 的配置在 vue-cards 该项目中也有了，不做阐述
这里将补充高亮 highlight.js 以及点击复制代码 clipboard 的实现方式
安装依赖
npm i clipboard highlight.js改造 App.vue ，以下只是列出部分代码，小主可以根据自己的需求进行添加
<script> import hljs from 'highlight.js' import Clipboard from 'clipboard' const highlightCode = () => { const preEl = document.querySelectorAll('pre') preEl.forEach((el, index) => { hljs.highlightBlock(el) const lang = el.children[0].className.split(' ')[1].split('-')[1] const pre = el const span = document.createElement('span') span.setAttribute('class', 'code-copy') span.setAttribute('data-clipboard-snippet', '') span.innerHTML = `${lang.toUpperCase()} | COPY` pre.appendChild(span) }) } export default { name: 'App', mounted () { if ('onhashchange' in window) { window.onhashchange = function (ev) { let name = window.location.hash.substring(2) router.push({ name }) } } highlightCode() let clipboard = new Clipboard('.code-copy', { text: (trigger) => { return trigger.previousSibling.innerText } }) // 复制成功执行的回调 clipboard.on('success', (e) => { e.trigger.innerHTML = `已复制` }) }, updated () { highlightCode() } } </script>
生成命令
在 package.json 中添加以下内容，使用命令 yarn new:comp 创建组件目录及其文档或者使用命令 yarn del:comp 即可删除组件目录及其文档
{ "scripts": { "new:comp": "node scripts/create-comp.js && node build/build-entry.js", "del:comp": "node scripts/delete-comp.js && node build/build-entry.js" } }
changelog
在 package.json 中修改 script 字段，接下来你懂的，另一篇博客有介绍哦，小主可以执行搜索
{ "scripts": { "init": "npm install commitizen -g && commitizen init cz-conventional-changelog --save-dev --save-exact && npm run bootstrap", "bootstrap": "npm install", "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0" } }
总结
以上所述是小编给大家介绍的使用 Vue cli 3.0 构建自定义组件库的方法，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
您可能感兴趣的文章: