搭建一个vue2.0的项目

目录

搭建环境

使用脚手架搭建项目

配置路由

配置ajax-使用axios

完成

 

搭建环境

1. node
2. vue-cli

npm install -g vue-cli

使用脚手架搭建项目

cd 进入你的项目中然后运行yarn run dev 或者 npm run dev 就行了

配置路由

1. 路由守卫--在router-index中添加

router.beforeEach((to, from, next) => {
	if (to.meta.requireAuth) {
		// 判断该路由是否需要登录权限
		if (sessionStorage.getItem('token')) {
			// 通过vuex state获取当前的token是否存在
			next()
		} else {
			next({
				path: '/login',
			})
		}
	} else {
		next()
	}
})

配置ajax-使用axios

1. 安装axios

   1. yarn add axios

       

2. 在src中创建api文件夹
   1. 创建两个文件http.js和httpUrl.js

      1. //httpUrl.js
         let baseUrl = ''
         if (process.env.NODE_ENV == 'development') {
           //开发环境下调用的接口地址
         	// baseUrl = 'xxx'
         } else if (process.env.NODE_ENV == 'production') {
         	//线上环境调用的接口地址
           // baseUrl = 'xxx'
         }
         const httpUrl = {
         	baseUrl
         }
         
         export default httpUrl;

         //http.js
         import axios from 'axios';
         
         //创建axios实例
         const Axios = axios.create({
         	timeout: 1000 * 10, //10s的超时时间
         })
         
         // 设置post请求头
         Axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
         
         
         //请求拦截器 若存在token，则请求头中携带token
         Axios.interceptors.request.use(
         	(config) => {
         		if (sessionStorage.getItem('token')) {
         			config.headers.Authorization = sessionStorage.getItem('token')
         		}
         		return config
         	},
         	(error) => {
         		return Promise.reject(error)
         	}
         )
         
         //响应拦截器
         Axios.interceptors.response.use(
         	(res) => {
         		if (res.data.status === 401) {
         			//登录失效
         			sessionStorage.removeItem('token')
         			sessionStorage.removeItem('userData')
         			window.location.href = '/login'
         			return
         		} else if (res.data.status === 403) {
         			tip('您尚未有此权限')
         		}
         		return res
         	},
         	(error) => {
         		const { response } = error
         		if (response) {
         			// 请求已发出，但是不在2xx的范围
         			errorHandle(response.status, response.data.errMsg)
         			return Promise.reject(response)
         		}
         	}
         )
         
         export default Axios;

          

   2. 创建统一存放接口文件baseHttp.js

      1. //baseHttp.js
         import { baseUrl } from './httpUrl';
         import axios from './http';
         
         const baseApi = {
           //登录
           login(data) {
             return axios.post(`${baseUrl}/login`, data);
           }
         };
         export default baseApi;

          

      2. 调用直接引入baseHttp.js文件 然后baseApi.login()

完成

 

 

---