vue3+vuetify+Router的hello world

目标

在vue框架中，实验vuetify的材质特性

一、接入router

为简单起见，直接在main.js中引用

import { createApp } from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'
import {createRouter, createWebHashHistory} from 'vue-router'
import { loadFonts } from './plugins/webfontloader'

import Home from '@/views/Home.vue'
import About from '@/views/About.vue'

loadFonts()

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
]

const router = createRouter({
  // 4. Provide the history implementation to use. We are using the hash history for simplicity here.
  history: createWebHashHistory(),
  routes // short for `routes: routes`
})

createApp(App)
  .use(router)
  .use(vuetify)
  .mount('#app')

二、安装谷歌的Icon

npm install material-design-icons-iconfont -D

而后，在@plugins/vuetify.js中做如下设置：

// Styles
import '@mdi/font/css/materialdesignicons.css'
import 'material-design-icons-iconfont/dist/material-design-icons.css'
import 'vuetify/styles'

// Vuetify
import { createVuetify } from 'vuetify'
import { aliases, mdi } from 'vuetify/lib/iconsets/mdi'
import { md } from 'vuetify/lib/iconsets/md'

export default createVuetify({  
  icons:{
    defaultSet: 'mdi',
    aliases,
    sets: {
      md,
      mdi
    }
  }
}
)

三、编写主页面并测试材质

app.vue:

<template>
  <v-app>
    <v-main>
      <p class = "mb-1">
        <router-link to="/" class="pa-1"><v-icon icon="mdi-home"/><span>Go to Home</span></router-link> |
        <router-link to="/about" class="pa-1"><v-icon icon="md:question_mark" class="mr-1"/><span>About</span></router-link>
      </p>
      <v-divider thickness="2px" color="gray-darken-5" class="pb-1"></v-divider>
      <router-view></router-view>
    </v-main>
  </v-app>
</template>

<script>
//import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',

  components: {
    //HelloWorld,
  },

  data: () => ({
    //
  }),
}
</script>

Home.vue:

<template>
    <div class="bg-red-darken-2 text-left">
        <span class = "text-white ml-1">HOME PAGE</span>
    </div>
</template>

四、测试页面

npm run dev

打开页面，看到如图：

五、所涉及的属性查询

官方文档
颜色库
mdi-icon
google-icon