Solemn statement!
Important things have to be said three times. This article is for sharing only. The article and code are open source. It is strictly prohibited to make profits from this. It is strictly prohibited to infringe on any rights of Shang Silicon Valley's original video. I know that people who learn programming have various thoughts. , but this is not the reason for your infringement on the open source community!
Important things have to be said three times. This article is for sharing only. The article and code are open source. It is strictly prohibited to make profits from this. It is strictly prohibited to infringe on any rights of Shang Silicon Valley's original video. I know that people who learn programming have various thoughts. , but this is not the reason for your infringement on the open source community!
Important things have to be said three times. This article is for sharing only. The article and code are open source. It is strictly prohibited to make profits from this. It is strictly prohibited to infringe on any rights of Shang Silicon Valley's original video. I know that people who learn programming have various thoughts. , but this is not the reason for your infringement on the open source community!
I finally learned about Silicon Valley takeaways. The videos on Silicon Valley are all very good. Considering that prostitutes often encounter some problems, I followed the video to build it from scratch using the latest Vue3, Vite and yarn. project, so that you can also deepen your understanding of vue3.
I haven’t used ts because I haven’t felt what’s so good about ts yet. I’ll talk about it if necessary in the future. Once the technology selection for a project is finalized, I can just be responsible for the implementation. I’ll talk about it when I encounter problems. I directly rewrote this project using Vue3's combined API. Although Vue2's dynamic data can also be used in Vue3, professional programmers have to pursue it a little bit.
Episode 2: The concept of routing is also very important. The concepts of primary routing and secondary routing are also quite important.
Episode 3: Unzip the project folder directly (follow Shang Silicon Valley WeChat public account to download the network disk), and then open the folder in vscode (if you don’t know this step... Well... the basics may need to be strengthened) ..Don’t be eager for quick success in everything. You can also leave a message in the comment area, I will reply when I have time.), for the basic construction process, see https://blog.csdn.net/returnadsss/article/details/128070638?spm=1001.2014.3001.5501 , I won’t go into details. After installing yarn globally with -g, you don’t need to install it again anywhere. Just yarn init –y.
When encountering this problem, after checking and finding that the folder name is Chinese, an error will be reported after running yarn init -y. It is not a systemic error. Just change the name in package.json. The yarn create vite command is not used here, because don’t use the create-vite scaffolding when you first start learning, otherwise many of the presets will not be used, and the official website has also been released. It is recommended to use vite instead of the scaffolding create-vite in the future, so we will yarn add vite –d, for knowledge about vite, you can watch Fu Jinquan’s vite video. There is a packaging requirement here that can be implemented directly with Vite. The development environment port is 8080 and the production environment port is 5000. The server command is to open the backend directly. Here we use vite to achieve the same effect. According to Fujinquan Video, we can make the following configuration file:
As for the actual configuration, I don't care about it for now because I don't understand its requirements yet.
Tips: Iconfront is a website where you can get a lot of vector icons.
Episode 5: The project source code is used here. For the convenience of the teacher, we can use the finished product directly. We can create it one by one. The assets and commons are named the same. The directory only needs to be convenient for review. We will follow the creation first, and we will adjust it later when we encounter something that does not conform to the latest writing method.
Episode 6: We use stylus here, we use the latest less, but before that, we get to know stylus, which is similar to less, except that {} and; are omitted. It can be rewritten as less according to its stylus syntax, because the amount is not large. However, there is very little information about the construction tool Vite or even webpack on the Internet. The basic tutorial is copy and paste repeatedly. Let’s think about it based on the actual development scenario. After experiments, we can write less directly in Vue, and any mixed syntax can be used. in use.
Since the direct reference to less is no longer a problem, the packaging of vue only requires the npx vite build command. After knowing that it can be packaged accurately, we only need to complete the project, and there is no need to worry about packaging for the time being.
Episode 6: Because we have confirmed that the vue project supports less, we only need to rewrite stylus into less. They are both precompilers and the syntax is almost the same.
This mixins.less is probably like this
Episode 7: This idea of splitting is actually very good and you can learn from it.
It goes without saying that Main.js and app.vue are basic. You can refer to the basics and others. If an error occurs, follow the prompts yarn add vue and yarn add @vitejs/plugin-vue, and there will be no problems.
Main.js in Vue3 is written like this:
In vite.base.config.js like this:
Episode 8: The routing for this episode can be written like this in vue3.
I haven't thought of the benefits of using setup here. Let's use the old writing method first. It is worth noting that the template in vue3 no longer requires only one root tag. Just write the rest as you write.
Episode 9: In this episode, the teacher used the web page template that he wrote before. When we have time in the future, we can write it in native language to deepen our memory. For the rest, just follow the teacher's instructions. This method of writing has not been updated.
Episode 10: Uh-huh. . . This episode. . It took less than half a day to change it, which was a waste of time, but it was fine after the change. One thing you need to pay attention to here is to introduce iconfont. This is a library that uses vectors to draw pictures, which can reduce the size of pictures. The specific introduction method is also available online. Here is a rough diagram, mainly the icon-person and icon-person in the profile component. icon-mobile, just find a similar one and import it. Here I also use the same link as the teacher to introduce it. In actual development, it can be downloaded to reduce the amount of data requested.
