创建项目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
}
});
}