首先，创建一个基于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技术站
微信扫一扫 
支付宝扫一扫 