Vue 进阶系列丨npm发布vue组件

Vue 进阶系列教程将在本号持续发布，一起查漏补缺学个痛快！若您有遇到其它相关问题，非常欢迎在评论中留言讨论，达到帮助更多人的目的。若感本文对您有所帮助请点个赞吧！

2013年7月28日，尤雨溪第一次在 GItHub 上为 Vue.js 提交代码；2015年10月26日，Vue.js 1.0.0版本发布；2016年10月1日，Vue.js 2.0发布。

最早的 Vue.js 只做视图层，没有路由， 没有状态管理，也没有官方的构建工具，只有一个库，放到网页里就可以直接用了。

后来，Vue.js 慢慢开始加入了一些官方的辅助工具，比如路由（Router）、状态管理方案（Vuex）和构建工具（Vue-cli）等。此时，Vue.js 的定位是：The Progressive Framework。翻译成中文，就是渐进式框架。

Vue.js2.0 引入了很多特性，比如虚拟 DOM，支持 JSX 和 TypeScript，支持流式服务端渲染，提供了跨平台的能力等。Vue.js 在国内的用户有阿里巴巴、百度、腾讯、新浪、网易、滴滴出行、360、美团等等。

Vue 已是一名前端工程师必备的技能，现在就让我们开始深入学习 Vue.js 内部的核心技术原理吧！

什么是npm

作为前端工程师，我们肯定都用过npm、yarn之类的包管理工具。大多数时候，我们都是引用别人写好的第三方组件库，比如elementui、vantui等，其实，我们也可以定义自己的组件，然后发布到npm上，供其他人使用。这篇文章就是告诉大家，如何发布自己的组件到npm上，并且在本地项目中下载使用的。

总体流程

我们先介绍一下总体流程，方便大家有一个总流程认知。具体包括如下几步：

• 新建一个vue项目
  

• 新建一个组件

• 打包组件

• 将组件发布到npm上
  

• 本地安装自己的组件

新建一个vue项目

这里我们可以先创建自己的vue项目，在控制台通过命令 

vue create hfun_npm

创建完的项目目录如下：

新建一个组件

创建一个自己的组件，用来发布。

// hfun.vue
<template>
  <div>
    <button class="main">hfun Team</button>
  </div>
</template>


<script>
export default {
  name: 'hfun'
}
</script>


<style scoped>
.main{
  background:#0984e3;
  color: #fff
}
</style>

测试自己当前组件能否正常运行：

// home.vue
<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <hfun/>
  </div>
</template>


<script>
import hfun from '@/components/hfun.vue'


export default {
  name: 'Home',
  components: {
    hfun 
  }
}
</script>

// router里的index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'


Vue.use(VueRouter)


const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  }
]


const router = new VueRouter({
  routes
})


export default router

// App.vue
<template>
  <div id="app">
    <router-view/>
  </div>
</template>


<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

项目运行结果展示：

定义install函数

我们在使用组件的时候，会用到 Vue.use() 函数，那么当我们执行这个函数的时候，就会执行我们这里定义的 install 函数。

在src下新建 hfun-npm 文件夹，并且在 hfun-npm 内新建 index.js，内容如下：

// index.js
import hfun from './../components/hfun.vue'


const install = (Vue)=>{
    Vue.component(hfun.name,hfun)
}


export default install

打包组件

现在就要把我们写的组件，打包了

• 修改package.json文件
  

{
  "name": "hfun_npm",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "hfun": "vue-cli-service build --target lib ./src/hfun-npm/index.js --dest hfun-npm --name hfun-npm"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "vue-template-compiler": "^2.6.11"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

这里我们新增了一个命令，"hfun", 因为默认的build打包的是src下的所有文件，这里我们只需要打包我们自己的组件就可以了。

--target lib   指定打包目录，也就是打包的入口文件

--name   打包后的文件名称

--dest     打包后的文件夹的名称

• 执行打包命令 npm run hfun

打包成功之后，我们可以看到根目录下方，多了一个文件夹，如图：

• 准备我们的npm文件夹
  

新建一个新的文件夹，hfun-package，并且将hfun-npm里的css文件和hfun-npm.umd.min文件复制到hfun-package文件夹中。如图所示：

在hfun-package中初始化一个npm， 在hfun-package文件夹下，执行npm init -y，最终在hfun-package文件夹下，会自动新增一个package.json文件。

// package.json
{
  "name": "hfun-package",
  "version": "1.0.0",
  "description": "",
  "main": "hfun-npm.umd.min.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

将组件发布到npm上

• 创建自己的npm账号，这里大家百度一下就可以找到
  

• 在hfun-package文件夹下，执行如下命令

npm login -- 输入账号密码

npm publish --access public

现在，我们的组件就已经发布成功了。可以登录npm，查看自己刚刚发布的组件

本地安装自己的组件

现在，我们就要在本地安装自己刚刚发布的npm包了。

1. 执行命令 npm install hfun-package

2. 修改main.js，添加如下三行代码

import hfun from 'hfun-package'
import 'hfun-package/style/hfun-npm.css'
Vue.use(hfun)

    3. 修改home.vue，这里我们直接使用自己发布到npm的包

// home.vue
<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <hfun/>
  </div>
</template>


<script>


export default {
  name: 'Home'
}
</script>

   4. 运行项目，看是否正常运行

  5. 至此，npm发布vue组件已经完成了

Vue 进阶系列教程将在本号持续发布，一起查漏补缺学个痛快！若您有遇到其它相关问题，非常欢迎在评论中留言讨论，达到帮助更多人的目的。若感本文对您有所帮助请点个赞吧！

叶阳辉

HFun 前端攻城狮

往期精彩：

• Vue 进阶系列丨Object 的变化侦测

• Vue 进阶系列丨Array 的变化侦测

• Vue 进阶系列丨虚拟DOM和VNode

• Vue 进阶系列丨Patch 和模板编译

• Vue 进阶系列丨事件相关的实例方法

• Vue 进阶系列丨生命周期相关的实例方法

• Vue 进阶系列丨生命周期

• Vue 进阶系列丨自定义指令

• Vue 进阶系列丨最佳实践

• Vue 进阶系列丨Mixin 混入

• Vue 进阶系列丨权限控制 addRoute()

• Vue 进阶系列丨插槽