reference

I used the framework downloaded from the Internet when I was writing the project, but now I have studied it in my spare time. I have removed the redundant things in the project and rebuilt it according to my own ideas. Some methods are still the same as those in the previous framework. For reference only, you can also write your own.

The tools required

  • Package management tool: NPM, based on Node.js
  • Module packaging tool: Webpack

The framework

  • MVVM framework: vue.js
  • Project scaffolding: VUE-CLI
  • UI component library: Element UI
  • Route configuration: VUe-router
  • Front-end request interface: AXIOS
  • Status management tool: Vuex
  • Scripting language: ES6 syntax
  • CSS preprocessor: SCSS style preprocessor

Set up the project

  1. Build the project using Vue CLI 3.0 (note: Installation steps are in the first article)

    cd… (File name) enter the project

  2. Install the Element Ui library.

Classification of project directories and folders

Although the classification of folders seems to be a small problem, but because of the general writing project files will be a lot of and the project system is huge, so it is necessary to sort out the project directory structure and file classification, so as to find relevant components in the future clear.

Never mind why I’m describing it backwards…

  • The view folder is where the vUE components are used. Here I usually put the login/404/home page in the common public folder /modules and put the page components
  • The until folder contains some public methods/wrapped functions used by the project (such as session/cookie access/permission judgment, etc.)
  • Store state manager modules store modules with the same project name/key (you don’t need to create modules folders in the Store folder, depending on your personal preference)
  • The router routing
  • Components will put some imported components (echats, etc.)
  • Assets (SCSS /font/image Resource folder)

Function implementation

  • Page jump

Give a login button meaning @_@ in the login component

  • Next, configure the nested structure of the routing implementation components

Continuously updated…