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

1.vue脚手架文件结构

├── node_modules:存放项目依赖
├── public： 一般放置一些静态资源(图偏)
│   ├── favicon.ico: 页签图标
│   └── index.html: 主页面
├── src
│   ├── assets: 一般放置多个组件共用的静态资源
│   │   └── logo.png

|     |    ------router ：配置项目中的路由
│   │── component: 存放组件的文件夹，一般放置的是非路由组件/全局组件
│   │   └── HelloWorld.vue
│   │── App.vue: 唯一的根组件
│   │── main.js: 整个项目的入口文件
├── .gitignore: git版本管制忽略的配置(哪些文件需要git管理，哪些文件不需要git管理)
├── babel.config.js: babel的相关配置文件
├── package.json: 应用包配置文件，依赖，类似于pom.xml
├── README.md: 应用描述文件
├── package-lock.json：包版本控制文件，缓存性文件，记录项目上的依赖都从那儿来的等信息
 

注意:一切皆组件一 个组件中
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" })