Vular 开发记录:Vuetify + Larval 框架，#1，#2: 一个非常帅的列表页，自定义控件实现

感觉菜单栏内容有些过多了，略显花哨，特别是那些红点。。。其实觉得没必要做太多这样的功能，个人认为颜值高还是比较注重整体的设计和内容的契合，整个看起来浑然一体的感觉。当然这只是个人的一些看法，项目还是不错的，仁者见仁智者见智吧

谷歌 UI 不错，我也在用

我这里打开字体不对，边栏菜单变成楷体了

赞！！！

这个加载有点慢呀 不知道是我网速问题还是啥问题

应该 做一个 卡片 表单 表格的模板 多做几个 select2 之类的

感谢大家的回复，我想再试试Element UI，用EL实现出类似效果，比较一下两个框架的差异。Vuetify编译后的文件还是有点大了

2M 不是组件库的问题，看下 .map 这种是不是也打包进去了，而且如果用了 vuetify-loader 的话，是自动开启 treeShaking(https://vuetifyjs.com/zh-Hans/customizatio...) 的，没用的话需要手动开启。
看了你的代码，plugins/vuetify.js 这个地方要配置为

// src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

const opts = {}

export default new Vuetify(opts)

然后

// webpack.config.js

const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')

module.exports = {
  plugins: [
    new VuetifyLoaderPlugin()
  ],
}

这样就能实现用什么组件打包什么组件。
另外，看到了你的项目在本地引入了 MDI 图标库，这个图标库我记得就有 1M+ 的大小，建议使用 CDN，

<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">

也看到了你引用了 v-charts 这个库，它是封装 echarts 的，这东西也很大，我个人在用 https://apexcharts.com/

#2: 一个非常帅的列表页，自定义控件完成，正文已更新