“This is the 20th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”
preface
Last article I made a simple several background management data interface, next I will try to get started to do a simple and popular vUe-based background management framework, the name of the top vue-element-admin in order to understand the principle, I started with the most basic basic template,vue-element-admin provides a more complete integration solution that provides more functionality that I don’t need.
The installation program
Follow the instructions on the official website to execute commands one at a time to pull code, install dependencies, and launch the framework
git clone https://github.com/PanJiaChen/vue-admin-template.git
cd vue-admin-template
npm install
npm run dev
Copy the codeI changed the name of the project file to my-vue-admin
Project directory
build
Static folder where the project is finally packaged for final deployment
mock
Where some fake data is stored, simulated login is successful, and you can see the administrator name and avatar after the login is successful
public
The root folder of the project, where ico and index.html are stored
src
api
Define routing methods where all back-end interfaces are placed and imported as needed
assets
Static file folder, store some small pictures, font files and so on
components
Component, the folder where common components are stored, is very common
icon
Scalable Vector Graphics, or Scalable Vector Graphics, is simpler and takes less space.
layout
Where popover generic components are stored, there are usually small components written
route
Page routing. Vue-element-admin is a single page, and routing can be used to switch component displays
store
Global dynamic routing management, which can dynamically query menus and generate routing information through background interfaces
styles
This is the CSS preprocessor, fully compatible with CSS, opened my eyes, with it CSS can be nested, inherit, introduce, mix, also can have variables, but also can calculate, add, subtract, multiply, divide and so on, here to make understanding.
util
Global public method folder, used to define some public methods, code reuse, simplify the code.
vue
Where most of the code is written, the routing page is usually here.
App.vue, Permission. js, settings.js
Entry file for app. vue framework running, permission.js permission management file, permission determination for each route entry, settings.js project configuration file
tests
It is generally not used in configuration documents related to automated tests
.editorconfig
Editor Settings file
.env
Project environment variables file
.eslintignore
Code formatting ignores Settings. Eslint is a common jSvAScript code formatting tool
.gitignore
Git commits ignore Settings files
.travis.yml
Keep building the script file. Similar to Gitlab CI scripts, generally not used
babel.config.js
Compiler Settings file, generally not used
jest.config.js
Test framework Settings file, generally not used
jsconfig.json
Indicates that this directory is the root of the JavaScript project for Vscode to read
LICENSE
Project authorization statement. The open source protocol used to indicate this project is too obscure for big projects to pay attention to
package-lock.json package.json
Project dependencies record files
postcss.config.js
Is a use of JS plug-in to convert CSS tool Settings file, default is not set
README.md README-zh.md
Project description, written by yourself or with your own project description
vue.config.js
Optional configuration file that has some specific Settings for the project to use.
conclusion
Vue-admin-template is just a basic template, but it has a lot of files.