Shulou(Shulou.com)05/31 Report--

Today Xiaobian to share with you what the role of the Vue project src directory is the relevant knowledge, detailed content, clear logic, I believe that most people are too aware of this knowledge, so share this article for your reference, I hope you will learn something after reading this article, let's take a look at it.

Vue CLI

Knowing a project starts with knowing the catalogue! The Vue project cannot escape the recognition of the most common Vue CLI directory structure.

As follows (all options are shown):

-public-img-icons-favicon.ico-index.html-robots.txt-- src-assets-logo.png-components-HelloWorld.vue-router-index.ts-store-index.ts-views- -About.vue-Home.vue-App.vue-main.ts-registerServiceWorkers.ts-shims-vue.d.ts-- tests-e2e-unit-- .browserslistrc-- .eslintrc.js-- .gitignore-- babel.config.js-- cypress.json-- jest.config.js-- package.json-- package-lock.json-- README.md-- tsconfig.json

The Vue CLI directory is a very standard Vue project structure, but it is not suitable for medium or large applications.

The reason is: we should pay more attention to the src folder! Look down in detail.

New src directory

There is less gossip, and the modified directory structure:

Src-assets-common-layouts-middlewares-modules-plugins-router-services-static-store-views

Let's find out why we want to set up such a directory structure one by one!

Assets

Static file directory: contains fonts, icons, pictures, styles and other static resources, do not repeat.

Common

Public folder: in general, it can be split into multiple subdirectories: components, mixins, directives, or a single file: functions.ts, helpers.ts, constants.ts, config.ts, or others. But they have something in common: the files in the Common folder are more frequently referenced.

For example: under the src/common/components folder, you can set the components that Button.vue shares globally; write public methods in the helpers.ts file for multiple calls.

Layouts

You can distribute the layout files for the entire application in the Layouts folder.

Middlewares

The "middleware" folder is a bit like vue router, where you can place your route jump judgment file under it. Here's a simple example:

Export default function checkAuth (next, isAuthenticated) {if (isAuthenticated) {next ('/')} else {next ('/ login');}}

Used in vue-router like this

Import Router from 'vue-router' import checkAuth from'.. / middlewares/checkAuth.js' const isAuthenticated = true const router = new Router ({routes: [], mode: 'history'}) router.beforeEach ((to, from, next) = > {checkAuth (next, isAuthenticated)}); Modules

Modules folder is the core of our application!

This folder is about the business logic section of the application, which has the following classes:

Business component components

Test Unit * * tests**

Data persistent store

Other documents related to this business

Here's a great example: the order business module.

Src-modules-orders-_ tests__-components-OrdersList.vue-OrderDetails.vue-store-actions.ts-getters.ts-mutations.ts-state.ts-helpers.ts-types.ts

Including: test files, components (order list, order details), Vuex data, related documents.

It is also like a small src directory ~

Plugins

The Plugins folder is for plugin, of course. In Vue2, we call

Import MyPlugin from'. / myPlugin.ts' Vue.use (MyPlugin, {someOption: true}) Services

The Services folder is the place to put the request library and API, as well as the management of localStorage.

Static

Generally speaking, we don't need the Static folder, but we can also put some dummy data (virtual data).

Router

The Router folder contains your routing files, which are too common to go into detail. You can also set router.ts only in the root directory as needed.

Store

The Store folder places your Vuex-related files. In this directory are mainly some global persistent data and methods: state, actions, mutations, getters, but also associated with the Vuex under the modules folder.

Views

The Views folder is the second most important folder in our application. We all know that it also contains business components. But in fact, it should be a mapping of routes, such as / home / about / orders. There should be Home.vue, About.vue and Orders.vue files under the Views folder!

You must ask why the business part is split into two directories, Views and Modules, instead of being put together like Vue CLI?

It has the following advantages:

Clearer directory structure

Learn about routing more quickly

A more intuitive view of the root file, the root page, and how they relate to subcomponents and subbusinesses.

These are all the contents of the article "what is the function of the src directory of the Vue project?" Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.