vue UI 框架 Vuetify 初体验

根据官网介绍，我这里选用了vuecli来创建项目并添加Vuetify

默认配置继续，安装完成之后，打开项目插件就已经配置好了

启动项目的样子

修改App.vue的内容

<template>
  <v-app>
    <v-main>
      <router-view />
    v-main>
  v-app>
template>

<script>
export default {
      
  name: "App",
  data: () => ({
      
    //
  }),
};
script>

在views文件夹下新增一个Login.vue文件

<template>
  <v-app id="inspire">
    <v-main>
      <v-container class="fill-height" fluid>
        <v-row align="center" justify="center">
          <v-col cols="12" sm="8" md="4">
            <v-card class="elevation-12">
              <v-toolbar color="primary" dark flat>
                <v-toolbar-title>Login formv-toolbar-title>
                <v-spacer>v-spacer>
                <v-tooltip bottom>
                  <template v-slot:activator="{ on }">
                    <v-btn :href="source" icon large target="_blank" v-on="on">
                      <v-icon>mdi-code-tagsv-icon>
                    v-btn>
                  template>
                  <span>Sourcespan>
                v-tooltip>
              v-toolbar>
              <v-card-text>
                <v-form>
                  <v-text-field label="Login" name="login" prepend-icon="mdi-account" type="text">v-text-field>

                  <v-text-field
                    id="password"
                    label="Password"
                    name="password"
                    prepend-icon="mdi-lock"
                    type="password"
                  >v-text-field>
                v-form>
              v-card-text>
              <v-card-actions>
                <v-spacer>v-spacer>
                <v-btn color="primary">Loginv-btn>
              v-card-actions>
            v-card>
          v-col>
        v-row>
      v-container>
    v-main>
  v-app>
template>

<script>
export default {
      
  props: {
      
    source: String,
  },
};
script>

在router文件夹下面的index.js文件中新增一个login路由

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

  const routes = [
  {
     
    path: '/',
    name: 'Home',
    component: Home
  },
  {
     
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  {
     
    path: '/login',
    name: 'Login',
    component: () => import(/* webpackChunkName: "about" */ '../views/Login.vue')
  }
]

const router = new VueRouter({
     
  routes
})

export default router

打开浏览器地址中输入login路由跳转

到这Vuetify 初体验就结束了，后续会继续分享Vuetify的具体使用
官网地址