1. Create projects and connect to Github remotely
  2. Divide the directory: Generally, divide the SRC directory. It is divided into resources and components (common components, related components), network resources, pages, routing, state management, and public files.
  3. CSS file normalization: normalize.css base.css (styles for projects).
  • Get the root element: root (pseudo class is used to select information outside the DOM tree, such as the specified state of the element, the element that meets certain logical conditions, pseudo element is a virtual element that is not defined by the DOM, with the element content as the core, specifying the content of the selected element).
  • Define variable: — Attribute name: value.
  • Initialize the interface: margin, padding, box-sizing (set the calculation method of the total width and height of the element, content-box: content, height, border-box: content + padding + border).
  • Font-family: Specifies a priority list of one or more font family names and common surnames for the selected element.
  • User-select: indicates whether the user can select text.
  • -webkit-tap-highlight-color: a non-standard CSS property for WebKit rendering engines such as Chrome and Safaria that sets the color of the link to appear when it is clicked.
  • Vw \vh, an adaptive layout unit, vw equals 1% of the viewport width and Vh equals 1% of the viewport height (visual area, excluding taskbar and bottom toolbar).
  • Text-decoration: Text should be underlined, stripeout, etc.

4. Add vue.config.js, EditorConfig: used to add aliases and styles to code layout.

  • To use an alias in a URL or DOM, prefix the alias with ~.

5. Introduced previously packaged Tabbar components and divided project modules.

  • Introduce tabbar in app. vue and add router.
  • The Router imports modules using the arrow function for lazy loading, loading a module only when it is accessed.

6. Wrap the top navigation bar and use:

  • Common folder names are lowercase and component names are uppercase.
  • Multiple pages require the top navigation bar, so it needs to be packaged as a component, with multiple slots to increase reuse.
  • If you want a flex layout for a child element, the parent element sets display to flex and the child element configures the flex value for the layout.
  • Setting line-height allows the text to be centered, while the bottom and top navigation bars have a common height (49px,44px).
  • For line-height to work, there must be something in it.
  • Common styles are set directly within the component, but each different part has its own style set by a separate class.

7. Encapsulation and use of round cast map:

  • Request the data first (how to use it after you get it) : Use a network request.
  • Function calls are placed on the function stack, and local variables are released when the call is complete.
  • The garbage collection mechanism is to find an object that has no reference and recycle it. So make an object’s pointer reference point to NULL, and the garbage collection mechanism can reclaim the object (unless there are other references to it).
  • Direct import package good broadcast map components import using slot principle.
  • How do you fit the number of requests? Generated using V-for.
  • When using V-for in a VUE component, specify the key to display, otherwise a warning will be issued.
  • As long as the code is large, it can be wrapped and referenced elsewhere.
  • It is better to request data at the top level of the component, and then pass the data through communication between components. If encapsulated in a child component, the data will be requested multiple times, which is not reasonable.

8. Packaging and use of recommended products:

  • Flex: 1, text-align: center use flex, flex: 1, text-align: center

9. What’s trending this week:

  • The component template must have a root, that is, a div.
  • SRC is the alias of the path, which must be preceded by ~.
  • After adjusting the position of the header bar to fixed, it is moved out of the document flow and no space is created for it. It will be overwritten by other elements, and you need to mediate the Z-index to make it pop up.
  • To manipulate the DOM in a Vue component, you need to do so in Mounted because the HTML has already been rendered. (WHEN creatd(), the HTML was not finished rendering)

10. Tapbar implementation:

  • Just the text is not the same reuse components, you can not use the slot, directly get the text array can be used.
  • Set position: sticky. Sticky positioning to achieve the effect of top suction. You must set a top property to indicate how far away the top is to display the top drawing effect.

11. Data request Model:

  • When a large amount of data is requested and classification is required, a data model needs to be designed as a container.
  • It is better not to write too complicated logic in native functions like created, and it is better to write them in methods.
  • How to communicate between components to pass local images instead of directly using images mounted on the server. The image may not be under the static folder and cannot be accessed directly.
  • Create a data model using object containing array objects.

12. Tapbar to switch data:

  • Note that sometimes hot updates don’t update some styles.
  • The child component creates the click event, and the parent component receives the click event and processes what data should be displayed.

13. Use Better Scroll to improve the sliding effect.

  • NPM installs components.

  • Using native, the parent component defines height, overflow-y:scrool, and local scrolling can be achieved.

  • Use better Scroll to install in a parent component, and the parent component can only have a label, set the height of the parent component, apply better-sroll.

  • By default, better-sroll does not track the scroll position. If new is required, pass probeType on, pass 0, 1, 2, 3 (when the finger is dragging, the inertia of the finger is not listening), and pass 3 (when the finger is sliding).

  • The click parameter controls whether the click event is turned on or off (especially for elements like div).

  • PullUpload pullUpload is enabled. A pullup to the bottom will only trigger once, unless the finishPullUp() function is periodically called to clear the flag.

  • In order to avoid high dependence and coupling of multiple components on Better-Scroll, it is necessary to encapsulate them into components. Prevents components from being no longer maintained.

  • If ref is bound to a component, this.$refs.refname returns the component object. Bind to the element, and you get the element object.

  • Scoped in style means scope and only styles elements within the current component.

  • ProbeType is not compatible with pullUpload and pullDownRefre attributes.

  • When better-Scrool takes effect, the scrollable area height will be calculated first. However, sometimes the scene loads images, and the loading images is asynchronous, so the calculation of height may be wrong, resulting in the phenomenon that the page cannot be scrolled for a moment. The solution is to call the refresh function in time to refresh.

14. Construction and use of backtop component. When listening for component events, you need to add a native attribute after @click.

15. If the parent component passes a value to the child component without adding:, the string is passed directly. The parent passes the value to the child using the props property, and the child passes the value to the parent component using the event trigger and binding.

16. You can control the display of Vue components by v-show.

17. This of the execution context created by the Vue component refers to the Vue component object itself, and parses methods or data returned by methods and data as its own attributes, which can be accessed directly through this. However, the exported component objects obtained by external reference are not parsed. They are methods and data as objects, so pay attention to the difference in reference.

18.Vue can be directly attached to the img element, @load, indicating that the image has been loaded.

19.Vuex: Can be used to connect components to communicate.

20. The event bus is used to manage events. (bus.emit), bus.emit), bus.emit), bus needs to be defined as a new Vue instance that can emit and receive events.

21. To prevent uninitialized use of an object, add object && to prevent undefined use.

22. If a component or element is involved, it should not be called in created because it is not already created.

23. The this in the listener no longer points to the component itself, but to the event listener bus.

24. Prevent jitter and throttling:

  • If the wait time is exceeded, the event will actually be triggered. Otherwise, the next wait will continue, using the closure, setTimeout implementation, that is, if the event is triggered frequently, only the last trigger will be executed. Note: setTimeOut has a feature that is added to the end of the event loop and executed sequentially, even if there is no delay.
  • Throttling:

25. Event loop mechanism:

26. Top suction effect of TapControl:

  • The first step is to get the component height: get the element with the $el attribute and get its offsetTop attribute value.
  • Note that you need to wait for the image to load before the height is accurate.
  • The value of tanslate can change the value of fixed.
  • Z-index only works on elements that have position set. The RELATE localization can remain in the original position.
  • In fact, the use of component reuse method, two components, meet the conditions when one hidden, one reality. That’s one option.
  • Use refs when you have multiple components, because document searches down from the top of the document and probably won’t find the target element.

27. Keep the home page state:

  • Use keep – live.
  • Save the position of the page at any time.
  • Acitived state, jump to this position, can achieve the effect of holding the position.
  • Remember to refresh the BScroll layout once after the jump.

28. Preparation of Detail page:

  • Create a component.
  • In the router, index.js defines the component’s routing address.
  • Call the push method to jump to the component.
  • How to bind the id of the jumping commodity:
  1. Set a dynamic path parameter in router index.
  2. Then on the component page, use route.params to get the parameters of the dynamic path and proceed to the next step.
  • If the content in the component is complex, you can extract a child component.
  • A slot is a slot that is passed in place of a previously defined slot.
  • If you want to bind events to slot, it is best to add a div around the slot, pass the div and bind the event to the div. When slot is passed, bind different classes, depending on the hierarchy, each class is responsible for the style of each layer.
  • Dynamically binding a class uses {‘ class name ‘: expression}.
  • Components and children with keep-alive are kept alive, and create is executed only once. Use Exlude to exclude components from a life-cycle.
  • The data requested from the server is quite chaotic, so you need to extract a class or array to save it, which is convenient to call.
  • V-for can also iterate over numbers, from 1 to this number.
  • Write HTML according to the layout (observe first, build the frame before writing CSS), write CSS according to the style.
  • You can use filters to process the data and then display it.
  • Multi-row elements can be displayed with the table tag.
  • You can set postision: relative, Z-index for the entire page, and set a background color to block out elements that are out of the document.
  • Review again by calling bscrool, importing the component, setting the height of the imported component, positioning, and then ready to use.
  • Use reative as much as possible to fine-tune the position.
  • If multiple events can be counted cumulatively, you can use a counter to count them, so that only the last event can be fired.
  • There are currently three ways to trigger:
  1. Emit multiple triggers, receive multiple triggers, and perform only the last time using anti-shake.
  2. Issue the first trigger, then do not issue, receive the first trigger, execute the first, use Boolean variable control.
  3. Issue the last trigger, do not issue before, accept the last trigger, execute the last trigger, use count variable control.
  • You can use Watch to monitor data changes and react to them.
  • Use V-for for table to draw multiple tables, v-for for TR to draw multiple rows, and V-for for TD to draw multiple columns.
  • Project key points:
  1. How the code is organized.
  2. Business logic (don’t do it immediately), clear.
  3. Resolve various bugs.

  • The time returned by the server is always in the form of a timestamp, which needs to be converted to a time string by a conversion function. Regular expressions are used for string matching, and storage is often required.

  • Get data to write user reviews and recommend products.

  • Convert the timestamp to a Date object:

    Var newDate = newDate (timestamp); // Note: if the timestamp is 13 bits, the output is direct; if the timestamp is 10 bits, the input is *1000Copy the code

  • Mixins can be used to extract code that is reused between components.

  • Check deactivated if keep-alive is used and destroyed if not.

  • You can unlisten for events on the event bus.

  • To prevent stalling when the user drags, Details needs to trigger Scrool’s Refresh twice, once for a detailed image display and once for a recommended item display.

  • Tag attributes are case insensitive, so use the hump when it’s appropriate.

  • Because the requested data is asynchronous, even within the Moutned function, it is possible that the data has not been requested, so elements in the DOM of the data-driven child components have not been loaded (this rendering also requires an ancient process), and access errors may occur. This problem is solved by Update, because update is listening for data-driven component changes, but it is local and may be triggered too frequently when some components are updated, so you can use nextTick to call it after all components are rendered. However, we should consider one case, when there are a large number of pictures, the data accessed may be inaccurate, so when there are a large number of pictures, we can only access these data in the trigger function after the picture is loaded.

  • Vue.nexttick executes a deferred callback after the next DOM update loop ends. Use this method immediately after modifying the data to get the updated DOM.

  • The placement of functions is important because it relates to the JS event execution mechanism.

  • Offsettop inaccuracies are usually caused by image loading.

  • The range can be specified by an if statement when querying conditions.

  • When using mixins, you can add functions to life cycle functions, which will be merged later. However, methods can only merge functions of the whole, and cannot merge functions of the same name, and only replace them.

  • Sometimes you need to use space to save time.

  • You can also use mixins to mix components.

  • Vuex can be used to store variables globally, shared by all components.

  • Bottom toolbar wrap: Wrap the component yourself.

  • Mix backtoTop.

29. Shopping cart interface (data obtained mainly through Vuex) :

  • Click the button to enter the shopping cart.

  • Data is stored in Vuex.

  • Common array functions: pop, push, Shift, unshift, reverse, sort, find, filter, indexof, etc.

  • It is recommended to use for… when looping object properties. In, use for when iterating through groups… Of.

  • The only purpose of mutation is to modify the state of state.

  • The code in mutation should be as simple as possible and not too complex. The complex code is in the action.

  • Inside the action is the operation context, which is the context object, to access state or commit.

  • State, mutation, and Action should be organized. Methods should also be extracted as constants.

  • In vuex, the ES6 object extension says that properties or methods in an object can be abbreviated, but they must have the same name and cannot be written with a different name.

  • Mutation uses the commit method, and action corresponds to the Dispatch method.

  • When a Vue instance is initialized, the data in data is initialized once and will not be changed unless directly referenced. So we use computed properties to update. (?)

  • Vuex’s getters method can also be used to expose variables that may be accessed multiple times.

  • You can use mapGetters in VUEX to get the calculated properties defined in Getters. You can fetch it directly or alias it.

  • And then get the data and do a presentation and summary.

  • List display:

  • Select, select all.

  • Bottom settlement column:

30. Toast pop-up window:

  • Using the Promise method to encapsulate vuEX success, the Promise is used for asynchrony, and asynchrony is not just a network request, but also a click event.

  • Read more official documents and learn by yourself.

  • You can also mapActions to a component’s methods using mapActions.

  • encapsulation

  • Encapsulate the Toast component as a plug-in, using the vue.use method to use it.

  • Encapsulation in common mode.

31. Other details:

  • Fastclick: solves the 300ms delay for mobile click events.

  • Reduce the 300ms delay on the mobile terminal.

  • NPM installation, import reference, attach use.

  • The patch is to write a script to support the application (Ployfiil).

  • Lazy loading of images: Loading images only when they need to be displayed.

  • Use the VuE-LazyLoad component.

  • Install, import, vue. use, change SRC to V-lazy

  • You can configure some options in vue. use, such as the background image that is displayed when the load fails.

  • You can use require to request images. The Node.js require function is the main way to import modules into the current file.

  • Px2vw plugin to adapt the page to different sizes of devices.

  • The common design prototype is the iphone6 (750*1334), which is hd, and the original size is 375*667.

  • Configure some Settings in the postcss.config.js file.

32. Project deployment issues:

  • Deployment problem on Windows.

  • A server is a host without a monitor.

  • Host -> Operating system (Windows/Linux)-> Tomcat/Nginx software.

  • Remote deployment: Generally, a cloud server is installed with a Linux operating system. Then, related software is used to remotely install the network server and deploy the website. Once deployed remotely, other devices can access it.

33. Responsive principle

  • Publish the subscriber model

34.Vue instance lifecycle supplement:

  • Lifecycle functions, hook functions

  • During creation: beForecreate, Created, beforemount, mouted

  • Runtime: beforeUpdate, updated

  • Destruction period: BefordeStory, deStoryed