在前端开发中可能会遇到将相同的功能模板集合成一个组件，供他人调用，这样可以减少重复造轮子，也可以节约人力、财力，更能够提高代码的可维护度；下面将通过详细的步骤教你如何构建一个Vue前端组件。
1、在本机上安装好NodeJs，并配置好环境变量
（1）NodeJs的下载地址：点击进入下载页面
我这里是下载64位Windows安装包(.msi)，大家可以根据自己电脑系统选择相应的版本即可。
（2）下载NodeJs后双击它，采用默认设置，一直点击下一步，直到Finish为止。需要说明的是，在安装NodeJs时，已经设置好了系统环境变量，此外npm工具也同时被安装好了，我们可以在cmd窗口中输入node -v命令和npm -v命令查看，若都安装成功了话，会看到如下的效果：
（3）设置全局包存放路径，这里不采用默认路径，通过npm命令来实现目录的修改，我这里是将全局包存放目录放置在NodeJs的安装目录下：
npm config set prefix "E:\Program Files\nodejs\node_global"
npm config set cache "E:\Program Files\nodejs\node_cache"
最后我们可以通过npm config list命令查看一下刚才的配置，若有如下信息，则表明设置成功了。
以上就是NodeJs环境的安装和配置情况，若你的电脑之前已经安装好NodeJs，可以省略上面这些过程；接下来我们试试下载vue模块。
2、下载vue模块
（1）在cmd窗口中输入npm i -g vue命令，就可以等待下载vue模块了，此时可能会下载失败，如下图所示：
这是因为registry地址默认是https://registry.npmjs.org，被墙挡住了，翻过去的话有点麻烦，这个时候你可以采用淘宝的镜像地址https://registry.npm.taobao.org，在cmd窗口中输入npm config set registry "https://registry.npm.taobao.org" ，敲入回车键后没有任何提示就表明设置成功了，我们也可以通过npm config list命令来查看一下，如下图所示：
在设置好registry地址后，重试npm i -g vue命令，下载成功后如下图所示：
（2）为了能够使用vue命令，我们还的安装一下vue的脚手架vue-cli，在cmd窗口中输入npm i -g vue-cli，敲入回车键后就开始下载了，等到下载完成后会出现如下图的类似信息：
从上图中可知Vue CLI的版本是2.9.6。
3、开始创建组件库工程
（1）在cmd窗口中输入vue create bienVueCom，敲回车键后结果收到这样的提示信息，如下图所示：
原来是vue create命令只是Vue CLI 3版本的命令，Vue CLI 2.9.6版本不支持该命令；于是按照提示修改即可，首先在cmd窗口中输入npm uninstall -g vue-cli命令，卸载现有的vue-cli脚手架；等卸载完后再输入npm i -g @vue/cli开始安装，等待安装完后信息如下图所示：
（2）现在可以正式创建组件库工程了，在cmd窗口中输入vue create bienVueCom，回车后提示如下图所示：
既然工程名称不能包含大写字母，那么我们采用短横线来链接，如：bien-vue-com；修改好名称后按下回车键，后续的步骤就使用默认设置，若有需要就按回车键即可；接着就是静静地等待工程自动创建完毕。最终成功时的效果如下图所示：
原文：https://www.cnblogs.com/bien94/p/12034249.html