安装vue

基础安装

> 安装淘宝 npm
> npm install -g cnpm --registry=https://registry.npm.taobao.org
> 安装 vue 3.0
> npm install -g @vue/cli
> 检查vue是否安装成功
> vue --version
>创建项目
> vue create name

vue-router

安装

npm install vue-router@3.5.2 --save

配置

第一步：导入路由对象，并且调用Vue.use(VueRouter)

第二步：创建路由实例，并且传入路由映射配置

第三步：在Vue实例中挂载创建的路由实例
src---->router---->index,js

//引入、配置路由的相关信息
import Vue from 'vue'
import VueRouter from 'vue-router'
//1.Vue.use安装插件
Vue.use(VueRouter)
const routes =[
//.....
]
//2.创建路由对象
const router = new VueRouter({
     //配置路由与组件的关系
     routes,

})
//3.将router对象导出
export default router

src ----->main.js

import Vue from 'vue'
import App from './App.vue'
//引入路由对象
import router from './router' 
Vue.config.productionTip = false

new Vue({
  //挂载到vue实例
  router,
  render: h => h(App),
}).$mount('#app')

使用

第一步：创建路由组件

第二步：配置路由映射：组件和路径映射关系

第三步：使用路由:通过< router-view >

src---->router---->index,js

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
//路由懒加载，加载页面路径
const HomePage = () => import( /* webpackChunkName: 'HomePage' */ '@/views/HomePage')
const ShopData = () => import( /* webpackChunkName: 'ShopData' */ '@/views/ShopData')
//配置路由数组对象
const routes =[{
    //redirect重定向
    path: '/', 
    redirect: '/HomePage',
},
{
    path: '/HomePage',
    name: 'HomePage',
    component: HomePage
},
{
    path: '/ShopData',
    name: 'ShopData',
    component: ShopData
},
]
const router = new VueRouter({
    mode:'hash',
    routes,
})
export default router

App.vue

<template>
  <div id="app">
    <!--  使用router-view组件进行路由管理 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
};
</script>

vuex

安装vuex

npm install vuex --save

创建store

在项目src目录下创建store目录，在store目录中创建index.js文件。写入一下内容：

import Vue from 'vue'
import Vuex from 'vuex'
 
// 挂在Vuex
Vue.use(Vuex)
 
// 创建Vuex对象
const store = new Vuex.Store({
    state:{
        // 存放的键值对就是所要管理的状态
        // 以key：value为例
        key : value,
    }，
    mutations:{
        setKey(state, payload) {
            state.key = payload;
        }
    }
})
 
export default store

挂载store

在main.js中，添加代码：

 
import store from './store'
 
new Vue({
  el: '#app',
  router,
  store: store, //store:store 和 router一样，将我们创建的Vuex实例挂载到这个vue实例中
  components: { App },
  template: '<App/>'
})

在组件中使用

将需要使用的值写在computed中：

computed：{
    key() {
        return this.$store.state.key;
    }
}

如果在组件中使用v-model绑定computed中的值，需要在computed中定义set方法，如下：

computed:{
    key:{
        get(){
            return this.$store.state.key;
        },
        set(val){
            this.$store.commit('setKey', val);
        }
    }
}

在Vue组件中监听Vuex

在Vue组件中监听Vuex：

通过computed获取vuex中的状态值。

通过watch监听值的改变。

computed:{
    key(){
        return this.$store.state.key;
    }
},
watch:{
    key(val) {
        // 要做的操作
    }
}

axios

安装

npm install axios --save

在main.js中写入一下代码

import axios from 'axios'
Vue.prototype.axios = axios

调用

下面源码是直接使用axios来调用后台的接口示例：

this.axios({
  url: '',//请求地址
  method:'POST',//请求方法
  responseType: 'json',//返回值类型
  params: {
    arg1: "arg1"//请求携带参数
  }
}).then(res => {
  console.log(res)//请求成功
}).catch(error => {
  console.log(error);//请求失败
})

使用拦截器—添加 在src创建util目录，在里面创建request.js文件

import axios from 'axios';

const service = axios.create({
	baseURL: "http://127.0.0.1:8080/projectName",//请求地址前缀
	timeout: 0
});

// 请求拦截器
service.interceptors.request.use(
	config => {
   //添加请求头部参数
		config.headers['arg1'] = "arg1Value";
		return config;
	},
	error => {
		return Promise.reject(error);
	}
);

// 响应拦截器
service.interceptors.response.use(
	response => {
		//拦截到成功的数据
	  	return response.data;
	},
	error => {
		//拦截到失败的数据
		return Promise.reject(error);
	}
);

export default service;

在src创建api目录，在里面创建user.js文件

import request from '@/utils/request'; //引入request.js

export function getUserInfo(data) {
	return request({
		url: 'userController/getUserInfo',
		method: 'post',
		data: data
	});
}

页面调用拦截器

<template>
    <div>
        <h1>{{userInfo}}</h1>
    </div>
</template>

<script>
  	//引入api
	import { getUserInfo } from './api/user.js';
    export default {
      date(){
        return{
        	userInfo: {}
        }
      },
      mounted(){
        const par = {arg1: "arg1Value"};
        //调用api
        getUserInfo(par).then(re=>{
        	//请求成功 返回re
            this.userInfo = re.data;
        }).catch(err=>{
           //请求失败
        })
      }
   }
</script>