使用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>

4. 打包项目

在命令行中运行以下命令，将Vue项目打包成npm包：

npm run build

在项目根目录下，会自动生成一个dist文件夹。该文件夹包含了我们需要上传到npm仓库的.min.js文件。

5. 注册npm账户

在npm官网注册一个账户，以便后续发布npm包使用。

6. 登录npm账户

在命令行中运行以下命令，登录npm账户：

npm login

按照提示输入npm账户名、密码和邮箱地址，完成登录操作。

7. 发布npm包

在命令行中运行以下命令，发布npm包：

npm publish

该命令会自动将当前目录下的所有文件打包成npm包，上传到npm仓库，供其他人使用。我们可以通过如下命令来安装并使用我们发布的包

npm install my-package

至此，Vue项目如何发布npm包的完整攻略就介绍完毕了。