社区首页 >专栏 >vue,vue-router,vuex,axios整合

vue,vue-router,vuex,axios整合

原创

conanma

修改于 2021-11-03 04:41:10

1.2K00

代码可运行

文章被收录于专栏：正则正则

运行总次数：0

代码可运行

*vue官网：https://cn.vuejs.org/ vue-router官网：https://router.vuejs.org/zh-cn/ vuex官网：https://vuex.vuejs.org/zh-cn/ axios中文说明：https://www.kancloud.cn/yunye/axios/234845

vue-cli建立项目

npm install -g vue-cli 全局安装vue脚手架
vue init webpack-simple project-name 使用webpack-simple模板建立项目
npm run install 安装依赖库
npm run dev 启动开发服务器

配置各种loader

#在webpack.config.js文件中添加
module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {}
                    // other vue-loader options go here
                }
            },
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader',
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
                loader: 'file-loader'
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]?[hash]'
                }
            }
        ]
    },

集成vue-router

#在src下新建router.config.js文件，用于存储路由配置信息
const updateUser = r => require.ensure([], () => r(require('./components/user/updateUser.vue')), 'updateUser')
export default [
    {
        path: '/updateUser',
        component: updateUser
    }
];

*在main.js中引入vue-router
import VueRouter from 'vue-router'
import routes from './router.config' 
Vue.use(VueRouter)
const router = new VueRouter({
    routes,
    mode: 'history',
    scrollBehavior (to, from, savedPosition) {
        if (savedPosition) {
            return savedPosition
        } else {
            if (from.meta.keepAlive) {
                from.meta.savedPosition = document.body.scrollTop;
            }
            return {x: 0, y: to.meta.savedPosition || 0}
        }
    }
})
new Vue({
    el: '#app',
    router,
    render: h => h(App)
})

集成vuex

src下新建store文件夹

  ----------------------------------------------------------------------------------------------
index.js
import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
import actions from './action'
import getters from './getter'
Vue.use(Vuex)
#index.js中主要配置state-->就是我们所需要的数据
const state = {
    mytest: 'NB',
}
#导出vuex对象树
export default new Vuex.Store({
    state,
    getters,
    actions,
    mutations,
})
  ----------------------------------------------------------------------------------------------
mutation-types.js
#主要用来配置事件（动作）类型
export const MY_TEST = 'MY_TEST'
  ----------------------------------------------------------------------------------------------
mutations.js
#事件具体实现，必须是同步操作
import {
    MY_TEST,
} from './mutation-types.js'
export default {
    [MY_TEST](state){
        state.mytest = "SB"
    }
}
  ----------------------------------------------------------------------------------------------
action.js
#提供事件的异步调用（如异步发送邮件）
  ----------------------------------------------------------------------------------------------
getter.js
#提供state的计算调用
有时候我们需要从store中的state中派生出一些状态，例如对列表进行过滤并计数
  ----------------------------------------------------------------------------------------------

在main.js中引入vuex

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

集成axios

#在src目录下新建http.js文件，导出axios对象，该文件主要提供axios配置，如请求拦截器等等
import axios from 'axios'
// axios 配置
axios.defaults.timeout = 5000;
// http request 拦截器
// axios.interceptors.request.use(
//     config => {
//         if (store.state.token) {
//             config.headers.Authorization = `token ${store.state.token}`;
//         }
//         return config;
//     },
//     err => {
//         return Promise.reject(err);
//     });
// http response 拦截器
// axios.interceptors.response.use(
//     response => {
//         return response;
//     },
//     error => {
//         if (error.response) {
//             switch (error.response.status) {
//                 case 401:
//                     // 401 清除token信息并跳转到登录页面
//                     store.commit(types.LOGOUT);
//                     router.replace({
//                         path: 'login',
//                         query: {redirect: router.currentRoute.fullPath}
//                     })
//             }
//         }
//         // console.log(JSON.stringify(error));//console : Error: Request failed with status code 402
//         return Promise.reject(error.response.data)
//     });
export default axios;

项目整体目录结构

dist --> 项目编译后的目录，也是我们最后要部署到服务器上的文件
node_modules --> node.js库
src/API --> 封装获取API数据的方法
src/assets --> 资源文件，如js，css，图片等
src/compents --> .vue文件，即组件
src/store --> vuex单例数据树配置文件夹
src/utils --> 封装常用的工具类
APP.vue --> 主页面组件
http.js --> 封装axios
main.js --> 工程入口文件，可在其中配置导入全局要是用的组件及库
router.config.js --> 封装路由信息配置
index.html --> 访问主页，需要部署到服务器上
package.json --> 依赖库配置
webpack.config.js --> webpack工程配置，主要配置loder，用于解析各类文件