Vue 创建博客前端-DAY1

初始化项目

# 创建项目
vue create blog-view
# 选择 Manually select features
# 勾选 TS, Router

cd blog-view
# 使用 vuetify 框架
vue add vuetify
# import vuetify 报错 No overload matches this call
# 在 tsconfig.json 添加
{
 compilerOptions: {
    //other options here
    "types": ["vuetify"],
 }
}

# 启动服务
yarn serve

主页布局

选择 vuetify 预制布局中的 Google Contacts 代码，使用 <router-view></router-view> 替代 <v-content></v-content> 中的内容，将侧边栏数据修改为 typescript 样式。

# 原始
export default {
    data: () => ({
      dialog: false,
      drawer: null,
      items: [
        { icon: 'mdi-contacts', text: 'Contacts' },
        { icon: 'mdi-history', text: 'Frequently contacted' },
        { icon: 'mdi-content-copy', text: 'Duplicates' },
        ... ...
      ],
    }),
  }

# 修改为
@Component({
  components: {}
})
export default class App extends Vue {
  dialog = false;
  drawer = null;
  items = [
    { icon: "mdi-contacts", text: "首页" },
    ... ...
  ];
}

参考

1. 导入 vuetify 报错