Vue2框架学习demo

最新推荐文章于 2024-04-18 14:41:10 发布

GZX@

最新推荐文章于 2024-04-18 14:41:10 发布

阅读量371

点赞数

文章标签：学习 vue.js javascript

本文链接：https://blog.csdn.net/qq_51641384/article/details/130327671

版权

一、vue.config.js

module.exports = {
  lintOnSave: false,
  devServer: {//设置本地默认端口
      host: '0.0.0.0',
      port: 8082,
      proxy: { //设置代理
          '': { //设置拦截器
              target: 'http://114.67.241.121:8080', //代理的目标地址
              changeOrigin: true, //是否设置同源
          }
      }
  }
};

二、main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router/router'

Vue.config.productionTip = false

new Vue({
  router,//导入router
  render: h => h(App),
}).$mount('#app')

三、App.vue

<template>
  <div id="app">
    <!-- 显示路由视图 -->
    <router-view></router-view>
  </div>
</template>

<script>


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

<style>
</style>

四、request.js

//引入axios包
import axios from 'axios'
//创建request对象
const request = axios.create({
    baseURL: '', 
    timeout: 5000,
    headers: {}
})

// request 拦截器
// 可以自请求发送前对请求做一些处理
// 比如统一加token，对请求参数统一加密
// request.interceptors.request.use(config => {
//     config.headers['Content-Type'] = 'application/json;charset=utf-8';
//     //取出sessionStorage里面的缓存的用户信息
//     let user = sessionStorage.getItem("user");
//     if (sessionStorage.getItem("token") != null) {
//         //token信息
//         config.headers['token'] = sessionStorage.getItem("token"); // 设置请求头
//     }
//     return config
// }, error => {
//     return Promise.reject(error)
// });

export default request

五、router.js

//配置路由
import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);
//引入路由组件
import newView from "@/view/newView.vue";
import secondView from "@/view/secondView.vue";
export default new VueRouter({
    //配置路由
    routes:[
        {
            path:'/newView',
            name:'newView',
            component:newView
        },
        {
            path:'/secondView',
            name:'secondView',
            component:secondView,
            // children:[{
            //     //配置子路由
            // }]
        }
    ]
})