路由(router)

安装

npm install vue-router

引用

在view目录中创建两个vue页面用来测试，view/test1.vue和view/test2.vue。
在src创建目录router，并创建文件index.js，文件内容如下：

import Vue from 'vue'
import Router from 'vue-router'
import test1 from '../view/test1.vue'
import test2 from '../view/test2.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
	path: '/test1',
	name: 'test1',
	component: test1
    },{
	path:'/test2',
	name:'test2',
	component: test2
    }
  ],
	mode: "history"//干掉地址栏里边的#号键
})

其中关键点是import Router from 'vue-router'和Vue.use(Router)。
在main.js中再把router/index.js引入进来

...
import router from './router/index.js'
...
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

使用

在App.vue文件中添加router-view作为显示路由页面的容器节点。

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <!-- 展示router -->
    <router-view></router-view>
  </div>
</template>

在需要添加路由链接的地方添加类似如下标签

<router-link  to="/test1">切换到test1组件</router-link>
<router-link  to="/test2">切换到test2组件</router-link>

Vuex

安装

npm install vuex

引入

在src创建目录store，并创建文件store.js，文件内容如下：

import Vue from 'vue'
import Vuex from 'vuex'
import {
  log
} from 'util';
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    count: 0,
    token: ''
  },
  getters: {
    getterCount(state) {
      console.log(state);
      return state.count;
    },
    getterToken(state) {
      return state.token;
    }
  },
  mutations: {
    addCount(state, obj) {
      return state.count += obj.num;
    },
    subCount(state, obj) {
      return state.count -= obj.num;
    },
    setToken(state, obj) {
      return state.token = obj.token
    }
  },
  actions: {
    addCountAsy(context) {
      setTimeout(() => {
        context.commit('addCount', {
          num: 2
        })
      }, 1000)
    },
    subCountAsy(context) {
      setTimeout(() => {
        context.commit('subCount', {
          num: 2
        })
      }, 1000)
    }
  }
})

在main.js中再把store/store.js引入进来

...
import store from './store/store.js'
Vue.use(Vuex)

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

使用

修改test1.vue添加内容如下。

<template>
  <div>
    <button @click="handleAdd">handleAdd</button>
    <button @click="handleAddAsy">handleAddAsy</button>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  components:{
      First
  },
  computed: {
    count() {
      return this.$store.state.count;
    },
    getCount() {
      return this.$store.getters.getterCount;
    }
  },
  methods: {
    // 可以通过点击事件进行同步的增加或减少count的值，且每次加减的值为传入载荷（可以为参数及对象）num的值2，载荷应该是一个对象，这样可以包含多个字段并且记录的 mutation 会更易读
    handleAdd() {
      this.$store.commit("addCount", {
        num: 2
      });
      console.log(
        "state中的count为：" + this.$store.state.count,
        "getters中的count为：" + this.$store.getters.getterCount
      );
    },
    handleSub() {
      this.$store.commit("subCount", {
        num: 2
      });
      console.log(
        "state中的count为：" + this.$store.state.count,
        "getters中的count为：" + this.$store.getters.getterCount
      );
    },
    handleAddAsy() {
      this.$store.dispatch("addCountAsy");
    },
    handleSubAsy() {
      this.$store.dispatch("subCountAsy");
    }
  },
  mounted() {
  }
};
</script>

<style>
</style>

自定义组件

创建组件

新建一个目录单独存放自定义组件，在src中创建components目录；
再创建一个vue文件，如：first.vue；
文件内容如下：

<template>
<div>
  <h2>{{msg}}</h2>
  <router-link  to="/test1">切换到test1组件</router-link>
  <router-link  to="/test2">切换到test2组件</router-link>
</div>
</template>

<script>
// 1、export 表示导出,在自定义组件里面使用export default导出  
export default {
  // name 表示设置别名，可以不设置，建议和组件的名称一致
  name:"First",
  data(){
    return{
      msg:"This is Vue components"
    }
  }
}
</script>

<style>
</style>

使用组件

在需要使用自定义组件的vue文件中的脚本（script）部分引入组件，并在对象中声明组件；在模板（template）中需要使用的地方插入组件标签。

<template>
<div>
  <h1>TEST1</h1>
  <First></First>
  <button @click="handleAdd">handleAdd</button>
  <button @click="handleAddAsy">handleAddAsy</button>
</div>
</template>

<script>
// 1、导入自定义组件 First即First.vue组件里面设置的name值
import First from "../components/first.vue"
export default {
  name: "HelloWorld",
  components:{
    First
  },
  ...
};
</script>

<style>
</style>

多环境部署

创建配置文件

在项目根目录（package.json所在目录）创建如下各个环境文件。

.env：默认配置信息
.env.dev：开发环境配置信息
.env.test：测试环境配置信息
.env.prod：生产环境配置信息

文件内容类似，以下只给出一个例子：

NODE_ENV = "base"
VUE_APP_API_URL = "http://127.0.0.1:8080"
VUE_APP_ENV_NAME = "基础环境"

环境变量名称必须以VUE_APP_开头，

在package.json中编写运行或编译的脚本，如下：

{
  ...
  "private": true,
  "scripts": {
    "dev": "vue-cli-service serve --mode dev",
    "test": "vue-cli-service serve --mode test",
    "build": "vue-cli-service build --mode prod"
  },
  "dependencies": {
    "@vue/cli-service": "^4.5.13",
    "babel-preset-es2015": "^6.24.1",
    ...
    "vue": "^2.5.16",
    "vue-router": "^3.5.1",
    "vuex": "^3.6.2"
  },
  ...

使用

process.env.VUE_APP_ENV_NAME

本节参考

Vue CLI项目进行不同的环境配置

axios及axios拦截器

import axios from 'axios'
import store from '../store/store'
import router from '../router/index.js'
// 创建axios实例
const service = axios.create({
  // baseURL: baseUrl, // api 的 base_url
  baseURL: process.env.VUE_APP_API_URL, // api 的 base_url
  timeout: 300000 // 请求超时时间
})
// request 拦截器
service.interceptors.request.use(
  config => {
    console.log(store.state)
    if (store.state.token) { // 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了
      config.headers['x-access-token'] = store.state.token;
      console.log(config)
    }
    return config
  },
  error => {
    console.log(error) // for debug
    Promise.reject(error)
  }
)
// response 拦截器
service.interceptors.response.use(
  response => {
    return response.data
  },
  error => {
    console.log(error.response) // for debug
    switch (error.response.status) {
      case 500:
        // 这里写清除token的代码
        if (error.response.data.message.indexOf("Token失效") > -1) {
          router.replace({
          path: 'login',
          query: {redirect: router.currentRoute.fullPath}
          //登录成功后跳入浏览的当前页面
        })
      }
    }
    return Promise.reject(error)
  }
)
export default service

系列链接

Vue脚手架常用工具学习(第一季)
Vue脚手架常用工具学习(第二季)

SHO酱的Blog