Java学习Day38：挥泪斩黄风（vuecli）

1.vue脚手架文件结构

注意:一切皆组件一 个组件中
js代码+html代码+css样式
1. VueCli开发方式是在项目中开发-个- 个组件对应一个业务功能模块，日后可以将多个组件组合到一起形成一个前端系统
2.日后在使用vue Cli进行开发时不再书写html,编写的是一个组件， 日后打包时vue cli会将组件编译成运行的html文件

2.如何开发VUECLI

1.父子传参

父类

<template>
  <div class="about">
    <h1>{{msg}}</h1>
    <div>
      <ceshi :msg="msg1"  @put="resp"></ceshi>
    </div>
  </div>
</template>
<script>
import ceshi from "@/views/ceshi";
export default {
  name: 'about',
  components: { ceshi },
  data(){
    return{
      msg1: '我是父类msg',
    }
  },
  methods:{
    resp:function (value){
      this.msg=value
    }
  }
}
</script>

子类

<template>
  <div>
    <h1>{{msg}}</h1>
    <button @click="emit">点击传值</button>
    <button @click="baidu">百度一下，你就知道</button>
    我是测试模块
    <router-view/>
  </div>
</template>
子类
<script>
import axios  from "axios";
export default {
  name: "ceshi",
  props: {
    msg: {
      type:String
    }
  },
  methods:{
    emit:function (){
      this.$emit('put','子组件的值');
    },
    baidu:function(){
      this.$http.get("https://api.oioweb.cn/api/SimpWords").then(function (resp) {
        this.string= resp.data.result.content
      },function (error) {
        alert(error)
      })
    }
  }
}
</script>

2.路由

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import ceshi from "@/views/ceshi";
import home from "@/views/home";
import course from "@/views/course";
const routes = [
  {
    path: '/',
    name: 'home',
    component: home,
    children: [ // 子路由配置
      {
        path: '/course',
        name: 'course',
        component: course
      }
    ]
  },
  {
    path: '/about',
    name: 'about',
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  },
  {
    path: '/ceshi',
    name: 'ceshi',
    component: ceshi
  }
]
const router = new VueRouter({
  routes
})
export default routerl
路由展示界面

<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>|
      <router-link to="/ceshi">ceshi</router-link>|
    </nav>
    <router-view/>
  </div>
</template>

3.axios

1.npm install axios

2、全局引入，在src/main.js文件中

1. //main.js

2. import axios from 'axios'

3. //把axios对象挂到Vue实例上面，使用axios的时候直接全局调用this.$http就可以了

4. Vue.prototype.$http = axios

5. axios.get("http://localhost:8080/easthome_edu/course?method=findAll").then(function (resp) {
     that.tableData=resp.data
   },function (error) {
     console.log(error)
   })

4.引入elementui

全局引入

npm install element-ui -S

main.js文件中引入

import "element-ui/lib/theme-chalk/index.css";

import ElementUI from "element-ui";

Vue.use(ElementUI, { size: "medium" })