“This is the third day of my participation in the First Challenge 2022. For details: First Challenge 2022”

Project background

  • Front frame: Vue2 family barrel
  • UI framework: Element

The front-end specification

  • Indent 2 Spaces (TAB/blank)
  • Single quotes
  • Curly braces, semicolons
  • Break lines if you can. Don’t make one line too long
  • Path with@Do not write relative paths at the beginning (starting with/SRC). /.. /

named

  • Hump (field from API can be reserved bottom line)
  • Try not to abbreviate (everyone has different habits, may not understand)
  • Views /, components/ FileName starts with uppercase: filename.vue
  • (CSS) The custom class can be named asProject name – XXXDifferent from the UI component class
  • Write variable names clearly and clearly. Avoid data, payload, result, etc. Popular words
  • Bool isXxx, hasXxx, canXxx, shouldXxx
  • Function + noun (noun + past tense verb)

The function, for instance:

  • Fetch: fetch data from remote (API) ex: fetchCourses()
  • Load: loads data from the local end ex: loadLanguage()
  • Calculate: calculated result ex: calculateScore()
  • Ex: showModal(), showDialog()
  • Get the data from the store
  • -Penny: I set up a store.
  • Create: Creates data
  • Update: Updates the information
  • Edit: Edit information
  • Remove: Remove the relationship between the data, the data itself still exists
  • Delete/destroy: Deletes data
  • On: Listens for sub-layer events

Sample files

views/_ViewExample.vue

components/_componentsExample.vue

@/views/_ViewExample.vue 
<template>
  <div class="container"></div>
</template>

<script>
/*eslint-disable no-unused-vars */
import { mapState, mapGetters, mapActions } from "vuex";
/*eslint-enable */
export default {
  metaInfo() {
    return {
      title: ""
    };
  },

  components: {},

  mixins: [],

  props: [],
  
  data() {
    return {};
  },
  
  computed: {},
  
  watch: {},

  mounted() {},

  methods: {}
};
</script>
Copy the code
@/components/_componentsExample.vue
<template>
  <div>Component Example</div>
</template>

<script>
/*eslint-disable no-unused-vars */
import { mapState, mapGetters, mapActions } from "vuex";
/*eslint-enable */

export default {
  components: {},

  mixins: [],

  props: [],
  data() {
    return {};
  },
  computed: {},
  watch: {},

  mounted() {},

  methods: {}
};
</script>

<style scoped></style>

Copy the code

  • Copy and paste the components, mixins, props, data… These attributes are in the same order and easier to find when maintaining

  • To type a global class, place it in app. vue (this one without scoped) or @import SCSS/CSS

other

  • V-if try to use positive sentences

  • V-if, v-show or not, important properties typed, logical, events written first, style & other backward, easy to find when modifying

<el-menu :default-active="menuIndex" mode="horizontal" router>
  <el-menu-item
    v-for="(menu, index) in menuList"
    :key="index"
    :route="menu.route"
    :index="String(index + 1)"
    class="hidden-sm-and-down"
  >Such and such function</el-menu-item>
  <el-menu-item v-if="isLogin" @click="logout" index="6">
    <el-button type="success" class="ivy-xxx xxx">logout</el-button>
  </el-menu-item>
</el-menu>
Copy the code
  • Assign name to the path instead of “/ XXX “, use name to jump to the page (path may change, but name usually does not change)
this.$router.push({
  name: "Home"});Copy the code

  • When data is initialized, numbers can be given zeros, strings “”, arrays []… (Type corresponding)

  • Form data can be created a xxForm to install data, to distinguish other data on the screen

export default {
  data: {
    // xx form data
    xxForm: {
      name: "".account: "".password: "",},// List of courses
    courseList: [].// News list
    newsList: [].}};Copy the code
  • Submit triggers the check mechanism of native HTML, which provides an extra layer of security. Of course, we need to specify validate so that we do not need to tie the enter event (which will go through the native mechanism but will be blocked).
<el-form @submit.prevent.native="submit">
  <el-input v-model="form.name" required></el-input>
  <el-button native-type="submit">
    submit
  </el-button>
</el-form>
Copy the code
export default {
  data() {
    return {
      form: {
        name: "",}}; },methods: {
    submit() {
      // validate
      // call API,}}};Copy the code

  • Switch case if there are too many else

  • Async/await can be used to flatten code asynchronously

Git

When committing, add a category to prepare your partner for what point of view to use to view the change

The following is for reference only

  • Feature: New/modified functions
Feature: Login page & function concatenationCopy the code
  • Document
Document: added the README. MdCopy the code
  • Fix: Fixes small bugs
Fix: variable nameCopy the code
  • -Nate: Are you planning to adjust? -Nate: Yeah.
  • Refactor: major adjustments (possibly to interfaces), refactoring, improvements

Vuex

  • Try to keep everything namespaced
  • According to the order of state, getters, mutations, actions, maintenance is easier to find
  • State can only be changed through mutations
  • On views and components, only dispatch actions, do not commit mutations directly
  • In order tomapState/mapGetters/mapActions replace

    Return this.$store.state/return this.$store.getters/this
  • . mapState/... mapGetters/... mapActionsWritten in the bookThe computed/the methodsAt the front, you can’t miss it

Unified API Management

Put it under @/apis and can be removed according to the back-end controller

/ / for the user. Js
import ApiService from "@/common/api.service";

export default {
  login(email, password) {
    return ApiService.post("login", {
      email,
      password,
    });
  },

  logout() {
    return ApiService.post("logout"); }};Copy the code
  • If used in vuex actions (if shared)
/ / for the user. Modules. Js
import userApi from "@/apis/user";

const actions = {
  async logout({ commit }) {
    await userApi.logout();

    JwtService.destroyToken();

    commit("setToken".null); }};Copy the code
  • If used in general views or components (independent data can be placed in data)
// Example a list page
import xxxApi from "@/apis/xxx";

async mounted() {
  const res = await xxxApi.getList();

  this.list = res.data;
}
Copy the code

conclusion

Before the start of the project, we must spend time with our partners to sort out a front-end code specification, so that partners can see each other’s code at a glance, greatly improving work efficiency and reducing maintenance costs. Later, when new partners see this detailed code specification, they can learn it faster. A unified code specification is the basis for a project to thrive, and I hope that the project you write can grow into a towering tree with fewer bugs. Thanks – (· ω ·) Blue