vue元件裡面引入highchars
前言
這裡講的主要是想談談基於Vue的一個元件開發。不得不說的一點就是,在實際的Vue專案中,頁面中每一個小塊都是由一個個元件(.vue檔案)組成,經過抽離後,然後再合併一起組成一個頁面。由於上家公司我負責多的是視覺化這一塊的開發,這邊我也將帶著大家進行一個Vue專案中的視覺化元件的開發,這裡用到的框架將是主流的視覺化框架highcharts。
一、Vue環境的搭建
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使用者
進入nodejs官網,然後下載對應自己電腦系統的版本
安裝成功,安裝vue
npm install vue
最後檢視一下自己node,npm,vue版本(失敗的話自行百度windows系統如何安裝node)。下圖是我目前node,npm及vue的版本
二、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專案便搭建好了。
三、highchars的匯入與搭建
首先通過cnpm進行highchars的匯入
cnpm install highcharts --save
匯入完成後就可以進行highchars的視覺化元件開發了
1、首先開啟自己初始化好的專案(這裡我用的是sublime,實際開發中我用的是atom)
在初始化好了的components目錄下新建一個chart.vue檔案
![](http://static.oschina.net/uploads/space/2016/1113/135326_xjUJ_2912341.png)
接下來搭建chart元件的架子
<template>
<divclass="x-bar">
<div:id="id":option="option"></div>
</div>
</template>
<script>import HighCharts from'highcharts'exportdefault {
// 驗證型別
props: {
id: {
type: String
},
option: {
type: Object
}
},
mounted() {
HighCharts.chart(this.id,this.option)
}
}
</script>
chart架子搭好後,開始建立chart-options目錄,裡面建立一個options.js用來存放模擬的chart資料
這裡我模擬寫了一個柱狀圖的資料
module.exports = {
bar: {
chart: {
type: 'bar',
},
series: [{
data: [50, 235, 809, 947]
}]
}
}
四、引用chart元件
這裡直接就把引用寫到App.vue這麼一個介面檔案中吧
<template>
<divid="app">
<x-chart:id="id":option="option"></x-chart>
</div>
</template>
<script>// 匯入chart元件import XChart from'components/chart.vue'// 匯入chart元件模擬資料import options from'./chart-options/options'exportdefault {
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元件也引入成功,我們直接看一下最後頁面中顯示的效果吧
這裡需要說明一點的就是對於所有highchars元件的適用度。大家通過看我寫的模擬資料也可以看出來,這裡我是把一些通用的屬性給直接忽略了。如果實際專案的開發中需要的話,大家可以把通用的一些屬性的資料直接寫到chart.vue檔案中。通過props驗證,寫好default預設值作為通用屬性。直接給大家看下我實際開發當中對於一些通用屬性的處理吧
這裡還是需要看你們專案的需求,然後制定一套屬於自己的通用的屬性。然後再單獨對每個元件進行操作。
好了,Vue元件開發到這裡也差不多了。如果有什麼問題或者有什麼槽要吐的話(求輕噴),歡迎文章下面留言一起交流探討。
轉載: https://my.oschina.net/qiangdada/blog/786981?utm_source=tuicool&utm_medium=referral