Teach you how to build the vue3.0 project architecture step by step

Preface:

I have open-sourced the vue-cli and vue-cli3 libraries on GitHub. The GitHub repository address will be attached at the end of the article. This time I rewrote 2.0 and optimized it. Then, according to the functions and codes of 2.0 and the syntax of vue3.0, it was completely rewritten. Although the name is cli, both libraries are actually created based on vue-cli. The purpose of doing this is to quickly start the project at work. After all, slicing and packaging, less, axios, vuex, router, UI framework, basic file directory, permissions, these are all basic operations. Of course, different projects still require some adjustments. The master branches of these two projects are the most basic ones, and also contain several custom components. vue-cli3 has cut out a separate app branch, this branch will add some features from time to time, such as hightCharts' Gantt chart, three.js, user-customizable large-screen display and other features. There is nothing now, it depends on the time, it will be updated when there is time. Vue3.0 will be written first, and 2.0 will be discussed later. I also hope that everyone can help me improve this library. After all, it is built to quickly start the project, so the better the better. The app branch also hopes to have some good functional module cases to expand everyone's thinking.

1. Create a project with vue-cli

npm uninstall vue-cli -g Uninstall the old version of cli
npm i @vue/cli -g install the new version of cli
npm install -g @vue/cli-init Install cli  
vue -V Check the version number of cli, pay attention to uppercase and lowercase vue create vue-cli create vue3.0 project, remember to select vue3

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

2. Install Router

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

My router version is 4.0.12

3. Improve the directory structure and create the configuration file vue.config.js

The directory and vue.config.js are posted here. For details, please go to GitHub to view the source code directly. I will not take up much space here. Here, app.less sets the color variables to unify the colors of the entire system, which will facilitate maintenance if you create a theme later. Among them, antd, vuex, etc. will be discussed later.

4. Install ant-design-vue, install less, and install dayjs

npm 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 Import babel, configure babel.config file, and load antd components on demand npm install --save @ant-design/icons-vue If necessary, import antd's icon
npm install less --save Import less
npm i [email protected] Note the version number npm i style-resources-loader vue-cli-plugin-style-resources-loader -D Install the plugin, vue.config.js file, add less file global configuration, mainly configure global variables npm install dayjs --save and configure dayjs globally. If an error occurs, reinstall ant-design-vue. dayjs is lighter than moment.

I used ant-design-vue as the UI framework, and you can choose it according to your needs and preferences. However, I would like to remind you that the current version 2.0 of antd supports vue3 and is stable. We are currently upgrading to version 3.0. The project uses the 3.0 writing method, and its stability remains to be verified. Also, because antd needs dayjs, dayjs is also used here. The usage is similar, but it is very small. The project uses antd's on-demand loading. It is better not to introduce unused components. If necessary, just introduce them in the antdUse.js file. The on-demand loading method is described in detail in the official documentation, and requires modifying babel.config.js. The icon of antd3 is introduced in the form of components, which is a bit cumbersome to use and requires attention.

When installing babel of less, pay attention to the version number. A higher version will result in an error. I have defined a global less variable here to unify the font size, colors, etc. at all levels of the project

5. Install vuex and axios

npm install vuex@next --save Install vuex and configure npm install axios Install axios and make unified configuration

There is no change in axios. Vuex recommends taking a closer look at the official 3.0 to 4.0 migration documentation. Here I will briefly list a few important ones. In the new version, use createStore to create an instance; get the current vuex instance through useStore. See the code for specific writing methods.

6. Some new syntax of vue3

Vue3 refers to the implementation method of react hooks, so the writing style and programming ideas are very similar. It is highly recommended to read this article by Mr. You Yuxi. Click here to jump. He explained the causes and consequences of his upgrade in detail. After reading it, you will have a clearer understanding of this upgrade. This update mainly makes major changes to the extraction and reuse of common component logic and the logical organization of a single component. Of course, the fundamental driving force is still the support for TypeScript. ts is the general trend. From my personal point of view, this change is very big, making Vue3 very difficult for novices to get started. The requirements for programmers have also increased a lot. It is easy to have a mess of code and confusing logic. Uh... Also, the writing of .value and props. is too wordy. Am I being too demanding? I’m so annoyed, haha.

However, after using it more often, you will find it very useful and convenient. The data flow of vue3.0 is very clear and it also retains the old advantage of data responsiveness. It's very comfortable. The blogger used react at first, and was not used to vue at the beginning. There were reasons for the writing style, but the biggest problem was that the data was not clear. All the data was bound to this, which made the readability much lower.

. . . Let's get back to the point and talk about what changes Vue3 has made and how to use it according to my understanding.

First of all, vue3 supports typescript, applause and flowers. . . It is recommended to learn it, but of course it doesn’t matter whether you use it or not. It can only be said that ts, as a superset of js, has completely cut off the unruly and freedom-loving nature of js and made it more conventional. It also makes the code more standardized and more controllable. But what's interesting is that vue3 completely cuts off the rules and regulations of vue2 and completely releases freedom. Variables and methods are directly defined in the setup, and the logic is also written in it. There is no need to declare monitoring properties and declaration methods in the prescribed place as before. This project is written in js, and my ts level is average. I am also afraid that everyone will not be used to it. After all, the popularity of ts is still a bit low at this stage.

Some changes are listed below, with source code and comments. It is better to just pull the project and run it. Here I will just briefly mention some key changes.

main.js file. Create a vue instance through the createApp method and add global properties to the instance prototype through app.config.globalProperties. Multiple instances can be created without fear of pollution.

report.js file. Declare components through defineComponent and use the setup function to develop component logic. For details, see the report.js source file.

The combination function setup(props, context) directly replaces the entire set of writing methods such as vue2.0 computed watch lifecycle methods. All logic is implemented in this function. Therefore, it is recommended to unify the writing style. Although the previous writing style is also supported, my personal suggestion is to either use the previous style or not use it at all. Do not allow setup and methods to appear at the same time.

1. setup beforeCreate and created are no longer needed, and setup is actually triggered before beforeCreate. It only runs once when the instance is initialized and will not be executed again. Setup is synchronous.
2. Two parameters, props is the data passed by the parent component, updated in real time. Cannot be deconstructed, the monitoring will be lost. You can use torefs to convert props into monitoring data inside the component. But I personally feel that this is not a good method. I still prefer to use it in the form of props. This way, the code is clear at a glance, and it is clear whether the data you use is passed by props or declared by the current component. The data flow is very clear; context is an object that can be deconstructed and used, and contains properties such as emit. There is nothing much to say, just read the documentation.
3. setupthis is useless because it has not returned yet, so each dependent package has made corresponding updates to support this feature. Router vuex has a special method to obtain the instance by introducing it. You can take a look at the code in the figure below.
4. Calculated properties, monitored properties, and life cycle. These are all injected into the component in the form of methods. The names of the lifecycles have changed a little, but the functions have not changed. The same is true for the listening properties, but the writing method has changed. The document is very clear, so I won't go into details here. Secondly, some new APIs have been added. ref reactive declares responsive variables; provide / inject parent-child components communicate with each other; watchEffect automatically monitors, which is not recommended. It will automatically monitor all responsive variables, and any changes will trigger a callback, which is somewhat similar to update. Of course, it will also lead to problems with frequent execution. It can be used for some simple pages, but in other cases it is better to use watch to manually mark the variables that need to be monitored.

VII. Conclusion

There are many new properties in Vue3, so please study and read the documentation. However, the community is not yet very complete. I personally feel that by the end of 2022, it should be improved a lot and most dependencies will be supported.

Finally, if you think this project is well written, please give it a star. If there are any problems with the code, I hope you can correct them. If you have any good components or effects, please share them. Just in case the project needs it, I will use it, haha.

vue-cli address

vue-cli3 address

This concludes this article on how to build a Vue 3.0 project architecture. I hope it will be helpful for everyone’s study, and I also hope that everyone will support 123WORDPRESS.COM.