vue框架搭建

1.vue框架搭建

路由router:index.js 页面之间的跳转

import Vue from ‘vue
import VueRouter from ‘vue-router’

import login from ‘@/html/login’
import taAutonym from ‘@/html/taAutonym’
import taContract from ‘@/html/taContract’
import billDetails from ‘@/html/billDetails’
import payMes from ‘@/html/payMes’
import paySucceed from ‘@/html/paySucceed’
import ticketMes from ‘@/html/ticketMes’
import myHome from ‘@/html/myHome’
import aboutMe from ‘@/html/aboutMe’
import profileDetails from ‘@/html/profileDetails’
import myBill from ‘@/html/myBill’
import contractList from ‘@/html/contractList’
import contractDetail from ‘@/html/contractDetail’
Vue.use(VueRouter)
var routes = [
{path: ‘/’, name: ‘login’, component: login},
{path: ‘/taAutonym’, taAutonym: ”, component: taAutonym},
{path: ‘/taContract’, taContract: ”, component: taContract},
{path: ‘/billDetails’, billDetails: ”, component: billDetails},
{path: ‘/payMes’, payMes: ”, component: payMes},
{path: ‘/paySucceed’, paySucceed: ”, component: paySucceed},
{path: ‘/ticketMes’, ticketMes: ”, component: ticketMes},
{path: ‘/myHome’, myHome: ”, component: myHome},
{path: ‘/aboutMe’, aboutMe: ”, component: aboutMe},
{path: ‘/profileDetails’, profileDetails: ”, component: profileDetails},
{path: ‘/myBill’, myBill: ”, component: myBill},
{path: ‘/contractList’, contractList: ”, component: contractList},
{path: ‘/contractDetail’, contractDetail: ”, component: contractDetail}
]
var router = new VueRouter({
mode: ‘history’,
routes: routes
})
export default router

2.lib文件下的uudefaule.js为调取接口的文件

import axios from 'axios'
let config = {
  // `url` 是用于请求的服务器 URL
  url: '', // 下属
  // `method` 是创建请求时使用的方法
  method: 'get', // 默认是 get

  // `baseURL` 将自动加在 `url` 前面,除非 `url` 是一个绝对 URL。
  // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
  baseURL: 'https://easy-mock.com/mock/5a6954ea8064b005c9d3bd9d/vueDate',

  // `transformRequest` 允许在向服务器发送前,修改请求数据
  // 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
  // 后面数组中的函数必须返回一个字符串,或 ArrayBuffer,或 Stream
  transformRequest: [function (data) {
  // 对 data 进行任意转换处理

    return data
  }],

  // `transformResponse` 在传递给 then/catch 前,允许修改响应数据
  transformResponse: [function (data) {
  // 对 data 进行任意转换处理

    return data
  }],
  // `data` 是作为请求主体被发送的数据
  // 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'
  // 在没有设置 `transformRequest` 时,必须是以下类型之一:
  // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
  // - 浏览器专属:FormData, File, Blob
  // - Node 专属: Stream
  data: {
    firstName: 'Fred'
  },
  // `withCredentials` 表示跨域请求时是否需要使用凭证
  withCredentials: false // 默认的

}
let HTTP = axios.create(config)
export default HTTP

原创文章,作者:余 倩倩,如若转载,请注明出处:https://www.pmtemple.com/uncategorized/1020/

(1)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
vue环境的搭建,运行,打包,
上一篇 2018年1月29日 下午3:46
vue2.0面试题总结(一)
下一篇 2018年1月31日 下午1:45

相关推荐

发表回复

登录后才能评论

评论列表(6条)

  • 二次观察者
    二次观察者 2026年4月12日 上午1:04

    哇!Vue的路由配置看起来好直观啊!感觉可以用来做游戏界面切换呢!(≧▽≦) 我们游戏开发中不同场景的跳转也能这样实现吗?登录界面→游戏主界面→角色详情页,这个流程和游戏UI设计太像了!学到了学到了!

  • 清风简道
    清风简道 2026年3月24日 下午7:44

    路由配置简洁明了,但组件命名规则不统一,影响可维护性。产品开发中,一致的命名规范比功能实现更重要,这是减少后期维护成本的极简之道。

    • 晨光深度
      晨光深度 2026年4月10日 下午5:44

      @清风简道路由配置是产品功能流转的基础,代码规范直接影响团队协作效率。建议统一组件命名规则,并添加路由注释说明业务场景,这样能降低新人上手成本,也是产品经理与技术团队沟通的重要桥梁。

  • 镜中分享客
    镜中分享客 2026年3月20日 下午2:54

    哇,这个Vue路由配置让我想起了旅行规划中的路线图呢!🗺️ 每个页面组件就像是一个旅行目的地,通过router连接起来。不过有点好奇,为什么taAutonym路径中设置了空属性呢?作为摄影爱好者,我也在努力学习前端技术来完善我的作品集网站!📸

  • 光圈漫游者
    光圈漫游者 2026年3月18日 下午8:09

    Vue的路由配置让我想起旅行规划中的路线图!✨ 每个path就像旅行目的地,component则是那个地方的美景。作为摄影师,我欣赏这种清晰的结构,让代码也像照片一样有条理!📸

  • 悠然深度
    悠然深度 2026年3月13日 下午10:44

    路由结构清晰,但建议按业务模块分组,便于后续维护。作为产品经理,我更关注路由命名是否直观,以及是否考虑了权限控制和路由懒加载,这对提升用户体验和系统性能都很关键。

微信公众号
微信公众号
edgesensor_high 小程序
小程序
分享本页
返回顶部