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

Editor to share with you how to build vue3.0 project architecture, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Create a project with vue-cli npm uninstall vue-cli-g uninstall the old version clinpm I @ vue/cli- g install the new version clinpm install-g @ vue/cli-init install cli vue- V check the version number of cli, pay attention to the case vue create vue-cli to create the vue3.0 project, remember to select vue3

Just follow the steps above. My vue-cli version number is 4.5.11. Note here that when creating a project, you need to manually select whether to create a 2.0 or 3.0 project, the default is 2.0, and the scaffolding is backward compatible.

Second, install routing npm install vue-router@4, install routing, version 4.0

My routing version is 4.0.12

Third, improve the directory structure and create a configuration file vue.config.js

Directory and vue.config.js are posted, specifically or go to GitHub to see the source code directly, here does not take up much space. Here app.less sets the color variable, unifies the color of the whole system, and later if you do the theme, it is also easy to maintain. Among them, antd and vuex will be discussed later.

Install ant-design-vue, install less, install dayjsnpm I-- save ant-design-vue@next install antd3.x version 3.0 is still in the stage of continuous update npm install babel-plugin-import-- save-dev introduces babel, configure babel.config file, load npm install on demand for antd components-- save @ ant-design/icons-vue if necessary Introduce iconnpm install less--save of antd into lessnpm I less-loader@4.1.0 pay attention to version number npm I style-resources-loader vue-cli-plugin-style-resources-loader-D install plug-in, vue.config.js file, add global configuration of less file, mainly configure global variable npm install dayjs-- save and globally configure dayjs. If an error is reported, reinstall ant-design-vue,dayjs is lighter than moment.

I used ant-design-vue in the UI framework, which everyone feels free to do according to their own needs and preferences. But I would like to remind you that the current version 2.0 of antd supports vue3, and it is stable, and it is now being upgraded to version 3.0. The project is all written in 3.0, and the stability needs to be studied. And because antd needs dayjs, dayjs is also used here, which is more or less the same, but it is very small. Antd demand loading is used in the project, it is better not to introduce the components that are not used, and the necessary ones can be introduced in the antdUse.js file. The method of demand loading is detailed in the official documentation, and the babel.config.js needs to be modified. The icon of antd3 has been introduced in the form of components, which is a bit tedious to use and requires attention.

When installing the babel of less, pay attention to the version number, the higher version will report an error. I have defined the global less variable here, unifying the font size at all levels of the project, various colors, and so on.

Install vuex, axiosnpm install vuex@next-- save install vuex, and configure npm install axios to install axios, and do unified configuration

Axios hasn't changed much. Vuex recommends that you take a closer look at the official 3. 0 to 4. 0 migration documents. Here I briefly list a few important ones. In the new version, create an instance with createStore; get the current vuex instance through useStore. Specific writing method to look at the code.

VI. Some new grammars of vue3

Vue3 refers to the implementation of react hooks, so the writing method is very similar to the programming idea. Here, it is very recommended to take a look at this article by you Yuxi boss. I click here that he has explained in detail the causes and consequences of his upgrade. After reading it, he will have a clearer understanding of this upgrade. The main purpose of this update is to extract and reuse the common logic of components and make great changes to the logical organization of a single component. Of course, the fundamental driving force is the support for typescript. Ts is the trend of the times. Personally, this change is very big, which makes vue3 very difficult for beginners to get started. The requirements for programmers have also been raised a lot. It is easy to have a pot of code and logic confusion. Uh... Then there are .value and props. The way of writing is too verbose, am I a little too demanding, manual dog head, .

However, after using too much, you will make it easy to use and convenient. Vue3.0 data flows clearly and retains the old advantages of data responsiveness. It's very comfortable. Bloggers started using react, but when they first switched to vue, they were not used to it. There are reasons for writing it. The biggest reason is that the data is not clear, and all the data is bound to this, which makes it much less readable.

. . . Let's get back to the point. According to my understanding, what are the changes in vue3 and how to use it?

First of all, vue3 supported typescript, applauding and throwing flowers. It is recommended to learn, of course, whether you use it or not, there is no impact. It can only be said that ts, as a superset of js, completely cut off js's bohemian love and freedom, and became decent. It also makes the code more standardized and more controllable. But what is very interesting is that vue3 has completely cut off the rules and regulations of vue2 and completely released its freedom. Variables and methods are defined directly in setup, and the logic is written in it, so it is no longer necessary to declare listening properties and methods in the prescribed places as before. This project is written in js, my ts level is also general, and then I am afraid that we are not used to it, after all, the popularity of ts at this stage is still a little low.

The following will list some changes, with source code, comments, directly pull the project to run for a while, here is just a brief mention of some key changes.

Main.js file. The vue instance is created by createApp method, and the app.config.globalProperties. Add global properties to the instance prototype. Multiple instances can be created without fear of pollution.

Report.js file. Through the defineComponent declaration component, with setup this combination function to complete the development of component logic, specific writing look at the source code report.js this file.

The combined function setup (props, context) directly replaces the whole set of writing methods such as vue2.0 computed watch life cycle methods. All the logic is implemented in this function. Therefore, it is recommended to unify the writing method, although the previous writing method is also supported, personal advice is either the previous set, or not at all. Don't have setup and methods happening at the same time.

Setup beforeCreate and created are no longer needed, and the trigger time for setup is actually before beforeCreate. It only runs once when the instance is initialized and will never be executed again, and setup is synchronized.

Two parameters, props is the data passed by the parent component, which is updated in real time. Can not be deconstructed, will lose the monitor. You can use torefs to convert props into listening data within the component. But personally, I don't think this is a good way. I still like props. So that the code is clear at a glance, and it is clear whether the data you are using is transmitted by props or declared by the current component. The data flow is clear; context is an object that can be deconstructed and used, including attributes such as emit, there is nothing to say, just look at the document.

Setupthis is useless, because there is no return yet, so each dependent package has made corresponding updates to support this feature. Router vuex has a special method to obtain the instance through introduction. You can take a look at the code in the following figure.

Computational properties, listening properties, lifecycle. These are injected into the component in the form of methods, the name of the life cycle has changed, the functionality has not changed, and the listening properties have changed. The document is very clear, so I won't repeat it here. Secondly, some new api has been added. Ref reactive declares responsive variables; provide / inject parent-child components are interconnected; watchEffect automatically listens, which is not recommended. It automatically listens for all responsive variables. Any change will trigger a callback, which is similar to update. Of course, it will also lead to the problem of frequent implementation. Some simple pages are available, but in other cases it's best to use watch to manually mark variables that need to be listened to.

These are all the contents of the article "how to build a vue3.0 Project Architecture". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow 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.