/vue-template

vue项目模板

Primary LanguageJavaScript

前端规范

代码风格

目录

Vue目录规范

npm命令

  1. npm run serve/dev 启动开发环境
  2. npm run build 生产环境打包
  3. npm run doc 根据注释生成帮助文档，参考注释规范
  4. npm run https 配置https环境，参考https
  5. npm run inspect 导出当前项目webpack配置

图标

图标使用svg-sprite-loader技术，将svg格式图标放入assets/svg目录。

使用方法

自定义全局组件Icon

<Icon type="iconName" color="red" :size="14" :class-name="my-icon"></Icon>

Element

统一使用element框架，可在plugins/element.js中配置用到的组件 默认引入了全部组件，可删除不使用的组件，可减少打包体积

CSS

和element一致，使用scss

axios封装

plugins/axios.js对axios进行了简单封装，可根据需要进行修改

autoHandleError

默认进行了全局错误处理。请求时可设置autoHandleError = false取消默认错误处理

this.$axios.get('/erp/common/shop', {
  autoHandleError: false
}).then(({ data: res }) => {
  if (res.success) {
    console.log(res)
  } else {
    // 自定义错误处理
  }
})

globalLoading

根据ajax请求实现了全局loading封装。

<template>
  <div id="app" v-loading="loading">
    <router-view />
  </div>
</template>

<script>

export default {
  name: 'app',
  computed: {
    loading() {
      return this.$store.state.app.loading
    }
  }
}
</script>

请求时，可设置globalLoading = false来禁止loading

this.$axios.get('/erp/common/shop', {
  globalLoading: false
}).then(({ data: res }) => {
})

接口管理

可将ajax服务在api目录以业务为分类统一管理

以下是api/todo.js内容

/**
 * 待办事项ajax服务
 * @module api/todo
 *
 */
import axios from '@/plugins/axios'

const url = '/todo'

// 待办事项服务接口
export default {
  /**
   * 分页获取
   * @param {object} param  请求参数
   * @param {number} [param.page] 当前页数
   * @param {number} param.pageSize 分页大小
   * @return {Promise}
   */
  list(param) {
    return axios.get(url, { param })
  },
  /**
   * 新建数据
   * @param {object} param  请求参数
   * @param {string} param.name 事项名称
   * @param {string} param.content 详细描述
   * @return {Promise}
   */
  create(param) {
    return axios.post(url, param)
  },
  /**
   * 获取详情
   * @param {string} id
   * @return {Promise}
   */
  show(id) {
    return axios.get(url + '/' + id)
  },
  /**
   * 更新单个数据
   * @param {string} id  数据id
   * @param {object} param  更新数据对象
   * @param {string} param.name 事项名称
   * @param {string} param.content 详细描述
   * @return {Promise}
   */
  update(id, param) {
    return axios.put(url + '/' + id, param)
  },
  /**
   * 删除单个数据
   * @param {string} id
   * @return {Promise}
   */
  delete(id) {
    return axios.delete(url + '/' + id)
  }
}

模拟请求

apis.js文件中支持使用expressjs和mockjs注册模拟接口

const Mock = require('mockjs')

module.exports = [{
  // 获取验证码
  url: '/code/fresh',
  method: 'get',
  callback (req, res) {
    res.json(success(Mock.mock({code:/\d{4}/})))
  }
}]


function success (data) {
  return {
    success: true,
    data
  }
}
function error (msg = '未知错误', code) {
  return {
    success: false,
    msg,
    code
  }
}

代理

开发代理服务http-proxy-middleware

proxy: {
  '^/erp/': {
    target: 'http://www.mangoerp.com',
    changeOrigin: true
  }
}

前端监控

内置了错误上报系统：badjs

// http://badjs.mangoerp.com/index.html
badjs.init({
  // 项目id, 需要申请
  id: 2,
  // 用户名或用户id，可从cookie中获取
  uin: 'test4444',
  // 错误上报概率，1表示100%上报
  random: 1,
  // 不监听window.onerror错误
  windowOnError: false,
  // 是否开启离线日志
  offlineLog: false,
  offlineLogAuto: false
})
// 全局错误处理
Vue.config.errorHandler = function errorHandler(err, vm, cause) {
  if (cause) {
    err.cause = cause
  }
  console.error(err)
  if (NODE_ENV !== 'development') {
    badjs.report(err)
  }
}

说明文档

代码注释规范使用jsdoc

运行以下命令，根据注释生成说明文档

npm run doc

vue组件注释

/**
 * @module components/Counter
 * @author 杜伟坡 <dovapour@qq.com>
 * @desc 计数器组件
 * @example <Counter :counter-initor="5" :step="2"></Counter>
 * @vue-prop {Number} conterInitor - 计数器初始值
 * @vue-prop {Number} [step=1] - 增加步长
 * @vue-data {Number} counter - 计数器当前值
 * @vue-computed {String} message
 * @vue-event {Number} increment - 计数器增加后，触发事件
 * @vue-event {Number} decrement - 计数器减小后，触发事件
 */

i18n

多语言支持，可查看branch:i18n

el-dialog

普通方法

<template>
  <div>
    <dialog1></dialog1>
    <dialog2></dialog2>
    <dialog3></dialog3>
  </div>
</template>

页面中引入并初始化了所有需要的dialog，这些dialog都会运行。引起不必要的性能消耗

推荐方法

import Dialog1 from './dialog/demo1.vue'
import Dialog2 from './dialog/demo2.vue'

export default {
  methods: {
    showDialog1() {
      this.helper.modal.open(DialogDemo1).then((result) => {
        console.log('result ok', result)
      }, (err) => {
        console.log('cancel', err)
      })
    },
    showDialog1WithData() {
    	// 打开时，自定义data数据、props
      this.helper.modal.open(DialogDemo1, {
        // prop数据
        propsData: {
          title: '请确认'
        }
        data: {
          form: {
            name: '前端分享'
          }
        }
      })
    }
  }
}

通过helper.modal.open实现了按需加载，关闭时会主动销毁dialog。

使用说明

使用helper.modal.open打开dialog时，混入(mixin)了以下特性:

  • visible属性，控制显示隐藏
  • resolve和reject方法，支持promise
  • destroy方法，关闭dialog时，自动销毁组件。不需要用户调用
  • keepAlive属性，支持关闭dialog时，不销毁组件。当缓存dialog时，页面离开前需要主动调用this.helper.modal.destroy(modName)来销毁组件
  • forceUpdate属性，刷新缓存组件的数据状态。适用于data/props修改后，需要缓存组件即时响应
// 最基本的el-dialog示例
<template>
  <el-dialog 
    title="普通dialog"
    <!-- 内置visible -->
    :visible.sync="visible"
    <!-- 内置reject -->
    @closed="reject">
    <h3>我是普通dialog</h3>
    <span slot="footer" class="dialog-footer">
      <el-button @click="reject">取 消</el-button>
      <el-button type="primary" @click="resolve">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  // 名称必须有，且全局唯一
  name: 'dialog-demo1'
}
</script>

详细使用方法，可查看src/views/demo/dialog.vue

开发阶段代码

通过webpack-strip-code实现测试代码只在开发阶段运行，打包上线时会自动删除

规则

符合以下规范的代码，打包时会自动删除

/* dev-block-start */
// 只在development环境运行，其它环境自动删除
alert('这里的代码只在开发阶段运行')
/* dev-block-end */

vscode代码片断

"development code": {
 	"scope": "javascript,typescript,vue",
 	"prefix": "devcode",
 	"body": [
		"/* dev-block-start */",
		"// 只在development环境运行，其它环境自动删除",
 		"$1",
 		"/* dev-block-end */"
 	],
 	"description": "只在开发阶段运行代码"
}

https

开启步骤：

  1. vue.config.js中 devServer.https选项设置成true
  2. 运行npm run https安装证书

window上运行时，会有以下确认窗口。选择【是】，安装完成

修改devServer.host后，需要重新运行npm run https

效果

打包分析

运行npm run build后会生成一个dist/report.html文件，可查看打包模块详细 chunk-vendors.js