利用@vue/cli 3搭建属于你的组件库：技术博客挑战赛第八月

让我们开始构建属于自己的组件库之旅，把你的构思变成一个完全由你设计的组件库吧！

前往开发之旅

开发环境的建立

1. 安装@vue/cli 3

使用NPM包管理器或Yarn包管理器进行安装：

npm install -g @vue/cli@3

或

yarn global add @vue/cli@3

2. 创建项目

在命令行中使用vue命令创建新项目：

vue create my-component-library

3. 进入项目目录

cd my-component-library

4. 安装必要的依赖

在项目目录中运行以下命令：

npm install

5. 运行开发服务器

npm run serve

浏览器中打开http://localhost:8080即可看到应用正在运行。

打造组件库

1. 创建组件文件夹

在src目录下创建一个新的文件夹，用于存放组件：

mkdir components

2. 创建测试组件

在components文件夹中，创建一个名为TestComponent.vue的文件，并在其中输入以下代码：

<template>
  <div>
    Hello, World!
  </div>
</template>

<script>
export default {
  name: 'TestComponent',
};
</script>

3. 将文件夹src修改为examples

在package.json文件中，将src文件夹重命名为examples：

"scripts": {
  "serve": "vue-cli-service serve --open",
  "build": "vue-cli-service build",
  "test": "echo 'Error: no test specified' && exit 1",
  "lint": "vue-cli-service lint"
},

4. 在根目录新增文件夹packages

在根目录下创建一个名为packages的文件夹，用于存放组件库：

mkdir packages

5. 将测试组件移动到packages/test文件夹

mv components/TestComponent.vue packages/test

6. 在packages/test文件夹中创建index.js文件

在packages/test文件夹中，创建一个名为index.js的文件，并在其中输入以下代码：

import TestComponent from './TestComponent.vue';

export default {
  install(Vue) {
    Vue.component('TestComponent', TestComponent);
  }
};

7. 在根目录的package.json文件中配置组件库

{
  "name": "my-component-library",
  "version": "1.0.0",
  "description": "My awesome component library",
  "main": "dist/index.js",
  "scripts": {
    "serve": "vue-cli-service serve --open",
    "build": "vue-cli-service build",
    "test": "echo 'Error: no test specified' && exit 1",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "~10.1.0",
    "eslint": "~7.32.0",
    "eslint-plugin-vue": "~7.18.0",
    "vue-template-compiler": "^2.6.11"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/username/my-component-library.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

8. 构建组件库

npm run build

9. 将组件库发布到Github

git init
git add .
git commit -m "Initial commit"
git remote add origin git@github.com:username/my-component-library.git
git push -u origin master

现在，你已经构建了自己的组件库，并将其发布到了Github上。接下来，你可以使用这个组件库来构建更复杂的前端应用。