Write write write discover will write a lot of content… It is too much to read in one article, so it is divided into two parts.
The next chapter is finished, interested friends can continue to pay attention to ~ => Use Vue to develop imitation tourism station WebAPP project summary (next)
Warm prompt
This article is only the operation/thought that can be summed up after finishing the project. Friends who contact VUE soon will have a harvest. This project is also the second Vue project made by MOE, using scaffolding tools (VUE-CLI 2.x non 3). If you have time to look at it, if you have any bad writing, please give us more guidance! ~
Results the preview
Only realize the page/logic of the project home page, project details page, city list page components.
Please don’t click on me
Project initialization
Start with scaffolding to generate the project frame.
Since we are doing a mobile web page, we can have some configuration:
Step 1 Configure meta tags
Add a meta tag to index.html:
<meta name="viewport"content="Width = device - width, initial - scale = 1.0, the minimum - scale = 1.0, the maximum - scale = 1.0, user - scalable = no">
Copy the codeAdd the above code to the TAB of the web page to make the width of the web page automatically match the width of the phone screen.
Among them:
Width =device-width: indicates the width of the device screen
Initial-scale =1.0: indicates the initial scaling ratio
Minimum-scale =1.0: Indicates the minimum scale
Maximum-scale =1.0: indicates the maximum scale
User-scalable =no: indicates whether the user can adjust the scaling
The purpose of the parameters I set above is to automatically display the web page to its original scale as soon as it opens, and not allow users to modify or zoom in.
The second step initializes the default style
Some of the default styles are uniform across different mobile browsers. We need to unify the initialization styles of these different phones.
So you can introduce a reset.css
This is initialization code, and some of the initialization configurations can be modified as required.
Want to see it/take code on the lot to me, take: SRC/assets/styles/reset CSS
The third step is to solve the 1-pixel border solution
In mobile page development, there is often a problem with 1-pixel borders.
If we write a border-bottom style on the page, it will cause the screen resolution of these phones to be in the middle of the high resolution, such as 1px border showing 2px border or 3px border showing multiple pixels.
To solve the 1-pixel border problem, we introduced border-.css (which team came up with this solution? I forgot, only know how to use… Thank you all the same. There are other solutions, so search for them yourself.)
More than two hundred line does not stick out, want to see it/take the complete code on the lot to me: the SRC/assets/styles/border. The CSS
Those of you who have looked at the border-.css code will see that this solution is quite simple: assign these class names to the elements based on the desired requirements.
Take it literally.
For example, to give an element a one-pixel bottom border, just add the class name:
To give an element a pixel of top and bottom borders, just add the class name:
You can also change the color of the border. Here is an example of a project that changes the color according to the stylus format (if the examples in this article have CSS codes) :
Corresponding page:
Step 4 Introduce the FastClick library
In mobile development, the click event takes 300ms to execute on some models and on some browsers.
To solve this problem, we introduce a FastClick library
npm install fastclick --save
— Save means that the installed library can be used whether you are testing in the development environment or running code online. Json dependencies property, such as install’s Fastclick:
We then import and use the entry function main.js:
Import fastClick from ‘fastClick’, fastclick. attach(document.body)
Step 5 Configure iconfont
First create a project in alibaba vector icon library
Then select iconFont, add it to your shopping cart, add it to your project, and download it locally.
Here are just a few things to download:
Then put iconfont. CSS in a folder and import it in main.js for global use.
Here’s an example in use:
Note that iconfont is added to the class name, and the code typed here in span is the code for the icon you selected:
Step 6 Customize the directory
In fact, this step should be interspersed with the project process, listed here first.
The configuration is in the build folder webpack.base.conf.js, as shown below, circled in my project.
This allows you to use custom directories when configured. Like the way I configured it above
import src/assets/styles/border.css
I can write
The import styles/border. The CSS.
Home page development want to record down
By the plugin
Installation and use
Vue-awes-swiper is used here.
NPM install vue-awes-swiper –save
Then use:
For example, to use the button area, you need to configure parameters. According to the needs of the individual in the project, their Github documents can be consulted and used on demand.
It is worth mentioning here: suppose there is something under the wheel map
Take this test. As the network speeds slowly load, test might appear at the top and then run back down when the image spreads out.
To prevent this jitter, it is best to do this:
Cast a div with a wrapper class around the swiper and fix the size of the div. For example, in the project, the aspect ratio of the rotation image here is 364:97, which is about 3.75, and the height is 26.6 percent of the width.
So reactive development styles div boxes like this:
There’s a perfectly compatible solution:
Overflow: Hidden Width: 100% height: 0 PADDING-bottom: 26.6%Copy the codeIn this way, the height is 26.6% of the width.
Actually… The vue-Aowsome-swiper component does not have this jitter problem so far.
There is also the issue of changing the default color of the plugin
For example, after the plug-in button area is configured, the default button color is blue dot.
The review element shows that:
Can we add styles to change it as follows?
That’s usually not a good question…
Because of the scoped scope, the properties of this class are set under the original Swiper component, not the swiper component we set here.
It should be set like this:
Swiper-pagination-bullet-active in all the classes in.wrapper.
>>> means through scope, through the scope of other components.
If there is too much text on one line, implement the ellipsis effect
So for example, here’s a P tag.
If there is too much data in the P tag, you want to display a… Ellipsis.
You can use the text-overflow property like this:
To implement ellipsis for overflow, you should define two styles: forcing text to be displayed on one line (white-space:nowrap) and overflow:hidden (overflow:hidden).
Sending ajax Requests
Typically, ajax requests are sent in mounted hooks. To learn more about the life cycle => I wrote an article
Request method, look at yourself, I have written axios and FETCH methods in this project.
configuration
First of all, the project generated with vue scaffolding tool can only be accessed from the static directory.
We will put some local simulation data in the static directory, create a folder to store the data. This project is static/mock/index.json:
This data is local simulation data, we don’t want to push it online at the same time, can be configured in.gitignore like this:
Now everything in this folder will not be uploaded online.
Of course, it will not commit to a local Git repository.
This configuration is not enough. The path of the request currently written in the local root component looks like this, for example in the project:
When we launch this code, the url we request should be preceded by ‘API’, as shown in the red box below: / API /index.json.
Fortunately, the Vue scaffolding has such a forwarding proxy function. With this feature, you can achieve the above ideas.
ProxyTable {} proxyTable{} proxyTable{}
When we request an API, we still map to local port 8080, and when we access any URL that starts with an API, we do a path substitution and the proxy accesses /static/mock.
This functionality is actually provided by webpack-dev-sever.
To modify the configuration file, you need to restart the server. After the restart, you can request data as follows:
This is actually the content of static/mock/index.json.
To optimize the
If possible, it is better to request Ajax data once in the local root component and then pass the received data from the local root component to each local child component, rather than sending an Ajax request once for each local child component.
City list page development would like to record
Box-sizing :border-box
Here’s the CSS written like this
Now enter text characters in the input field that exceed the size of the input field:
These two will stick together and not look so good. If you want to add a padding to the input box, it’s better to leave some padding.
But is it ok to add it directly after input?
Page:
Since the div surrounding the input box does not have width set, width is auto. The width of the input box is set to 100%.
Adding a bit of padding to the left or right of the input will increase the width of the input box. So it’s going to overflow.
So how do you solve this problem?
We just want to set the left and right padding, not the width of the input box. Box-sizing: border-box so we add box-sizing: border-box to the Input
In this case, we set the width of the input directly to include the padding and border width.
Now if we want to change the padding, it’s only going to change inside this box and it’s not going to expand the width of the box.
Use the third-party plugin Better Scroll in the list bar
At this stage of the initial development of the page, because of the addition of more letters corresponding to the area, the page appears when the scroll bar:
In order to use the Better-Scroll library, we only want the list area to be displayed as it was when we first entered the page, so we don’t need the scroll bar. So you can add overflow: Hidden to the outermost div. List box that wraps the entire list area. (The entire list page is from the current city to the end as shown below. The city selection and input fields are written by other subcomponents.)
Next, the usage of better Scroll is explained in github document, and each person can refer to and use it according to the specific situation.
The logical realization of the alphabet
Click event, we need to view the click content, can use the click event event object
In a click event on Vue, methods can receive a parameter e when they define a click method, e being the event object we clicked on.
To get the content of the event object we clicked on, we do this: e.target.innertext
Here’s an example from a project:
Let’s say I hit D, F, J on the page
Demand for 1
Displays the city region of the list component when clicking on the corresponding letter.
The better Scroll plugin has a method to achieve this requirement. The idea is:
Listen for the change of letter value in the alphabet clicked, once the letter changes, use an interface provided by Better scroll, as underlined in the figure below
Using this idea, we can implement requirement 1.
Demand for 2
Drag the alphabet with your finger, and the corresponding list of letters will be displayed in linkage.
Ideas:
Use the TouchStart, TouchMove, and TouchEnd events, and limit your actions to only when your finger moves on the screen. The letters are [‘A’,’B’,’C’… And let the page V-for the letters to display the corresponding content. The reason for storing these letters in arrays is also to implement the main idea of this requirement: find the corresponding letter according to the subscript.
Next, use offsetTop to find the height of the letter A in the alphabet from the top that wraps it. Red box below.
74 here is the height of the red box.
Then get the height of the finger when moving, this height clockwise for the height of the client, using clientY. The TouchMove event has an event object with an Touches array that contains information about the current finger, including the clientY property.
To get our finger positions in real time.
We want to get the height from the parcel block => the height of clientY minus the height of headers and Serach, which are 79px high.
Then calculate the subscript of the letter we move our finger to in the array is (touchy-starty)/ the height of each letter, and take the result down by a whole.
And then finally, just pass the subscript corresponding to the letters in the letters array to the component where requirement 1 is located and use the same idea as requirement 1. (The value transmission here involves the value transmission between sibling components. At this time, vuex is not recommended for this page because it is relatively simple. You can use Event Bus/to find the same parent component to do the media transmission.
The final logical code in my project looks like this:
As a last best practice, use if to ensure the index value.
Performance optimization
The first place
So we need to optimize here, like this:
Initialize startY to 0 in data
The lifecycle hook updated to execute the statement assigning to startY
Why updated hook here? When the alphabet component Alphabet. Vue is first rendered in the project, the value passed from its parent, city.vue, is an empty object. When ajax gets the data dynamically in city. vue, the values passed from City to Alphabet change the data from the original empty object. When the data is updated, the updated hook is triggered, and the assignment to startY is performed only once.
Second: function throttling
Use function throttling to reduce handleTouchMove() execution frequency (which is high when our fingers swipe).
How do you make functions throttle?
Through timer and clear timer to achieve.
Initialize the timer to NULL in data and use it this way
Function throttling with a timer like this:
If I’m already doing this, I’ll delay it for 16ms. If you do a finger scroll again in the 16ms interval, it will clearTimeout the last time you did it, and then redo what you did this time (equal to the final finger slide position).
This function throttling method can greatly reduce the number of times the function is executed, thus improving web page performance.
Function throttling is necessary when a function is executed many times and you want to reduce it without affecting it.
localStorage
There is a high probability that the user will turn off the function of local automatic storage. Generally, we use try catch code block when using localStorage, so that even if the user turns off the function of local automatic storage, the whole code will not be disabled, but the function of localStorage is lost.
Here’s an example from the project:
