寫在前面的話,公司工作很久了,一直都沒有改過自己的技術棧,才覺得慢慢的落後於潮流,也知道自己的技術棧很老舊,想過要重構項目,但是項目週期時間一直不許,學習vue只能在下班的時間裏面,這兩年也斷斷續續的用過一些框架,但最後還是選中了vuetify。
vuetify
推薦指數:star:28.9k
適用:移動PC多端支持
GitHub地址:https://github.com/vuetifyjs/vuetify
官網地址:https://vuetifyjs.com/zh-Hans/
來看看官網是怎麼介紹的吧:這是世界上最流行的 Vue.js 框架,用於構建功能豐富、快速的應用程序。
Vuetify確實是一款非常精緻的UI框架,它提供了很多常用的組件,依靠Material Design的設計優勢,讓你無需編寫一行css代碼就可以得到非常美觀的界面功能。響應式做的不錯,移動PC多端支持,配置靈活,組件也挺多的,足夠現代,功能全面vuetify,一直用一直爽,強烈推薦vuetify。
步驟:
1:以管理員的身份打開cmd,進入d盤
使用 Vue CLI 創建一個新的 Vue.js 項目
vue create vuetify-app
完成以後,可以看到D盤出現的初始化的項目了
2:根據提示
運行
cd vuetify-app
npm run serve
啓動成功
打開瀏覽器,輸入地址,可以訪問了
3:將項目導入編輯器
在編輯器裏面打開終端
vue add vuetify
一路回車,以下就是安裝完成了
4:根據文檔,寫一個表格分頁
<template>
<v-data-table
:headers="headers"
:items="desserts"
:items-per-page="5"
class="elevation-1"
></v-data-table>
</template>
<script>
export default {
data () {
return {
headers: [
{
text: 'Dessert (100g serving)',
align: 'start',
sortable: false,
value: 'name',
},
{ text: 'Calories', value: 'calories' },
{ text: 'Fat (g)', value: 'fat' },
{ text: 'Carbs (g)', value: 'carbs' },
{ text: 'Protein (g)', value: 'protein' },
{ text: 'Iron (%)', value: 'iron' },
],
desserts: [
{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
iron: '1%',
},
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
iron: '1%',
},
{
name: 'Eclair',
calories: 262,
fat: 16.0,
carbs: 23,
protein: 6.0,
iron: '7%',
},
{
name: 'Cupcake',
calories: 305,
fat: 3.7,
carbs: 67,
protein: 4.3,
iron: '8%',
},
{
name: 'Gingerbread',
calories: 356,
fat: 16.0,
carbs: 49,
protein: 3.9,
iron: '16%',
},
{
name: 'Jelly bean',
calories: 375,
fat: 0.0,
carbs: 94,
protein: 0.0,
iron: '0%',
},
{
name: 'Lollipop',
calories: 392,
fat: 0.2,
carbs: 98,
protein: 0,
iron: '2%',
},
{
name: 'Honeycomb',
calories: 408,
fat: 3.2,
carbs: 87,
protein: 6.5,
iron: '45%',
},
{
name: 'Donut',
calories: 452,
fat: 25.0,
carbs: 51,
protein: 4.9,
iron: '22%',
},
{
name: 'KitKat',
calories: 518,
fat: 26.0,
carbs: 65,
protein: 7,
iron: '6%',
},
],
}
},
}
</script>
5:上面是一個靜態的表格,怎麼寫成一個請求json數據,然後渲染數據的格式呢,這裏就要用到常用的axios請求方法了。
安裝axios
npm install axios --save
在public底下新建一個static靜態文件夾,存放json數據
,準備json數據數據格式如下:
[{
"name": "22物聯",
"calories": 1,
"fat": "DDDDD",
"carbs": 1,
"protein": "DDDD",
"iron": "DDDDD"
},{
"name": "23物聯",
"calories": 1,
"fat": "DDDDD",
"carbs": 1,
"protein": "DDDD",
"iron": "DDDDD"
},{
"name": "24物聯",
"calories": 1,
"fat": "DDDDD",
"carbs": 1,
"protein": "DDDD",
"iron": "DDDDD"
},{
"name": "25物聯",
"calories": 1,
"fat": "DDDDD",
"carbs": 1,
"protein": "DDDD",
"iron": "DDDDD"
},{
"name": "26物聯",
"calories": 1,
"fat": "DDDDD",
"carbs": 1,
"protein": "DDDD",
"iron": "DDDDD"
},{
"name": "27物聯",
"calories": 1,
"fat": "DDDDD",
"carbs": 1,
"protein": "DDDD",
"iron": "DDDDD"
},{
"name": "28物聯",
"calories": 1,
"fat": "DDDDD",
"carbs": 1,
"protein": "DDDD",
"iron": "DDDDD"
},{
"name": "29物聯",
"calories": 1,
"fat": "DDDDD",
"carbs": 1,
"protein": "DDDD",
"iron": "DDDDD"
}]
代碼示例
<template>
<v-data-table :headers="headers" :items="desserts" :items-per-page="5" class="elevation-1"></v-data-table>
</template>
<script>
import axios from "axios";
export default {
data() {
return {
headers: [
{
text: "Dessert (100g serving)",
align: "start",
sortable: false,
value: "name"
},
{ text: "Calories", value: "calories" },
{ text: "Fat (g)", value: "fat" },
{ text: "Carbs (g)", value: "carbs" },
{ text: "Protein (g)", value: "protein" },
{ text: "Iron (%)", value: "iron" }
],
desserts: []
};
},
mounted() {
this.getData();
},
methods: {
getData() {
axios.get("/static/mock.json").then(
response => {
console.log(response.data);
this.desserts = response.data;
},
error => {
console.log(error);
}
);
}
}
};
</script>
效果如下
OK,完成。