Project Structure

The project structure was originally generated by Vue cli. Also, some structure and code changes, which would optimize the project and diversify our functionality, were made during the development process.

---

Sketch

Let's take a quick glance at the directory before anything gets too complicated.

├── build/                    <- build scripts of Webpack, generated by vue-cli
├── client/                   <- front-end source files
├── config/                   <- project configurations, mainly for Webpack, generated by vue-cli
├── doc/                      <- offline documents related with the project
├── screenshots/              <- preview images of vue admin
├── .babelrc                  <- configuration file of babel, generated by vue-cli
├── electron.js               <- entry file for running vue admin with electron
├── index.html                <- main entry of the project, generated by vue-cli
├── package.json              <- project dependencies for npm
├── yarn.lock                 <- project dependencies for yarn
├── other files               <- most of them are generated by vue-cli and you rarely need to touch.

---

Application Bunlder

The default template of Vue cli is using Webpack as the module bundler for application. Script files for packaging are stored in build directory and configuration files are stored in config directory as shown below:

├── build/
│  ├── build.js
│  ├── dev-client.js
│  ├── dev-server.js
│  ├── utils.js
│  ├── webpack.base.config.js
│  ├── webpack.dev.config.js
│  ├── webpack.prod.config.js
├── config/
│  ├── dev.env.js
│  ├── index.js
│  ├── prod.env.js
│  ├── test.env.js

Once command like npm run dev is executed, script files in these two directory will be called primarily. You can check this relationship in sction scripts of package.json file.

---

Source Code

As we mentioned, front-end source files, including images, vue nnd js files, are located in client directory.