![]() ![]() This future dependency is highlighted with a red dashed arrow. However, if it were, Views would depend on it. This arrangement is well-known in Single Page Applications (SPA), though it is falling out of favor. Because of the functional requirement imposed upon code in Components, the Components Package has no dependencies. Views is free to interact with the Router through or router.push(). The Router Package contains the Route mappings of paths to imported SFCs. Views and Components are volatile Packages that change with each feature or bug. Note that the Default Package does not directly depend on Views and Components. Code within Default will instantiate Vuex and the Router. The Default Package depends on Router and Store. Bi-directional dependencies - the contents of one Package depending on another one and vice-versa - are to be avoided as are cycles. Excessive coupling means that a change in one area can affect another area. Packages usually need other Packages to function properly, but too many dependencies indicate too much coupling. The most important part of the Package Diagram is the dependencies. SFCs that are entirely functional (no Vuex for example)Īpp-wide Vuex state and related functions Single File Components (SFCs) and JavaScript to initialize the app This table describes the contents of each package in the generated project. The physical implementation of the Package grouping is a directory, though that is not required. In this case, Vue SFCs and other JavaScript files make up the artifacts. Here is the mapping of directories to Packages.Įxpanded CLI Project Package DependenciesĪs stated in the earlier article, Packages group artifacts. Those files that exist in the top-level src/ directory are given a package "Default". In this UML Package Diagram, a Package is represented as a directory. There is one file in the store/ directory. There is one file in the router/ directory. There are two file in the views/ directory. There is a single file in the components/ directory. Within src/, there are the following files With in the src/ directory, there are the following directories. The analysis of the architecture begins with looking at the static, structural elements that are realized in the code. The command generates code, configuration, and build files. Select "N" when asked to save for future projects.Select "ESLint with error prevention only".When prompted, select "Manually select features".Provide the following responses to the CLI screens. This is created using the following command. The architecture to be analyzed is that created by a manually-configured Vue 2 CLI project. This is a follow-up article to "Default Vue CLI Architecture" which shows the (simpler) architecture generated by accepting the default Vue 2 project. Several UML diagrams will be presented to show the architecture. This invocation of CLI includes the Router and Vuex. This article presents the software architecture of a project generated by an expanded Vue 2 template of the CLI tool. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |