Codewords are not easy, and helpful students hope to pay attention to my WeChat official account: Code Program Life, thanks!
In the last article, we have briefly understood the shortcomings of traditional creation components and the benefits of using single-file components , and carried out rapid prototyping .
Today we will try to create a complete project using VueCli3 .
First, we open the terminal and run the following command in the appropriate directory: (provided that you have completed the basic configuration of Vue-Cli3 in the previous article)
vue create hellovuecli3
This hellovuecli3 is the file name . You can make your own file name, but be careful not to have capital letters. Capital letters are not supported here .
If you write capital letters , the error message Warning: name can no longer contain capital letters will appear .
When you input the file name correctly, the following screen will appear on the terminal.
Here is let us choose a preset . When we use VueCli to initialize the project , we can choose whether to save this configuration for direct use next time.
Of course, if we are using it for the first time, press the down arrow key of the small keyboard to move to Manually select features and press Enter to select. This means to manually select the plug-in I need .
The screen after the selection is:
This is for us to choose the plug-ins we need . We can see the plug-ins that we will use frequently in the future , such as vuex, Router, Babel, TypeScript .
When we create a project for the first time, don't choose too many plugins, you can go directly to the next link.
Here is to select the plug-in with a space and Enter to enter the next link.
Because I checked Choose vue version in the last link , so here it will let us choose the vue version. Because what we learned before is all about vue2.x , so we select 2.x and press Enter to enter the next link.
This link is for us to choose where to put the configuration information , whether it is in a dedicated configuration file or package.json .
Our regular choice will put the configuration information into package.json in, so check package.json press Enter to enter the next link.
Here is the link to save project presets mentioned earlier . We can save the selected plug-in and other information this time and select it directly next time. There is no need to select multiple links like this.
Enter y to save and n to not save.
This is the last link. After pressing Enter , VueCli will start to initialize the basic directory information of the project for us.
The creation speed of the project here depends on the internet speed, which may be slow, so please wait patiently.
After the creation is complete, the terminal information is like this:
pay attention to the blue content.
Follow the blue instructions, first cd to the directory we created with VueCli.
cd hellovuecli3And then npm run serveexecute the program.
This npm run serve is the command to execute our entire vue project.
Then this content will pop up:
we click on the blue hyperlink in Local , and the page content we initialized will appear like this. At this point, it means that you have successfully built a project using VueCli3 .
Then we can look at the directory structure of the project we just created.
Click on the components folder under src , there is a HelloWorld.vue file in it, this is where we write single file components .
You can click in and take a look at the structure of its components , which is basically the same as the structure we wrote before. But with more style tags , this is the benefit of single-file components , you can use CSS . The HTML content is written in the template tag . The content of JS is written in the script tag , and export defaultan instance object is thrown in the form of .
Then src next there is a App.vue file, this is our biggest one global components , our final show is this component on the page.
So we wrote all the components should be in this App.vue , the statement, calling , will be displayed.
There is also a very important main.js file in the src directory . This file is the entry file of the project. All pages in the project will load main.js , so main.js mainly has the following functions:
- Instantiate Vue
- Place plugins and CSS styles that are often used in the project. For example: network request plugin: axios and vue-resource, image lazy loading plugin: vue-lazyload
- Store global variables
We main.js can also be seen in its new Vue in binding our App.vue of the above mentioned id , so this is why we are showing the last page App.vue content of.
In addition to src , package-lock.json and package.json are both project configuration files . For a beginner , we basically won't change the content inside, and don't change it casually, which may cause problems.
The above is a simple explanation of using VueCli to create a project and project directory structure .
All the content mentioned before is to pave the way for the present. What I wrote before can only be said to be a small page, not a project.
When you use VueCli to create a project, all the basic knowledge you learned before is equally useful. Those instructions, APIs, plug-ins , how to use them before, how to use them now, and how to use them are basically the same.
I may update Vue things slightly in the future. I will not update it so frequently. Now that the basic content has all been updated, there may be some core plugins and UI libraries left in the future .
Mainly, I plan to update a teaching video of developing campus applets from scratch at a certain station . The source code is synchronized with the WeChat official account. If you are interested, please pay attention to the following official account first. This teaching project is already online. WeChat directly search for the applet: You can experience the campus waterfront first . It is a campus platform that integrates second-hand market, part-time release, lost and found, and express delivery .
There is a WeChat mini program course design, complete design needs, contact personal QQ: 505417246
Pay attention to the following WeChat public account, you can receive WeChat applet, Vue, TypeScript, front-end, uni-app, full stack, Nodejs, Python and other practical learning materials. The
latest and most complete front-end knowledge summary and project source code will be released to the WeChat public as soon as possible No., please pay attention, thank you!
