開始?
???????📓?最近打算出一個前端可視化數據大屏的系列專欄，這次將很全面的教大家設計可視化大屏，從開始到打包結束，其中，包括如何設計框架，如何封裝axios，等等，本次使用的數據均為mock數據。與正常使用一致。本文會從開始的創建vue3項目到最后的項目打包，本篇共計4小節。
1.安裝腳手架
? ? ? ?📓 首先確保電腦上安裝node.js，node安裝簡單，去官網下載安裝包一件安裝即可，當安裝了node.js后，我們新建一個文件夾，用vscode打開文件夾，打開終端，安裝腳手架。?
npm install -g @vue/cli📓腳手架安裝一次即可，后續在創建vue項目就不需要在重新安裝腳手架
2，創建vue2項目
? ? ? ? 📓打開vscode 在終端輸入 ，myapp是我們的項目名稱
vue create myapp? ? ? ?📓 選擇我們需要的內容，這里需要的是vue-router，其他的按自己的需需求選擇
????????
3.下載我們需要的第三方庫
? ? ? ? 📓這里我們需要的是，moke,datav,echarts,axios
? ? ? ? 📓在控制臺下載即可
? ? ? ? 📓下載mock
npm install mockjs --save-dev? ? ? ? 📓下載datav
npm install @jiaminghi/data-view --save? ? ? ?📓下載axios
npm install axios --save
? ? ? ? 📓下載echarts
npm install echarts --save4.在頁面上使用datav
? ?????????📓在src文件夾下面，有個app.vue的入口文件，我們將這個文件處理下，將一些無語的代碼刪除，保留如下代碼
?????????📓將src--views下的vue文件全部刪除
?????????📓在views創建一個新的文件?IndexData.vue，并在里面寫入如下代碼
<template><div>{{ a }}</div>
</template>
<script>
export default{data(){return{a:"123"}}
}
</script>
<style></style>? ? ? ? 📓在src--router文件夾下 將該組件綁定路由
import Vue from 'vue'
import VueRouter from 'vue-router'Vue.use(VueRouter)const routes = [{path: '/',name: 'home',component: ()=>import("../views/IndexData.vue")},]const router = new VueRouter({routes
})export default router? ? ? ? 📓然后啟動服務，當頁面上出現123時間，就代表著配置成功
?5.配置第一個datav組件
? ? ? ? 5.1 📓在src下的main.js文件里面，完全引入我們的datav組件
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import dataV from '@jiaminghi/data-view' //導入datav框架
Vue.config.productionTip = false
Vue.use(dataV) //添加到vue原型里去
new Vue({router,render: h => h(App)
}).$mount('#app')? ? ? ? 5.2 📓在頁面上使用我們的datav組件
<template><div><!-- 引入組件 --><dv-water-level-pond :config="config" style="width:150px;height:200px" /> </div>
</template>
<script>
export default{data(){return{config:{ //傳入組件數據data:[66]}}}
}
</script>
<style></style>? ? ? ? 5.3 📓當出現下方的效果時，就代表著使用成功
????????
6，設計主體框架
? ? ? ? 📓我打算在indexdata.vue里作為組件的容器，在容器里設計骨架，將其他的內容作為骨架填入，代碼如下
????????
<template><!-- 全屏容器 --><dv-full-screen-container style="background-color: black;"><dv-border-box-11 title="香蕉麻花皮演示"><!-- 我這里將頁面分為上中下三塊，這是第一塊 --><div class="box"><!-- 在里面在分成左中右3塊 --><div class="box1"><dv-border-box-12>dv-border-box-1</dv-border-box-12></div><div class="box1"><dv-border-box-2>dv-border-box-1</dv-border-box-2></div><div class="box1"><dv-border-box-10>dv-border-box-1</dv-border-box-10></div></div><!-- 第二塊 --><div class="box"><!-- 在里面在分成左中右3塊 --><div class="box1"><dv-border-box-9>dv-border-box-1</dv-border-box-9></div><div class="box1"><dv-border-box-8>dv-border-box-1</dv-border-box-8></div><div class="box1"><dv-border-box-7>dv-border-box-1</dv-border-box-7></div></div><!-- 第三塊 --><div class="box"><!-- 在里面在分成左中右3塊 --><div class="box1"><dv-border-box-2>dv-border-box-1</dv-border-box-2></div><div class="box1"><dv-border-box-3>dv-border-box-1</dv-border-box-3></div><div class="box1"><dv-border-box-8>dv-border-box-1</dv-border-box-8></div></div></dv-border-box-11></dv-full-screen-container>
</template>
<script>
export default {data() {return {config: { //傳入組件數據}}}
}
</script>
<style scoped>
.box1 {width: 610px;height: 310px;
}
.box{display: flex;justify-content: space-between; width: 98%;margin: auto;padding-top: 40px;
}
</style>? ? ? ?📓效果如下
📓?后續我們只需要往骨架里面填充echarts或者是其他需要展示的代碼就行
📓在提一嘴 datav需要將padding和margin的初始值設置為0，不然會出現樣式問題
📓在commponents里新建文件夾index.css,在文件夾里寫入內容
?📓在manin.js里引入這個css文件即可
?📓下期我們講如何添加內容和使用moke來模擬數據
📓拜拜
)
)
