第一天学vuetify

前言

对于后端人士来说vue的开发有些摸不着头脑，便捷式的开发使得其得到大部分人的喜爱

Vuetify

安装vuetify依赖-----vue add vuetify

这里官方文档也有说：https://vuetifyjs.com/en/getting-started/quick-start/

主要记录自己的学习过程 也是在B站听一个老外叽里咕噜勉强学到了点

对于刚生成的项目App.vue这里需要进行删减不然你无论配置啥路由访问都是那个vue的页面

对自己来说还是一点 多看官方文档

App.vue

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

<script>
export default {
  name: 'App',
};
</script>

Home.vue

<template>
<!--当有一个root组的时候不能再创建一个不然code直接报错-->
  <div class="home">
    <!--要想v-icon起作用 要么导入link连接 要么npm下载依赖-->
    <link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">
    <!-- <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <!--控制字体的颜色和背景颜色-->
    <span class="red white--text">sadasndknsdkndkbflfb,flgasdsa</span>
    <!-- text--darken-4 字体颜色数值越大加深 lighten-4 背景颜色 数值越大越浅-->
    <span class="pink lighten-4 red--text text--darken-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem, iste suscipit ad unde provident, impedit cum doloremque accusantium minus odit perspiciatis? Porro aliquam voluptate quidem sapiente aspernatur, a vitae soluta!</span>
    <h1 class="display-4">Massive Dispaly</h1><!--控制字体的大小 数值越大字越大-->
    <h1 class="display-1">Massive Dispaly</h1>
        
    <!--使用一个vuetify模版页面-->
  <v-content>
  <paiban/>
  <test/>
  </v-content>

  <v-btn class="pink white--text">click me</v-btn>
  <v-btn depressed color="pink">click me</v-btn>
  <v-btn flat color="pink">click me</v-btn><!-- 新版的是将flat改成了text-->
  <!--添加link之后图标正常显示-->
  <v-btn depressed small color="pink white--text">
    <v-icon left small>email</v-icon>
    <span> email me</span>
  </v-btn>
  <v-btn depressed color="pink white--text">
    <v-icon>check</v-icon>
  </v-btn>
  <v-btn fab depressed small dark color="red"><!--fab圆形-->
    <v-icon>favorite</v-icon>
  </v-btn>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
//导入一个vuetify模版页面
import paiban from './paiban.vue'
import test from './test.vue'

export default {
  name: 'Home',
  // components: {
  //   HelloWorld
  // }
    components: {
    paiban,
    test,
  }
}
</script>

对于页面的跳转，利用rout实现页面的访问

向后台发送请求的话是axios 一般的模板文件的数据我用v-model实现数据的双向绑定

<template>
  <v-app id="inspire">
    <v-content>
      <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 form</v-toolbar-title>
                <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-tags</v-icon>
                    </v-btn>
                  </template>
                  <span>Source</span>
                </v-tooltip>
                <v-tooltip right>
                  <template v-slot:activator="{ on }">
                    <v-btn
                      icon
                      large
                      href="https://codepen.io/johnjleider/pen/pMvGQO"
                      target="_blank"
                      v-on="on"
                    >
                      <v-icon>mdi-codepen</v-icon>
                    </v-btn>
                  </template>
                  <span>Codepen</span>
                </v-tooltip>
              </v-toolbar>
              <v-card-text>
                <v-form>
                  <v-text-field
                    label="Login"
                    name="login"
                    v-model="login"
                    prepend-icon="person"
                    type="text"
                  />

                  <v-text-field
                    id="password"
                    label="Password"
                    name="password"
                    v-model="password"
                    prepend-icon="lock"
                    type="password"
                  />
                </v-form>
              </v-card-text>
              <v-card-actions>
                <v-spacer />
                <v-btn color="primary" @click="submit">Login</v-btn>
              </v-card-actions>
            </v-card>
          </v-col>
        </v-row>
      </v-container>
    </v-content>
  </v-app>
</template>

<script>
// import axios from 'axios'
// axios.defaults.timeout = 2000;//设置axios的请求时间

// Vue.prototype.$http = axios;
  export default {
    name: "test",
    props: {
      source: String,
    },
    data: () => ({
    login: "",
    password: ""
    }),
    methods: {
      submit() {
        // console.log("111111"),

          // 将数据提交到后台
          console.log(this.login + " ... " + this.password),
          // axios({
          //   method: 'get',
          //   url: 'http://www.xxxx.cn',
          //   // data: 
            
          // }).then(() => {
            // this.$message.success("保存成功！");
            this.$router.push({ path: '/About' });
            // this.closeWindow();
          // }).catch(() => {
          //   // this.$message.error("保存失败！");
          //   this.$router.push({ path: '/home' });
          // });
        }
      }
    }
  // }
</script>

希望我的这些会对你有所帮助 第一天学vuetify有错误请见谅。