preface

I had the opportunity to participate in the development and maintenance of a phase I project of X Bank, and I used VUE to develop app for the first time in a real sense

The main body

Project setup and packaging

The construction of the project is completed, before I went in and I saw the directory structure of the project, using the vue – cli 4 x manner, as is the Intranet development (everybody knows), can not capture the relevant page, some call phone function of original system developed by Native colleagues, such as keyboard component, sharing components, The title component and so on can only be displayed as text.

Some processes used in the project (development tools and frameworks used, UI libraries, etc.)

  1. Vue.js front-end framework :vue.js
  2. Vue. js mobile UI framework: Vant UI
  3. Vue. Js state manager for one of the whole bucket :vuex
  4. Vue-router is a routing manager for vue.js family bucket
  5. Vue.js family bucket one of the development standard tools: VUE-CLI
  6. Javascriptnode.js runs on the server side
  7. NPM Package manager NPM
  8. Yarn package manager yarn< This is recommended >
  9. Front-end development tools ide(vscode and webstorm and HBuilder X)
  10. Git is an open source distributed version control system
  11. Echarts, an open source visual chart library based on JavaScript
  12. JavaScript date-handling library momentjs
  13. Add less to the CSS
  14. Google Browser version 71 of Google

Project directory structure (can only cut my own project, project structure is similar)

  • The Components folder divides components into common components, such as the List component, without complex logic
  • The Directives folder is mainly some global custom directive JS logic files
  • The Style folder mainly contains global style definition files
  • The store folder is the global state
  • In the utils folder are the common utility functions
  • The router folder contains routing management files
  • The API folder contains all the interface management files
  • The Views folder is the page display Vue file

Use git for some common commands

1. The git status [< options >... [-] [< pathspec >... The command is used to display the status of working directories and staging areas. Using this command you can see which changes are temporarily saved, which are not, and which files are not tracked by Git. Git status does not display information that has been committed to the project history. 2. git log [<options>] [<since>..<until>] [[--] <path>...] 3. Git Stash saves the current work progress. The git checkout [-q] [-f] [-m] [<branch>] command is used to switch branches or restore worktree files. 6 <branchName> Switch to an existing branch. Command to add the file to the staging area. 8. Git pull < remote host name > < remote branch name >:< local branch name > used to fetch code from the remote and merge the local version 9 Commit -m [message] adds the contents of the staging area to the local repositoryCopy the code

You can view other Git operation commands

sourceGit git

Brief introduction to module structure of development project

1. The interface display and function realization screenshots of my application (list, details, Add, Revoke, approve) are shown below

Display of the main function list, filtering and so on, the retreat (account) employees, turn name pinyin (side) by a front end implementation point oh, use this library to deal with, fill in the user’s id, choose card, fill out the basic function such as the applicant information, fill in details to show this information, such as card number, the applicant’s level, etc., (Admin account) Can approve or reject

Main function list display, screening, retreat (employee account), name transfer pinyin (realized by the front end), fill in the user’s ID card, select the card type, fill in the applicant information and other basic functions, display the information filled in by the applicant in detail, such as the card number

2. Screenshots of interface display and function realization of performance are as follows:

Display performance list, amount,KPI ranking, date selection, screening, AUM details, customer details and chart display, etc

3.360 Module (Maintenance)

Mainly maintain 360 homepage interface separation, user information query and editing, user id query, AUM product information and details, activity products and corresponding sharing to wechat, moments and APP, custom label addition, deletion, memo list addition, modification, deletion and other corresponding and chart display functions

other

The address of my nuggets

  1. v65535

My Github address

  1. github

My address

  1. yuque

Resource sharing

  1. Vue3 Chinese document
  2. Vue3 English document
  3. Es6 es6 document
  4. The nature of the component | renderer is recommended

The end of the

In this project combining VUE and native, I learned a lot of things. Thanks to this project and colleagues who developed this project together, I learned things I didn't know before, such as the operation of Git, as well as some procedures and directions of APP development