Vue项目开发过程+VueRouter+VueX+axios

创建项目Vue项目

Vue CLI2初始化项目

vue init webpack 项目名

Vue CLI3初始化项目

vue create 项目名

使用Vue-Router路由

安装 与配置 与使用
npm install vue-router@3.0.1 --save

1 导入路由对象
2 安装插件
3 创建路由实例
4 导出路由对象
5 main.js中在vue实例中挂载router

import Vue from 'vue';
import VueRouter from 'vue-router';

const Home = () => import('@/views/home/Home');
const Category = () => import('@/views/category/Category');
const Shopcart = () => import('@/views/shopcart/Shopcart');
const Profile = () => import('@/views/profile/Profile');

const Detail = () => import('@/views/detail/Detail')

const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

//1.安装插件
Vue.use(VueRouter);

const routes = [
  {
    path: '',
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home
  },
  {
    path: '/category',
    component: Category
  },
  {
    path: '/shopcart',
    component: Shopcart
  },
  {
    path: '/profile',
    component: Profile
  },
  {
    path: '/detail/:iid',
    component: Detail
  }
];

//2.创建路由对象
const router = new VueRouter({
  routes,
  mode: 'history'
});

export default router;

app.vue中


<template>
  <div id="app">
    <keep-alive exclude="Detail">
      <router-view />
    </keep-alive>
    <main-tab-bar></main-tab-bar>
  </div>
</template>
<script>
import MainTabBar from "./components/content/mainTabbar/MainTabBar";

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

<style>
@import "assets/css/base.css";
</style>

使用VueX插件

npm install vuex --save

store/index.js 中

import Vue from 'vue';
import Vuex from 'vuex'

import mutations from './mutations'
import actions from './actions'
import getters from './getters'

//1.安装插件
Vue.use(Vuex);

//2.创建store对象
const store = new Vuex.Store({
  state: {
    cartList: [],
  },
  mutations,
  actions,
  getters,
});

//3.导出
export default store;
//4.在vue实例中挂载

使用axios

npm install axios@0.18.0 --save

封装axios network/request.js

import axios from 'axios'

export function request(config) {
  //创建实例
  const instance = axios.create({
    //baseURL: 'http://123.207.32.32:8000',
    baseURL: 'http://152.136.185.210:7878/api/m5',
    timeout: 5000,

  });

  //请求拦截
  instance.interceptors.request.use(config => {
    //console.log(config);
    return config;
  }, err => {
    //console.log(err);
  });

  //响应拦截
  instance.interceptors.response.use(res => {
    //console.log(res.data);
    return res.data;
  }, err => {
    //console.log(err);
  });

  return instance(config);//本身返回值就是一个promise,所以直接return
}

使用 network/home.js中

// 管理首页home 的请求
import { request } from './request'

export function getHomeMultidata() {
  return request({
    url: '/home/multidata'
  })
}

//在Home.vue中created中调用
//调用函数,压入函数栈(保存函数调用过程中所有变量);
//函数调用结束->弹出函数栈,(释放函数中所有变量)

export function getHomeGoods(type, page) {
  return request({
    url: '/home/data',
    params: {
      type, page
    }
  });
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值