vue基础(4)_cli的简单使用

 

 

创建单页面应用

创建步骤

 

1. 在components中创建一个子组件 Home.vue 
        在Home中写我们的tempalte style script 
        然后通过export default抛出 
2. 在main.js中定义路由,
    router中导入了 vue-router,创建了一个VueRouter对象, 
3. App父组件中引入子组件     
    App中 通过 <router-view> 接收路由
4. main.js 就是创建Vue对象划分作用的区域

5. index.html 
就是我们看到的页面, 数据显示在div中 

 

 

 获取天气实例

安装axios发送请求

axios中文网: http://www.axios-js.com/

npm install  axios -g   # 全局安装
npm install  axios -save   # 只为当前项目安装
简写: 
npm i axios -S

 

安装完成后,在我们的node-models中就可以看到安装的axios了 

 

安装完成后在 router中index.js中引入

import axios from 'axios'; 

Vue.prototype.$axios = axios  // 将axios封装到Vue中

 

查询天气的网站:

http://wthrcdn.etouch.cn/weather_mini?city='深圳' 

现在就开始创建我们的项目吧

1. 首先将没用的HelloWorld组件和相关路由删除

删除vue图片

2. 首先创建一个Home组件

一个组件就是一个以 .vue结尾的文件

Home.vue

<template>                 // template 就相当于html
  <div class="home">
    深圳的天气是： {{msg}}
  </div>
</template>

<script>
export default {       // 导出一个默认模块
name: "Home",
  data(){
  return{
    msg:''
  }
  },
  created(){
  this.$axios.get('http://wthrcdn.etouch.cn/weather_mini?city=深圳')
    .then((res)=>{
      this.msg = res.data.data.ganmao
    })
  }

}
</script>

<style scoped>

</style>

 

3. index.js 配置路由信息

import Vue from 'vue'
import Router from 'vue-router'
import Home from "../components/Home";
import axios from 'axios'; // 在node-models引入进来的直接写包名，不用加路径

Vue.prototype.$axios = axios //将axios封装到Vue对象中，只要封装到这个对象中的方法和属性，其他组件中都可以直接通过组件对象来调用
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
    }
  ]
})

 

4.挂载到App组件中

<template>
  <div id="app">
      <h2>欢迎来到掌上App</h2>
    <router-view/>
  </div>
</template>

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

<style>

</style>

 

 运行效果如下

5. 去掉路径中的#号  

只需要在我们的index.js路由中添加一个mode即可 

export default new Router({
  mode:'history',  // 去掉#号
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
    }
  ]
})

 

 

实例二 写一个导航栏