基于vue2.x搭建组件库的流程-（二）-新组件文件的初始化

上篇文章已经讲解了从零开始搭建一个组件库到发布npm，基于vue2.x搭建组件库的流程_笑道三千的博客-CSDN博客，然后第三方开发者下载使用的基本流程。

这篇文章主要优化下组件库的开发之一：组件的自动初始化。

在开发一个组件之前，需要创建组件目录、创建组件文件、初始化组件模板等一系列繁琐又重复的工作，这些其实都可以使用脚本自动化实现。

1，配置package.json

可以在 scripts 目录下写一个 node 脚本实现以上过程，并在 package.json 中添加 scripts 脚本加入到 npm 工作流中：

 "scripts": { 
    "create": "node ./script/new-file.js" }, 

2，编写模板文件

因为这里我是用来搭建组件的，所以只有两个模板文件，一个是基础的vue模板，另一个则是index.js导出文件。

新建文件script/template/index.vue:

<template> <div>模板</div> </template> <script> export default { data() { return {}; }, created() {}, computed: {}, methods: {}, }; </script> <style lang="scss" scoped></style> 

新建文件script/template/index.js:

// 导入组件，组件必须声明 name import BiuLoading from "./src"; // 为组件提供 install 安装方法，供按需引入 BiuLoading.install = function (Vue) { 
    Vue.component(BiuLoading.name, BiuLoading); }; // 导出组件 export default BiuLoading; 

3，编写自动化创建组件的脚本：

script/new-file.js：

const path = require("path"); const fs = require("fs"); const fileSave = require("file-save"); const uppercamelcase = require("uppercamelcase"); const inquirer = require("inquirer"); //组件放置在src/components下，组件名文件夹加一个index.vue文件 //组件的命名规范为大驼峰:MyTest let data1, data2; fs.readFile( path.resolve(__dirname, "./template/index.vue"), "utf8", async function (err, data) { 
    data1 = data; } ); fs.readFile( path.resolve(__dirname, "./template/index.js"), "utf8", async function (err, data) { 
    data2 = data; } ); const build = async () => { 
    const res2 = await inquirer.prompt([ { 
    type: "input", message: "请输入组件名称:", name: "componentName", }, ]); const ComponentName = uppercamelcase(res2.componentName); const componentPath = path.resolve(__dirname, "../packages", ComponentName); const files = [ { 
    fileName: "index.js", content: data2 }, { 
    fileName: "src/index.vue", content: data1 }, ]; files.forEach((file) => { 
    fileSave(path.join(componentPath, file.fileName)).write( file.content, "utf8" ); }); }; build(); 

4，使用自动化脚本

在上面三个步骤创建好之后，只需要npm run create输入对应的组件名，就可以自动创建新的组件模板了。

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/10963.html