day 项目

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store';

Vue.config.productionTip = false;
//代入Antd脚手架
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
Vue.use(Antd);

new Vue({
  router,
  store,
  // render函数的作用是，跟 template 一样都是创建 html 模板
  // 当场景中用 template 实现起来代码冗长繁琐而且有大量重复，
  // 这个时候使用就可以极大的简化代码。
  render: h => h(App)
}).$mount('#app')

package.json

{
  "name": "demo",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "ant-design-vue": "^1.7.8",
    "core-js": "^3.8.3",
    "vue": "^2.6.14",
    "vue-router": "^3.5.1",
    "vuex": "^3.6.2"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "less": "^4.0.0",
    "less-loader": "^8.0.0",
    "vue-template-compiler": "^2.6.14"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

个人中心

<template>
<div>
  个人中心
  <div class="box">
    hahaha
    <p>111</p>
    <SonOne type="free" :pageSize="pageSize" @getFather="getFather"></SonOne>
  </div>
</div>
</template>

<script>
import SonOne from "@/components/SonOne.vue";
export default {
name: "MineView",
  components:{
  SonOne
  },
  data(){
  return {
    pageSize:10
  }
  },
  methods:{
  getFather(data){
    console.log(data)
  }
  }

}
</script>
<!--防止组件重叠-->
<style scoped lang="less">
.box{
  color: red;
  p{
    color: blue;
  }

}

</style>

首页

<template>
  <div>
    首页
    {{ msg }}
    <!--      声明式传-->
    <router-link :to="{
      path: './detail', query: {
        courseId: 102
      }
    }"> goto详情页</router-link>
    <router-link :to="{
      name: 'my', params: {
        userId: 11
      }
    }"> goto个人中心</router-link>
    <!-- <button @click="toDetail">toDetail</button>
    <router-view></router-view> -->

    <a-button type="primary">
      Primary
    </a-button>
    <a-button>Default</a-button>
    <a-button type="dashed">
      Dashed
    </a-button>
    <a-button type="danger">
      Danger
    </a-button>
    <a-config-provider :auto-insert-space-in-button="false">
      <a-button type="primary">
        按钮
      </a-button>
    </a-config-provider>
    <a-button type="primary">
      按钮
    </a-button>
    <a-button type="link">
      Link
    </a-button>
    <a-dropdown>
      <a class="ant-dropdown-link" @click="e => e.preventDefault()">
        Hover me <a-icon type="down" />
      </a>
      <a-menu slot="overlay">
        <a-menu-item>
          <a href="javascript:;">1st menu item</a>
        </a-menu-item>
        <a-menu-item>
          <a href="javascript:;">2nd menu item</a>
        </a-menu-item>
        <a-menu-item>
          <a href="javascript:;">3rd menu item</a>
        </a-menu-item>
      </a-menu>
    </a-dropdown>
    <a-breadcrumb>
      <a-breadcrumb-item href="">
        <a-icon type="home" />
      </a-breadcrumb-item>
      <a-breadcrumb-item href="">
        <a-icon type="user" />
        <span>Application List</span>
      </a-breadcrumb-item>
      <a-breadcrumb-item>
        Application
      </a-breadcrumb-item>
    </a-breadcrumb>
    <a-pagination v-model="current" :total="50" show-less-items />

</template>


template

    
<script >
export default {
  data() {
    return {
      msg: 'hello',
      current: 2,

    };
  },
  method: {
    toDetail() {
      this.$router.push({
        path: './detail',
        query: {
          courseId: 11111123
        },
      });
    },


  }
}
</script>
<style lang="less">

</style>