快捷導(dǎo)航

深入淺析Vue組件開發(fā)

更新時(shí)間：2016年11月25日 10:29:55 作者：qiangdada

本文是主要介紹基于Vue的一個(gè)組件開發(fā)。本文給大家介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友參考下吧

前言

這里講的主要是想談?wù)劵赩ue的一個(gè)組件開發(fā)。不得不說的一點(diǎn)就是，在實(shí)際的Vue項(xiàng)目中，頁面中每一個(gè)小塊都是由一個(gè)個(gè)組件（.vue文件）組成，經(jīng)過抽離后，然后再合并一起組成一個(gè)頁面。由于上家公司我負(fù)責(zé)多的是可視化這一塊的開發(fā)，這邊我也將帶著大家進(jìn)行一個(gè)Vue項(xiàng)目中的可視化組件的開發(fā)，這里用到的框架將是主流的可視化框架highcharts。

一、Vue環(huán)境的搭建

1、Mac用戶

首先安裝包管理homebrew

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

再安裝node

brew install node

安裝vue

npm install vue

2、windows用戶

進(jìn)入nodejs官網(wǎng)，然后下載對應(yīng)自己電腦系統(tǒng)的版本

安裝成功,安裝vue

npm install vue

最后查看一下自己node，npm，vue版本（失敗的話自行百度windows系統(tǒng)如何安裝node）。下圖是我目前node，npm及vue的版本

如果這里出問題了，請全局安裝vue-cli

npm install -g vue-cli

二、Vue項(xiàng)目初始化

進(jìn)入你需要搭建Vue項(xiàng)目的目錄下執(zhí)行

vue init webpack my-vue-component

配置就按下圖進(jìn)行選擇

然后進(jìn)入到my-vue-component目錄執(zhí)行

# 下載項(xiàng)目的版本依賴
npm install

由于我家里的網(wǎng)絡(luò)，需要翻墻的npm根本動(dòng)不了，這里我用的是淘寶鏡像進(jìn)行的依賴安裝，沒有淘寶鏡像的先安裝一下吧（實(shí)際項(xiàng)目中還是需要用npm，畢竟cnpm會(huì)忽略下載一些依賴的）

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

安裝完成，啟動(dòng)項(xiàng)目

npm run dev

OK,至此，Vue項(xiàng)目便搭建好了。

三、highchars的導(dǎo)入與搭建

首先通過cnpm進(jìn)行highchars的導(dǎo)入

cnpm install highcharts --save

導(dǎo)入完成后就可以進(jìn)行highchars的可視化組件開發(fā)了

1、首先打開自己初始化好的項(xiàng)目（這里我用的是sublime，實(shí)際開發(fā)中我用的是atom）

在初始化好了的components目錄下新建一個(gè)chart.vue文件

接下來搭建chart組件的架子

<template>
<div class="x-bar">
<div :id="id"
:option="option"></div>
</div>
</template>
<script>
import HighCharts from 'highcharts'
export default {
// 驗(yàn)證類型
props: {
id: {
type: String
},
option: {
type: Object
}
},
mounted() {
HighCharts.chart(this.id,this.option)
}
}
</script>

chart架子搭好后，開始創(chuàng)建chart-options目錄，里面創(chuàng)建一個(gè)options.js用來存放模擬的chart數(shù)據(jù)

這里我模擬寫了一個(gè)柱狀圖的數(shù)據(jù)

module.exports = {
bar: {
chart: {
type: 'bar',
},
series: [{
data: [50, 235, 809, 947]
}]
}
}

四、引用chart組件

這里直接就把引用寫到App.vue這么一個(gè)接口文件中吧

<template>
<div id="app">
<x-chart :id="id" :option="option"></x-chart>
</div>
</template>
<script>
// 導(dǎo)入chart組件
import XChart from 'components/chart.vue'
// 導(dǎo)入chart組件模擬數(shù)據(jù)
import options from './chart-options/options'
export default {
name: 'app',
data() {
let option = options.bar
return {
id: 'test',
option: option
}
},
components: {
XChart
}
}
</script>
<style>
#test {
width: 400px;
height: 400px;
margin: 40px auto;
}
</style>

到這里，chart組件也引入成功，我們直接看一下最后頁面中顯示的效果吧

這里需要說明一點(diǎn)的就是對于所有highchars組件的適用度。大家通過看我寫的模擬數(shù)據(jù)也可以看出來，這里我是把一些通用的屬性給直接忽略了。如果實(shí)際項(xiàng)目的開發(fā)中需要的話，大家可以把通用的一些屬性的數(shù)據(jù)直接寫到chart.vue文件中。通過props驗(yàn)證，寫好default默認(rèn)值作為通用屬性。直接給大家看下我實(shí)際開發(fā)當(dāng)中對于一些通用屬性的處理吧