Vue project specification for front-end specification

Other specifications:

HTML specification

Media file specification

The CSS specification

Javascript code

NodeJs specification

Structured Specification (Webpack)

├─ index.html entry Page ├─ Favicon.ico page ICONS ├─.Babelrc Rules ├─.EditorConfig Editor Configuration ├─.EsLintignore EsLint Ignore Rules ├─ .esLintrc.js EsLint Rule ├─.gitignore Git Ignore Rule ├─ Build Build Script directory │ ├─ build-server.js Run local Build Server │ ├─ ├─ Dev-client.js Dev Server Heavy Loading Script, │ ├─ Dev-client.js Dev Server Heavy Loading Script │ ├─ Webpack.base.conf. Js Basic configuration │ ├─ webpack.base.conf. Js Basic configuration │ ├─ dev-server.js ├ ─ ├ ─ ├ ─ sci-imp (sci-imp, sci-imp, sci-imp, sci-imp, sci-imp, sci-imp, sci-imp, sci-imp ├─ config project │ ├─ Dev.env.js Environment variables │ ├─ index.js project Configuration file │ ├─ prod.env.js │ ├─ ├─ ├─ download.txt ├─ download.txt ├─ download.txt ├─ download.txt ├─ SRC project source directory │ ├─ main.js ├─ app.vue Root Component │ ├── Public Component directory │ │ ├─ ├─ SRC project source directory │ ├─ main.js ├─ app.vue root component │ ├── public component directory │ │ ├─ ├─ SRC project source directory │ ├─ main.js Title. Vue │ ├─ Assets Static Resources Directory, The resources here will be wabpack build │ │ ├ ─ ─ the CSS style of public file directory │ │ ├ ─ ─ js public js file directory (e.g., help) │ │ └ ─ ─ img image storage directory | | ─ ─ lib external reference plug-in to store and modify the file | | - datas │ ├─ ├─ ├─ bass Exercises, ├─ ├─ bass Exercises, │ ├─ ├─ ├─ ├─ exercises, Unified management │ │ └ ─ ─ index. Js │ └ ─ ─ views view module name │ ├ ─ ─ hello.html vue │ └ ─ ─ notfound. Vue ├ ─ ─ the static pure static resources, will not be wabpack build. └ ─ ─test├─ ├─ ├─ ├─ class.confcaseDirectory └ ─ ─ Hello. Spec. JsCopy the code

Vue file

• The basic structure

  <template>
    <div></div>
  </template>
  <script>
    export default {
      components: {},
      data() {
        return {};
      },
      methods: {},
      mounted() {}
    };
  </script>
  <! Declare the language and add scoped -->
  <style lang="less" scoped></style>
  Copy the code

• Vue file method declaration order

  - components
  - props
  - data
  - computed
  - created
  - mounted
  - activited
  - update
  - beforeRouteUpdate
  - metods
  - watch
  Copy the code

Label attributes wrap automatically

Wrap each property except the first and keep it aligned

<! Recommend -- -- -- >
<a :href="item.onestore_url"
   target="_blank"
   @click="goToDownload()">
  <img src=".. /images/one_downloadbadge_red_black.png"
       alt="download-icon">
</a>

Copy the code

<! -- Not recommended -->
<a :href="item.onestore_url" target="_blank" @click="goToDownload()">
  <img src=".. /images/one_downloadbadge_red_black.png" alt="">
</a>

Copy the code

Component naming conventions

• Component names should always be multiple words, except for the root component App

• Meaningful nouns, short and readable

• Naming follows the PascalCase convention

  • Common components begin with Abcd (company name abbreviation), e.g. (AbcdDatePicker,AbcdTable)
  • Intra-page components start with a short component module name and end with Item, for example (StaffBenchToChargeItem, StaffBenchAppNotArrItem)

• Use follow the KEbab-case (dash delimited naming) convention

• To use components in a page, close them and separate them with short lines, such as (
  ,
  ).

• When importing and registering components, follow the PascalCase convention

• Also note that you must comply with the custom element specification: Do not use reserved words.

Props naming convention

When declaring prop, it should always be named camelCase, and kebab-case should always be used in templates

<! Recommend -- -- -- >
<script>
  props: {
    greetingText: String;
  }
</script>

<welcome-message greeting-text="hi"></welcome-message>

<! -- Not recommended -->
<script>
  props: {
    'greeting-text': String
  }
</script>

<welcome-message greetingText="hi"></welcome-message>
Copy the code

Annotation specifications

Code comments are especially important in the later maintenance of a project, so we write component usage instructions for each component that is reused and method instructions for each method in the component.

Be sure to add comments in the following cases

Usage of common components 2. Important functions or classes in each component 3. Complex service logic processing 4. The code handling instructions for special cases need to describe the variables for special purposes in the code, the existence of critical values, hacks used in functions, and the use of certain algorithms or ideas. 5. Comment blocks must begin with /** (at least two asterisks) **/; 6. Single-line comments using //; 7. Multiple if statementsCopy the code

Coding standards

Use ES6 style code source code

• Let is used to define variables and const is used to define constants

• Static strings use single or backquotation marks. Dynamic strings use backquotation marks

  / / recommend
  const a = 'foobar';
  const b = `foo${a}bar`;
  const c = 'foobar';
  
  / / do not recommend
  const a = 'foobar';
  const b = 'foo' + a + 'bar';
  Copy the code

• Deconstruction assignment

  // Array destruct assignment
  const arr = [1.2.3.4];
  / / recommend
  const [first, second] = arr;
  / / do not recommend
  const first = arr[0];
  const second = arr[1];
  
  // Object destruct assignment
  / / recommend
  function getFullName(obj) {
    const { firstName, lastName } = obj;
  }
  // best
  function getFullName({ firstName, lastName }) {}
  / / do not recommend
  function getFullName(user) {
    const firstName = user.firstName;
    const lastName = user.lastName;
  }
  Copy the code

• Copy an array

  Using extension operators (…) Copy the array.

  const items = [1.2.3.4.5];
  / / recommend
  const itemsCopy = [...items];
  / / do not recommend
  const itemsCopy = items;
  Copy the code

• Arrow function

  When functional expressions are required, use arrow functions instead. Because it’s cleaner, and it’s bound to this

  / / recommend
  const boundMethod = (. params) = > method.apply(this, params);
  / / do not recommend
  const self = this;
  const boundMethod = function(. params) {
    return method.apply(self, params);
  };
  Copy the code

• The module

  • If the module has only one output value, use export default. If the module has multiple output values, do not use Export default. Export default and ordinary export should not be used together

    / / recommend
    import myObject from './importModule';
    
    / / do not recommend
    import * as myObject from './importModule';
    Copy the code

  • If a module outputs a function by default, the first letter of the function name should be lowercase

    function makeStyleGuide() {}
    
    export default makeStyleGuide;
    Copy the code

  • If a module outputs an object by default, the first letter of the object name should be capitalized

    const StyleGuide = {
      es6: {}};export default StyleGuide;
    Copy the code

Instructions specification

• Any abbreviations of instructions shall be in abbreviated form

  / / recommend
  :class="{' show - left: true}"
  @click="getListData"
  
  / / do not recommend
  v-bind:class="{' show - left: true}"
  v-on:click="getListData"
  Copy the code

• The V-for loop must have a key attribute, which must be unique throughout the for loop

  <! Recommend -- -- -- >
  <ul>
    <li v-for="todo in todos" :key="todo.id">
      {{ todo.text }}
    </li>
  </ul>
  
  <! -- Not recommended -->
  <ul>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ul>
  Copy the code

• Avoid v-if and V-for on the same element (performance issues)

Props specification

• Atomic component props
• Provide default values
• Verify the type using the type attribute
• Check that the prop exists before using props

// Bad this is only acceptable when developing a prototype system
props: ['status']

// good
props: {
  status: {
    type: String.required: true.validator: function (value) {
      return [
        'syncing'.'synced'.'version-conflict'.'error'].indexOf(value) ! = =- 1}}}Copy the code

other

• To avoid this. $parent

• Debug information Console. log() Is deleted after the debugger is used

• Except for ternary operations, if,else, etc

  // bad
  if (true) alert(name);
  console.log(name);
  
  // good
  if (true) {
    alert(name);
  }
  console.log(name);
  Copy the code

• The location of a global variable

  In the absence of special circumstances, variables are placed within data to avoid code execution when components are reused

  / / recommend
  export default {
    data() {
      return {
        today: new Date(a)}; }};Copy the code

  / / do not recommend
  const today = new Date(a);export default {
    data() {
      return {
        t: today }; }};Copy the code

openESLint

• There are three widely used Google standard, Airbnb standard and Standard standard

• The installation

  Initialize ESLint configuration via vue-CLI Q&A when initializing files with Vue scaffolding (recommended)

• Auto repair

  Simple code styles esLint can be fixed directly. For example, if we want ESLint to fix JS files in the SRC folder, add a custom command to package.json

  Install the ESLint module
  $ npm install eslint --save-dev
  Copy the code

  # add esLint repair command
  "lint-fix": "eslint --fix --ext .js src/"
  Copy the code

  NPM run lint-fix will be automatically fixed. Those that cannot be fixed will be prompted on the console.

• Git checking their

  In principle, we need to execute lint-fix before git commit, so as to avoid forgetting or being lazy, we use the pre-check tool to handle it.

  Husky is an NPM module that can intercept git before committing. If the intercept returns an exception, the commit will be cancelled.

  Install the husky

  $ npm install husky --save-dev
  Copy the code

  Add interception event Precommit

  # package.json
  "precommit": "npm run lint-fix"
  Copy the code

  The esLint fix command is automatically executed before committing, and if all fixes are successful the commit will work, if not, the commit will be cancelled.

useBabel

We often write ES6 code in our javascript code that is unrecognized on older browsers and needs to be converted to ES5.

• Create the.babelrc file in the project root directory

  /* root directory. Babelrc file */
  {
    // This specifies transcoding rules
    "presets": [
      // env is preset to use babel-preset-env, and Babel is preset to generalize es6, ES7, ES8, and amd, CommonJS modularized files
      ["env", {
        "modules": false."targets": {
          "browsers": ["1%" >."last 2 versions"."not ie <= 8"]}}],// The following is the es syntax for different stages, including different transcoding plug-ins
      "stage-2"].Transform-runtime is used to handle global functions and optimize Babel compilation
    "plugins": ["transform-vue-jsx"."transform-runtime"].// Keep comments in the generated file
    "comments": true.// This is the transcoding rule that is executed in the specified environment, and is overridden when the environment variable is test below
    "env": {
      "test": {
        "presets": ["env"."stage-2"]."plugins": ["transform-vue-jsx"."istanbul"]}}}Copy the code

• ES6 compatible with Babel-Polyfill

  1, install,

  $ npm install babel-polyfill --save-dev
  Copy the code

  2. Find the webpack.base.conf.js file (basic configuration, global effect) and modify the file as follows

  module.exports = {
      entry: {
          app: ['babel-polyfill'.'./src/main.js'],},Copy the code

Other related articles

The use of Vuex