基于vue构建的spa项目总结(一)

作为学习前端第一个完整的项目，有必要记录一下这两个月来的心得和踩过的坑。

前言

项目为一个工业大数据spa，功能主要为csv上传与管理，基于csv进行的表格绘制与相关基于echarts的图表绘制。
使用到的技术有vue、vue-router、vuex、vue-resource、sass。
本文分为3个部分:路由设置，组件书写，全局变量与本地储存。

项目结构

• project
  
  • src
  • components (组件)
  • store （vuexmodules）
  • main.js （入口文件）
  • router.js （路由文件）
  • store.js （vuex文件）
  • static
  • css
  • js
  • img
  • index.html

在main.js中引入store和router

import store
import routes
const router = new VueRouter({
  routes,
})
const cisdi = new Vue({
  store,
  router,
}).$mount("container")

路由设置

路由采用vue-router。

单页的路由

单页应用的路由控制主要有两种：
1. hash 写了一个简易的hash路由
2. historyApi的pustate
vue-router默认的模式为hash，该模式下地址栏会有#，影响美观，因此选择history模式可能更适合。但是pushstate只支持ie10+。

if(window.history.pushState){
  const router = new VueRouter({
    routes,
    mode:'history'
  }
}

路由结构

项目路由结构上有两种选择。
1. 嵌套路由的实现方式：
根路由：router-view(index)
嵌套路由1级：router-view(导航)—主页—登录—注册—忘记密码—404
嵌套路由2级：步骤1—步骤2—步骤3—步骤4—步骤5
2. 命名路由的实现方式：
根路由：router-view(index)
嵌套路由1级：主页—登录—注册—忘记密码–404—-导航&步骤1—导航&步骤2······

一方面导航作为每一个步骤都存在的组件，另一方面命名路由在这种情况下的写法有些重复，因此选择了嵌套路由。
但是在结构上导航与步骤应当是同级的组件，所以嵌套路由又有些无伤大雅的欠缺。
页面404在按照文档上写必须得写在最后，写在前面会将所有路由都导向404

const routes = [{
  path:'/login',
  component: Login
},{
  path:'*',
  component:404
}]

#