1-2 安装依赖

1 模块化

//es6 模块化的方案

1-1 导出

//node.js
module.exports = {};
//es6
export default  {
}

1-4 导入

//node.js
const app = require("./App.vue");
//es6
import app from './App.vue';

2 项目说明

//main.js

3 组件语法

# 1.在组件的html中,根元素的div只能有一个
# 2.在js中,data是函数
# 3.for循环必须加key
<template>
  <div>
    {{ msg }}
    <div v-for="item of arr" :key="item.id">{{item.name}}</div>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      msg: "data",
      arr:[
        {name:"html",id:1001},
        {name:"css",id:1002}
      ]
    };
  },
  mounted() {
    http();
  },
};
</script>

4 安装其他的模块

1-1 安装

yarn add axios
cnpm i axios -S

1-2 导入模块发送http请求

<template>
  <div>
     hello world
  </div>
</template>
<script>
import axios from 'axios';
export default {
  name: "App",
  mounted(){
    let url  = "http://192.168.4.20:8000/top250";
    axios.get(url).then(res=>{
      console.log(res)
    })
  }
};
</script>

5 安装的模块挂载到vue的原型上

//main.js
import axios from 'axios';
Vue.prototype.$http = axios;

//App.vue
export default {
  mounted(){
    this.$http.get(url).then(res=>{
      console.log(res)
    })
  }
}