Shulou(Shulou.com)06/02 Report--

This article mainly introduces "the method course of Vue.js project practice". In the daily operation, I believe that many people have doubts about the method course of Vue.js project practice. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "method tutorial of Vue.js Project practice". Next, please follow the editor to study!

1. Use Vue Slots to make the code easy to understand

Parent-child relationships are one of the most common ways to connect components to each other, but sometimes this may not be the best choice. Imagine that if there were large quantum components in a single parent component, you might have to use a large number of props and emit events to deal with these sub-components, and soon everything would be a mess.

This is the real situation you will face in a large project, but Vue.js can provide an on-site solution to this problem.

We can use slots in Vue.js to provide another way to represent a parent-child relationship, and slots provides a channel to place content in a new location. An example of the basic operation of slots is as follows:

When the tag rendered by the above component will be replaced by demo-content:

Hi!

You can use many different types of slots in Vue projects. But the most important point is that when slots increases, the project will be greatly affected, and slots can keep the code in the entire project intact and easy to understand.

two。 Establish and share independent components

AddyOsmani: "the secret to effectively building 'big' things is usually to avoid the idea of building large things directly from the beginning. Instead, you can use smaller, more focused works to form large things. This makes it easier to see how small things make up big things."

You can follow F.I.R.S.T principles and build your components as focused, independent, reusable, and small and testable.

You can also use tools such as Bit (Github) to independently source control the components of each project and share them with the component center of Bit. Shared components, automatically generated documents, and real-time examples are displayed together on the component center of Bit. You can install it with NPM or "clone" and modify it using Bit, which makes it easier to find, use, and maintain components (and, therefore, projects).

3. Well-maintained VUEX warehouse

Vuex is the state management mode in Vue.js, which is responsible for the centralized storage of all components in the application. I saw some comments that said, "Vuex restricts developers from building projects as needed." But the truth is that Vuex can help developers organize their projects in a more organized way by using a set of principles.

Before you understand these principles, you should first understand the following four main components in the Vuex repository:

States: used to save application data

Getters: used to access state objects outside the warehouse

Mutations: used to modify state object

Actions: used to process mutations

So let's take a look at the principles to follow:

You need to centralize application-level state in the repository.

States should always make changes by dealing with mutations.

Asynchronous logic should be encapsulated and can only be used with actions.

By following these three principles, the project can be organized smoothly, and if you feel that the storage files are getting bigger and bigger, you can split them into separate files. The sample project structure is as follows:

├── index.html ├── main.js ├── api ├── components └── store ├── index.js ├── actions.js ├── mutations.js └── modules

Modular VUEX warehouse

This article discusses large projects in which project files can be very large and complex. You need to manage the warehouse in your own way, and you need to avoid store repositories, so it's best to modularize Vuex repositories in a way that is easy for others to understand.

We do not define the definition of the modules in the project here, some developers will modularize according to the function, others will modularize according to the data model. The final decision on modularity is entirely up to you, which will be of long-term help to individuals and teams.

Store/ ├── index.js └── modules/ ├── module1.store.js ├── module2.store.js ├── module3.store.js ├── module4.store.js └── module5.store.js

Use assistants to simplify code

The previous article mentioned four components used in the Vuex repository. Suppose that if you need to access these states, getters, or call actions or mutations in a component, you can easily use helper methods (mapState, mapGetters, mapMutations, and mapActions) to reduce code without creating multiple calculation properties or methods.

Take a look at these four assistive tools:

(1) mapState

If you need to call multiple stored state properties or getters in a component, you can use mapState to help generate a getter function, which greatly reduces the number of lines of code.

Import {mapState} from 'vuex'export default {computed: mapState ({count: state = > state.count, countAlias:' count', countPlusLocalState (state) {return state.count + this.localCount}})}

(2) mapGetters

MapGetters helps map the repository getters to local compute attributes.

Import {mapGetters} from 'vuex'export default {computed: {... mapGetters ([' count1', 'getter1',])}}

(3) mapMutations

MapMutations can be used to help submit mutations in a component, which maps component methods to store.commit calls. Similarly, you can use mapMutations to pass the payload.

Import {mapMutations} from 'vuex'export default {methods: {... mapMutations ({cal:' calculate' / / map`this.cal () `to `this.$store.commit ('calculate') `})}}

(4) mapActions

Can be used to help dispatch operations in a component and map component methods to store.dispatch calls.

Import {mapActions} from 'vuex'export default {methods: {... mapActions ({cal:' calculate' / / map`this.cal () `to `this.$store.dispatch ('calculate') `})}}

4. Don't forget to write unit tests

Testing is important in any project. As developers, we must test the content of development regardless of the importance or size of the project. Especially in large projects, there are often thousands of small functions, so we have a responsibility to test each function.

This is the necessity of unit testing, which allows developers to test a single unit of code. Unit testing not only avoids errors, but also increases the confidence of the development team in their work whenever the developer makes changes. As the project progresses, developers can follow a good unit testing mechanism from the beginning of the project to add new features without having to worry about breaking other features.

Unit testing in Vue.js is more or less the same as that of all other frameworks, and you can easily use Jest,Karma or Mocha with Vue.js. Although there is a testing framework, there are some general things to keep in mind when writing unit tests:

Write unit tests to cover each Vue component.

The test must provide a clear failure error message ID.

Use a good library of assertions. For example, there is an assertion library built into the Jest framework, and the Chai assertion library is used with Mocha. Image source: unsplash

By following these steps from the beginning of the project, developers can greatly reduce the time spent debugging and manual testing as the project structure evolves.

With the exception of unit testing, Vue.js supports E2E testing and integration testing like any other framework. Therefore, you can also integrate these into the project. Typically, the routing part is not tested with unit tests and is covered by end-to-end tests. The Vue repository is the hardest part to test, and individual testing of states,actions or getters is often considered useless, and my recommended approach is integration testing.

Looking at this excellent technical capability, I think Vue.js can be used for large-scale projects. It can easily manage these projects without causing confusion.

At this point, the study of "the method course of Vue.js Project practice" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.