基于vue-cli3创建libs库的实现方法

首先，创建一个基于vue-cli3的JavaScript库，需要按照以下步骤进行：

步骤一：创建项目

使用vue-cli3脚手架创建一个新项目，并选取默认配置（Default、Manually select features、Config files）。

vue create libs-project

步骤二：配置项目

通过以下命令，在项目根目录下创建vue.config.js文件（或者使用已有的文件）。

module.exports = {
  outputDir: "dist",
  configureWebpack: {
    output: {
      libraryExport: "default"
    }
  }
};

其中outputDir表示编译后的文件输出路径，默认为“dist”；configureWebpack属性是通过webpack创建和配置打包项目的。

另外需要注意的是，在webpack的配置文件中，必须将libraryExport设置为default。

步骤三：编写代码

在src目录下，编写自定义代码 / libs 库。比如，下面示例中创建了一个名为myLibs的文件夹，其中包含了一个.js文件myCustomMethods，并且该方法可以在项目中被其他模块调用或导入。

// myCustomMethods.js
const myCustomMethods = {
  returnNumFunction: function(num1) {
    return num1;
  },
  sumFunction: function(num1, num2) {
    return num1 + num2;
  }
}
export default myCustomMethods;

步骤四：构建文件

运行以下命令，可以编译文件并生成umd、commonjs、esm格式的库文件。默认的输出目录为dist。

npm run build

步骤五：将库发布到npm

生成的文件可以通过npm发布。比如发布到http://www.npmjs.com，可以通过以下命令进行：

npm login
npm publish

示例一: 使用库

其它项目可以通过npm包引入库进行使用，具体方法如下:

npm i my-libs

// 引入库文件
import myCustomMethods from 'my-libs/myCustomMethods';

// 使用库中的方法
console.log(myCustomMethods.returnNumFunction(3));
console.log(myCustomMethods.sumFunction(2, 3));

示例二: 直接使用库

也可以将生成的.js文件放在服务器上，并在页面中引用该文件。例如，在html中引入该js文件：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>myLibs</title>
  <script src="https://cdn.jsdelivr.net/npm/my-libs/dist/myCustomMethods.js"></script>
  <script>
    console.log(myCustomMethods.returnNumFunction(3));
    console.log(myCustomMethods.sumFunction(2, 3));
  </script>
</head>
<body>
</body>
</html>

以上就是基于vue-cli3创建libs库的实现方法的完整攻略，希望能够帮到您。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：基于vue-cli3创建libs库的实现方法 - Python技术站