一入前端深似海，从此红尘是路人系列之浅析Vue组件开发

#长按上图识别二维码，参与OSC源创会年终盛典#

这里讲的主要是想谈谈基于Vue的一个组件开发。不得不说的一点就是，在实际的Vue项目中，页面中每一个小块都是由一个个组件（.vue文件）组成，经过抽离后，然后再合并一起组成一个页面。由于上家公司我负责多的是可视化这一块的开发，这边我也将带着大家进行一个Vue项目中的可视化组件的开发，这里用到的框架将是主流的可视化框架highcharts。

1、Mac用户
首先安装包管理homebrew

再安装node

安装vue

2、windows用户
进入nodejs官网，然后下载对应自己电脑系统的版本
安装成功,安装vue

npm install vue

最后查看一下自己node，npm，vue版本（失败的话自行百度windows系统如何安装node）。下图是我目前node，npm及vue的版本

进入你需要搭建Vue项目的目录下执行

vue init webpack my-vue-component

配置就按下图进行选择

然后进入到my-vue-component目录执行

# 下载项目的版本依赖npm install

由于我家里的网络，需要翻墙的npm根本动不了，这里我用的是淘宝镜像进行的依赖安装，没有淘宝镜像的先安装一下吧（实际项目中还是需要用npm，毕竟cnpm会忽略下载一些依赖的）

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装完成，启动项目

npm run dev

OK,至此，Vue项目便搭建好了。

首先通过cnpm进行highchars的导入