Vuecli3框架文档SPA

文档

框架基于Vue CLI3 对Babel、、ESLint、PostCSS、提供开箱即用的支持。UI采用vant组件库，异步请求采用axios，状态管理采用Vuex，路由管理采用Vue Router，开发语言ES6。

目录结构

├── node_modules     依赖项
├── public     静态资源
├── getIcons     字体图标
├── src
-----├── api     接口配置
-----├── assets     CSS及静态资源
-----├── components     组件
-----├── base     公共组件
-----├── pages     页面组件
-----├── router     路由
-----├── store     状态管理
-----├── App.vue     根组件
-----├── main.js     入口文件
├── babel.config.js     babel配置文件
├── package.json     项目描述及依赖
├── package-lock.json     版本管理
├── vue.config.js     全局CLI配置

自适应方案

封装了setHtmlFontSize.js 、px2rem-loader 对像素单位实现智能换算，开发过程直接写设计稿px，实现不同手机机型适配。

• 设计稿尺寸按750px宽设计
• 单位直接用px开发
• 不想进行转换的地方可以写成Px或PX
• px2rem会对插件里的px进行转换（注意）

开发规范

Vuex规范

所有状态集中管理的原则，首先在state.js getters.js mutations-types.js 中定义基础状态，然后mutations和actions中引用mutations-types.js中的定义。

定义

• state.js--------单一状态树
• getters.js-------state的计算方法，返回处理后的状态
• mutations-------更改状态的唯一方法，不能异步操作
• actions-----可多条mutations方法提交,可以包含异步操作

使用

• 统一用getters取值，而不是state和getters混用，利用...mapGetters映射到局部computed里使用

import { mapGetters } from 'vuex'
//对getter属性另取名字，就写成对象形式
 computed: {
    ...mapGetters({ audioSong: 'AUDIO_ING_SONG'})
  }
  //或者
  computed: {
    ...mapGetters([AUDIO_ING_SONG])
  }

• 异步统一用actions更改状态，利用mapActions映射到局部methods里使用

import { mapActions } from 'vuex'
export default {
  // ...
  methods: {
    ...mapActions([
      'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`
      // `mapActions` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
    ]),
    ...mapActions({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
    })
  }
}

api规范

文件结构

├── api
-----├── config.js     接口url
-----├── index.js     axios配置

说明

config.js设置开发与生产环境接口前缀，并统一管理所有接口地址，按模块进行分类，注意书写清晰的注释说明。
index.js封装axios配置及异步方法，需要params的请求以参数的形式传递，注意书写清晰的注释说明。

axios示例

/**
   * 请求 可获取推荐歌单
   * ?limit=30&order=hot
   * @param {*} limit 取出数量，默认是30
   * @param {*} order 分别对应最新和最热,可选值为 'new' 和 'hot'
   * @param {*} cat tag, 比如 " 华语 "、" 古风 " 、" 欧美 "、" 流行 ", 默认为 "全部",
   *  :( 页数 -1)*30, 其中 30 为 limit 的值 , 默认 为 0
   */
  recSongListFn (limit = 30, order = 'hot', cat) {
    return axios.get(recSongList, {
      params: {
        limit,
        order,
        cat
      }
    })
  },

//调用
//函数默认参数允许在没有值或undefined被传入时使用默认形参
import api from 'api'
api.recSongListFn(undefined, undefined, key)
.then(res => {
  const data = res.data
  if (data.code === 200) {
    this.list = data.playlists
    this.load = false
  }
})

路由规范

说明

• 模块化引入，统一管理
• 在动态import()代码处添加注释webpackChunkName告诉webpack打包后的chunk的名称
• 嵌套路由中在父级组织登录判断，子集继承。

const index = () => import(/* webpackChunkName: "group-index" */ '@/pages/index/index')

router介绍

官方文档

一些知识点

如何响应路由参数的变化

当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。
复用组件时，想对路由参数的变化作出响应的话，你可以简单地watch (监测变化) $route 对象。

const User = {
  template: '...',
  watch: {
    '$route' (to, from) {
      // 对路由变化作出响应...
    }
  }
}

或者引入的 beforeRouteUpdate 导航守卫

const User = {
  template: '...',
  beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
}
注意是：
（1）从同一个组件跳转到同一个组件。
（2）生命周期钩子created和mounted都不会调用。

vue-router的几种实例方法以及参数传递

参数：字符串或者对象
// 字符串
router.push('home')
// 对象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})
// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

注意：
path 可以直接写带参数的完成路径
path 等效于 name+params
query是查询参数，和动态匹配路由参数params不同
path +params不合法, params不会生效。

const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

动态匹配路由参数
我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果：

const User = {
  template: '<div>User</div>'
}
const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
  ]
})

现在呢，像 /user/foo 和 /user/bar 都将映射到相同的路由。
一个“路径参数”使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用。于是，我们可以更新 User 的模板，输出当前用户的 ID：

const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}

你可以在一个路由中设置多段“路径参数”，对应的值都会设置到 $route.params 中。例如：

除了 $route.params 外，$route 对象还提供了其它有用的信息，例如，$route.query (如果 URL 中有查询参数)、$route.hash 等等。你可以查看 API 文档 的详细说明。

登录逻辑

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // matched 返回当前路由从上到下的所有对象数组
    // some遍历路由树,这样子路由不需要重复配置requiresAuth,父级控制即可
    if (!store.getters.LOGIN_STATE) {
      console.log(to.fullPath)
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    next() // 确保一定要调用 next()
  }
})

• 路由中配置元信息， meta:{requiresAuth: true}
• 全局导航守卫,some遍历需要登录的元信息字段
• vuex中记录登录状态，store.getters.LOGIN_STATE
• 跳转到登录页面,带上URL查询参数query字段，用于返回原地址。对于路径 /login?redirect='/index'，可这样获取 $route.query.redirect == '/index'

图标

在线引用阿里图标库，上线后可考虑本地化
1. 引入样式 //at.alicdn.com/t/font_8d5l8fzk5b87iudi.css
2. <i class="iconfont icon-xxx"></i>