使用Vue-cli3.0创建的项目如何发布npm包

下面我将详细讲解使用Vue-cli3.0创建的项目如何发布npm包的完整攻略。

1. 创建Vue-cli3.0项目

使用Vue-cli3.0创建一个Vue项目，可以通过以下命令进行创建：

vue create my-project

该命令会在当前目录下创建一个名为my-project的Vue项目。

2. 编写组件

在my-project项目中，使用Vue框架提供的组件开发方式编写组件。通常将组件文件放在src/components目录下，以.vue或.js文件格式进行编写。

示例1：编写一个HelloWorld组件

<!-- HelloWorld.vue -->
<template>
  <div class="hello-world">
    {{ message }}
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      message: 'Hello World!'
    }
  }
}
</script>

3. 配置package.json

在my-project根目录下，使用以下命令初始化npm：

npm init

按照提示输入相关的信息，然后在package.json文件中添加以下字段：

{
  "name": "my-package",     // 包名
  "version": "1.0.0",       // 版本号
  "main": "dist/index.js",  // 入口文件
  "scripts": {              // 自定义脚本
    "build": "vue-cli-service build --target lib --name my-package src/main-tmp.js"
  },
  "peerDependencies": {     // 依赖项
    "vue": "^2.6.0"
  }
}

其中，scripts中的build字段是自定义的打包脚本，用于将项目打包成npm包。强制使用ES6模块化，不可使用commonjs。

示例2：使用HelloWorld组件，并进行打包配置

<!-- App.vue -->
<template>
  <div id="app">
    <HelloWorld/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>