vue开发 —— 开发组件并打包

最新推荐文章于 2023-10-18 08:55:45 发布

潇潇剑-易水阁

最新推荐文章于 2023-10-18 08:55:45 发布

阅读量616

点赞数

本文链接：https://blog.youkuaiyun.com/qq_16670995/article/details/104769580

版权

本文详细介绍使用VueCLI搭建组件库的过程，包括项目初始化、结构调整、关键文件配置及发布流程，适用于本地或npm等仓储。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

打包祖国花朵的成材资料

前序：

仅作为笔记测试使用，切莫复制了事
此搭建整合了网上以及官网的教程
发布流程是不论本地还是npm或者其他仓储，都适用

前提：

Vue CLI（当前版本 v3.8.2）

一：步骤：

1. cli创建项目，具体步骤参考之前的文章：vue开发 —— CLI（开发环境）搭建，需要注意的时，一开始选择默认default选项就得，什么router都随风去吧。

2. 改造项目，把不需要的都删除，不要手软，删除后的目录结构如下：

-src
-babel.config.js
-package-lock.json
-package.json

2. 创建骨架，创建后的目录结构如下：

-packages
  -loading
     -src
       -main.vue
     -index.js
-src
  -index.js
-babel.config.js
-package-lock.json
-package.json

3. 每个文件的内容，如下：

3.1 packages.loading.src.main.vue

<template>
   <div>
      加载中。。。
   </div>
</template>
<script>
   export default {
      name: "Loading",
   };
</script>
<style></style>

3.2 packages.loading.index.js

import Loading from "./src/main";
export default Loading;

3.2 src.index.js

import Loading from "../packages/loading/index.js";

const install = function(Vue) {
    Vue.component(Loading .name, Loading );
};

/* istanbul ignore if */
if (typeof window !== "undefined" && window.Vue) {
  install(window.Vue);
}

export default {
  install
};

3.3 package.json（要是没有这个文件，可以npm init）

{
  "name": "你需要定义的组件包名称",
  "version": "版本号",
  "private": false,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lib": "vue-cli-service build --target lib --name 你需要定义的组件包名称 --dest lib src/index.js"
  },
  "dependencies": {
    "vue": "^2.6.11",
    "vue-property-decorator": "^8.3.0",
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.2.0",
    "@vue/cli-service": "~4.2.0",
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ],
  "main": "lib/你需要定义的组件包名称.common.js"
}