webpack+vue使用与接口调用入门

前提：已经安装好node.js和vue。参考：https://blog.csdn.net/nece001/article/details/103118965

新建项目：

cd d:/vue/
vue init webpack demo1
cd demo1

运行项目：

npm run dev

默认访问地址：http://localhost:8080 （运行的端口号可以在config/index.js 的 dev节下修改 PORT 属性）

上边这个命令表示：在开发环境下运行

如果想使用生产环境运行，则增加配置：
文件：/packages.json
scripts节下增加生产环境的配置项

"prod": "webpack-dev-server --inline --progress --config build/webpack.prod.conf.js",

之后运行项目：

npm run prod

配置文件：
运行或编译时禁用格式检查eslint：
文件 /config/index.js

修改属性值：
useEslint: false, # 建议保留，初学关掉减少干扰

使用配置文件：
/config/dev.env.js # 开发环境配置，对应 npm run dev
/config/prod.env.js # 生产环境配置，对应 npm run prod

配置文件设置配置时，要用'"value"'形式包围值，否则构建时引用的位置会被使用值字符串给替换掉，造成语法错误：

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_ROOT: '"http://api.com/api"' // 接口地址
})

在组件中使用配置项：
修改以下示例文件，分别运行开发/生产两个环境看输出对比
/src/components/HelloWorld.vue

<template>
<p>{{env}}</p> <!-- 必须要有个根节点，是什么元素没要求 -->
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    console.log(process.env.NODE_ENV);
    return {
      env:process.env.NODE_ENV
    }
  }
}
</script>

路由配置：
新建文件：
/src/components/First.vue

<template>
<p>{{msg}}</p>
</template>

<script>
export default {
  name: 'First',
  data () {
    return {
      msg: 'First'
    }
  }
}
</script>

配置路由：
/src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import First from '@/components/First' # 添加组件

Vue.use(Router)

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

    # 添加路由
    {
      path: '/first',
      name: 'First',
      component: First
    },,
	{
      path: '/weather',
      name: 'Weather',
      component: ()=>import('@/components/Weather') // 使用这种方式直接加载组件
    }
  ]
})

访问路径：http://localhost:8080/#/first

调接口：
安装依赖：

npm install axios

新建目录，用于存放接口方法：/src/api。
新建文件：/src/api/axios.js
这个文件中新建并导出axios对象的实例，用于统一管理接口地址

'use strict'
import axios from 'axios'

export default axios.create({
  // basic url
  baseURL: process.env.API_ROOT, // 在配置文件里已定义

  // 超时时间
  timeout: 3000,
  withCredentials: true
})

新建文件：/src/api/weather.js
这个文件中保存具体的接口请求方法

import axios from '@/api/axios'

export default function fetchWeather(param){
  return axios({
    method: 'POST',
    url: '/api.php',
    param: param
  })
}

新建文件：/src/components/Weather.vue
这个文件调用接口并显示，别忘了加路由

<template>
<p>
{{msg}}
<br>
<router-link  to="/first" >去First</router-link> <!-- 加上个链接 -->
</p>
</template>

<script>
import fetchWeather from '@/api/weather'
export default {
  name: 'Weather',
  data () {
    return {
      msg: 'Weather' // 初始化变量
    }
  },
  created(){
    this.fetchData('101220101'); // 创建完组件立即调用方法，获取数据
  },
  methods:{
    fetchData: function(param){
        fetchWeather(param).then((res)=>{
            console.log(res); // 控制台输出
            this.msg = res.data.message;
        });
    }
  }
}
</script>

另外新建一个提供数据的接口文件 api.php

<?php

// 允许跨域访问的必须的头
header('Access-Control-Allow-Credentials: true');
header('Access-Control-Allow-Origin: http://localhost:8080'); // 根据请求生成一个允许跨域的域名（允许请求方获取数据），不要用"*"
header('Access-Control-Allow-Methods: '.$_SERVER['REQUEST_METHOD']); // 允许访问的方法
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization");

header('content-type: application/json');
echo '{'a':1, 'b':2, 'c':3}';

使用布局模板：

新建文件：/src/components/Layout.vue

<template>
    <div>
        <h2>header</h2>
        <div class="container">
          <keep-alive>
            <router-view></router-view>
          </keep-alive>
        </div>
        <h2>footer</h2>
    </div>
</template>

修改:/src/main.js

import Vue from 'vue'
import router from './router'
import Layout from './components/Layout' // 引入布局文件

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { Layout },
  template: '<Layout/>'
})