This article will not be detailed according to the whole project from beginning to end, the nuggets community many well-written god has written the whole project summary of the article is very good, such as: Chrislinlin wrote Vue. Js development of the WebApp, there are some good articles, I will not list them. So this article only records some points that I personally recorded in the project study notebook. This copy is where to learn of the project, my main purpose is to understand how an App development need to do, how to modular development, how to use Git for code management, fully read Git operation video learning, but just don’t see there is an armchair strategist operation, this project let me understanding of Git has a real introduction), There are consolidation of learning vUE knowledge points.

1. Project framework diagram

The general framework is shown as follows:The author Chrislinlin

2. Project environment construction

① NodeJS ② code management (code cloud is used in this project) ③Git for Windows download ④ Add SSH public key and connect computer with online repository 1. Generate a public key. 2. Run Git Bash, enter ssh-keygen -t rsa -c “[email protected]”, and press Enter 3 as prompted. View and copy the generated public key cat /.ssh/id_rsa.pub 4. 5. Run the SSH -t [email protected] command on git Bash to paste the public key to git repository to establish a connection. ⑤ Clone the readme. md file generated online to local 1 to ensure successful connection. Select SSH from the clone/download button on the right of the newly created project repository in the code cloud and copy link 2. Open Git Bash and CD to your new project file directory 3. Git clone+ git clone+ git clone+ git clone+ git clone+ git clone 4. Run CMD or Powershell (or directly vs terminal console) in the project files directory 2. Enter NPM install –global vue-cli and press Enter to confirm (version 2.9.6 is installed) 3. Enter vue init webpack XXX (XXX) for the project name and name a as Travel. XxxProject name XXX, cannot use the project name with uppercase letters, instead use travel B. project Description? Project Description, D. vue. build (Runtime+complier + Runtime only) select Runtime+complier The difference between run-time Compiler and run-time Only. Whether to install vUE routing, Yes f.useslint to Lint your code? Pick an ESlint prest Select Standand (To be honest, ESlint, if you haven’t used it before, will give you a wavy line or red dot error at the beginning, which can be quite annoying. But after using it for two or three days, ah, my code is so neat and comfortable, and now I feel sick all over when I type without it. Do you use unit tests, this project is not using No H.et up E2E tests with Nightwatch? Test whether the scaffolding is successfully installed and can run correctly. Enter CD Travel, then enter NPM run dev and press Enter to enter the port initial page. 8 Synchronize the online and offline initial code 1. Right-click git bash here in the project directory to open git bash 2. Start by typing git status to see if any changes have been made since your last commit, and now all branches, you can see that many new files have been added 3. Type git add. To add all files for the current project to the local cache 4. Enter git commit -m ‘XXXXX’ XXX content for the description of the file you are committing this time. Input git push push the operation of the above-mentioned documents to the cloud project code warehouse management Finish the above steps (some simple can understand the steps I might skip the no written in), the environment of the project has been completed the setup, the above is my personal understanding, may have some write wrong place among them, or write a bad place please point out.

3. Introduction of initial project files

Readme. md // Project description file package.json // Third-party dependencies configuration, project development dependencies, dependency environment information package.lock.json // help us determine the specific version of the installed third-party dependencies. Keep the team programming unified, lock some versions of the package, Index.html // The default home page template file. Postcsrc. Js // The postCSS configuration item Eslintignore // configures files that do not need to be detected by eslintrc detection tool. Editorconfig Babelrc // The code written by the project is the code of the large file component of Vue, so it needs to do some syntax conversion through Babel, and finally convert it into the code that the browser can compile and execute. Static //static directory for static resources, Node_modules // SRC // SRC /app.vue // SRC /app.vue // SRC /app.vue // The original root component of the project SRC /router/index.js // the route placement position of the project SRC /components // the components to be used in the project SRC /assets // the picture to be used in the project config // Place the project configuration file Config /index.js // Put the basic configuration config/dev.ent.js // development environment configuration config/prod.ent.js // online environment configuration information build // put the project package webpack configuration information, Vue - cli will automatically build the build/webpack base. Conf., js / / basic webpack configuration information build/webpack dev. Conf., js / / development environment webpack configuration information Build/webpack. Prod. Conf. Js / / online environment webpack configuration informationCopy the code

4. Project notes recording point

4.1 Comparison between Multi-Page Applications and Single-page Applications

Multi-page application: page jump → return to HTML Advantage: fast first screen time, good SEO effect (search engine weight effect is good) Disadvantage: slow page switching single page application: page jump →JS rendering advantage: fast page switching Disadvantage: slow first screen time, poor SEO effect

4.2 Customizing Shortcut Paths for Projects

(vue2. X scaffolding) : Scroll down to webpack.base.conf.js to find the alias in resolve to customize the shortcut path

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'styles': resolve('src/assets/styles'),
      'common': resolve('src/common')
    }
  },
Copy the code

② (Vue3.0 scaffolding) : integrated into the ‘vue.config.js’ file, as follows

module.exports = {
    chainWebpack: (config) => {
      config.resolve.alias
        .set('styles', path.join(__dirname, './src/assets/styles'))
        .set('@', path.join(__dirname, './src/'))
        .set('common', path.join(__dirname, './src/common/'))
    }
}
Copy the code

4.3 Git’s set of operations for every new function developed

Git bash here = git bash here 4) Enter git status to check your current branch and start writing the code

4.4 A series of Git operations after the completion of a new function development

① Go to the local project directory and right-click git bash here to open git bash. ② Enter git add. Git commit -m ‘XXXXXX’ 4) Input git push to push the above submitted code to the cloud project code management repository. (After completing the above steps, we just pushed the content of the branch to the cloud, which is not finished yet. Git merge origin/ XXXXXX (git merge origin/ XXXXXX) Git push to synchronize the content of the master branch to the cloud

4.5 Add a fixed div to prevent page jitter due to network speed loading

The template for the fixed div looks like this, shown with an example of CSS data

Width: 100% height: 0 Overflow: hidden PADDING-bottom: 31.25%Copy the code

This approach is applied to the entire project component, which should be reflected by those who have worked on this project

4.6 Static Stores static resources

Project pictures in it, and I started is to download some pictures of her own, and then put them in the project directory components of a new img file, but I found no effect, after the reference page where I thought I write wrong, double-check the SRC reference link if you have any questions, check a few times on the Internet, I found some people also is such, Static resources must be placed in a static directory for the page to work.

4.7 The problem that automatic rotation stops after manual sliding of optimization wheel casting chart (added by myself)

This was not mentioned in the project, but I found the problem when I was testing the page. As long as I manually slid the wheel cast image once, the wheel cast effect would stop and stop on a picture. Then also looked up the Internet how to solve this problem, the solution is actually very simple, look at the following round broadcast graph control code, the following point out

SwiperOption: {pagination: '. Swiper-pagination ', loop: true, // 2200, / / automatic switch time interval stopOnLastSlide: false / / whether the switch to the last picture stop automatically switching}, autoplayDisableOnInteraction: False // Stop autoplay after manual slide, remove autoplay can be put into autoplay object}Copy the code

4.8 Automatically display ellipsis CSS style template after text exceeds the box area

To display text outside the box… Ellipsis CSS code

Overflow: hidden white-space: nowrap text-overflow: ellipsisCopy the code

If not, add min-width: 0 to the previous container

4.9 Li-1 pixel frame problem on mobile terminal

How do I solve this problem because when I write 1 pixel on the mobile end of the phone, I can obviously see a border that is not 1 pixel? This project introduces border-.css to solve this problem. It is already a written file and can be directly importedAfter the introduction, where 1 pixel border is required, which one is required? If the top is required, write a class= “border-top”, and also write a class= “border-bottom” at the bottom. Please refer to this article for details1 pixel border problem on mobile terminal

4.10 The Router changes Color after being clicked

Since router-link also has a hyperlink style that changes color when clicked, you need to add a fixed color to this layer of boxes. Otherwise the color changes after you click on it

4.11 Whether to bind the method () and obtain the event source object

@click=”handlexxx”, no parentheses, automatically pass in the event source object, write method name handlexxx(e){}, then call the event source object, for example, get the text under the click area. That’s e.target. InnerText. If @click=”handlexxx()” is bound with this parenthesis, it will not be able to get it directly. If @click=”handlexxx()” is bound with this parenthesis, it will be able to call the event source object

4.12 Value transmission between components: Value transmission between parent and child components (child to parent, parent to child), and value transmission between sibling components

Originally, in my opinion, this can be reduced to two problems. The process of transferring values between sibling components is that child A passes first to its parent, and then the parent passes to its child B. In the end, it is nothing more than the two problems of child to parent and parent to child, because this method is used in the project. However, I later checked on the Internet that there is another method (Vuex is not counted as a separate method, vUE should know that everyone is so smart), and another method is to transfer data between brothers by means of event cars.



① Parent to child: the child component is written inpropsWrite type (initial value) can be used: call

② Child to parent: The child component passes$emitTriggers a custom event for the parent component,$emit(' XXX custom event name ', add parameter), the additional parameters will be passed to the listener callback, sample code below, for detailsParent and child components pass values

Child components:The parent component:③ Values are transmitted between sibling components through event traffic

1. Data transmission between brothers requires the help of the event car, and data is transmitted by the way of the event car

2. Create an instance of Vue so that all brothers share the same event mechanism

3. Pass the data side, triggered by an eventBus.$emit(method name, data passed)

/ / Mounted (){/ / bus.$on(function(mounted){/ / bus.$on(mounted(){/ / function(mounted){/ / bus. We can create a separate JS file, eventvue.js, with the following content

import Vue from 'vue'

export default new Vue
Copy the code

The parent component:

<template>
     <components-a></components-a>
     <components-b></components-b>
</template>
Copy the code

Subcomponent A:

<template> <div class="components-a"> < button@click ="abtn">A button </button> </div> </template> <script> import eventVue from '.. /.. /js/event.js' export default { name: 'app', data () {return {' MSG ':" I am component A"}}, Methods :{abtn:function(){eventvue. $emit("myFun",this.msg)}} </script>Copy the code

Child component b:

<template> <div class="components-a"> <div>{{btext}}</div> </div> </template> <script> import eventVue from '.. /.. /js/event.js' export default {name: 'app', data (){return {'btext':" I am B component content "}}, created:function(){this.bbtn(); }, methods:{BBTN :function(){eventue.$on("myFun",(message)=>{ This.btext = message})}} </script>Copy the code

4.13 Optimize the City drag list

The function of dragging the list of cities on the right is to drag the alphabet and then execute a method that jumps to the city at the beginning of the letter. The original method code is as follows:

handleTouchMove(e) {
    if (this.touchStartus) {
        const starY = this.$refs['A'][0].offsetTop
        const touchY = e.touches[0].clientY - 79
        const index = Math.floor((touchY - startY) / 20)
        if (index == 0 && index < this.letters.length){
            this.$emit('change', this.letters[index])
        }
    }
}
Copy the code

(1) startY will be double-counted, wasting performance, so we need to pass 1. Const starY = this.$refs[‘A’][0].offsetTop updated(){} Only when data from another component changes the page This value needs to be recalculated before the page is re-rendered. (2) When dragging the city alphabet, the execution frequency of the method function is too high, so we don’t need to execute this method in such high frequency. Therefore, we can improve the performance of this part through shaking prevention. Create a new timer:null value at data and modify the code as follows:

handleTouchMove (e) { if (this.touchStatus) { if (this.timer) { clearTimeout(this.timer) } this.timer = setTimeout(() =>  { const touchY = e.touches[0].clientY - 79 const index = Math.floor((touchY - this.startY) / 20) if (index >= 0 && index < this.letters.length) { this.$emit('change', this.letters[index]) } }, 16) } },Copy the code

Changes, this means that assumption is executing this method, I let the 16 ms delay in the execution, assuming within 16 ms ran a finger sliding, lead to this method is called again, then get rid of the last method of execution and re-execute this time method, then it can reduce the unnecessary method performs a lot of times, In order to achieve the purpose of improving performance.

4.14 Usage Precautions of localStorage

Use localStorage must remember to capture exceptions, because some users close the browser localStorage or use the browser’s stealth mode (anonymous mode), then it will directly lead to throw exceptions, so use to capture exceptions to avoid unnecessary bugs, In the store blockroad.js file, write as follows

export default {
  changeCity (state, city) {
    state.city = city
    try {
      localStorage.city = city
    } catch (e) {}
  }
}
Copy the code

Write it like this under state.js

Let defaultCity = 'Beijing' try {if (localstorage.city) {defaultCity = localstorage.city}} catch (e) {} export default { // public data city: defaultCity}Copy the code

4.15 Vuex Getters feature

Vuex’s Getters are similar to computed data, which can be used to calculate new data from static data in Vuex, avoiding data redundancy.

4.16 Html5 solves 300ms click delay problem

{touch-action: manipulation} {touch-action: manipulation} {touch-action: manipulation} {touch-action: manipulation} {touch-action: manipulation} {touch-action: manipulation} {touch-action: manipulation} {touch-action: manipulation} {touch-action: manipulation} {touch-action: manipulation} {touch-action: manipulation} {touch-action: manipulation} {touch-action: manipulation} {touch-action: manipulation} {touch-action: manipulation} {touch-action: manipulation} {touch-action: manipulation} {touch-action: manipulation} I initially thought it was HTML in the index.html file, but couldn’t find it when I looked for it. It turned out that it was in the reset.css file that was introduced

4.17 Purpose of name value in component

(1) Components for recursive use (e.g., the ticket price column of city details page) (2) De-caching a page (exclude=” XXXXXXX component “) (3) Vue development view

4.18 Solve the interaction of scrolling behavior during page switching

When we scroll to a middle position of the page and click to switch the page, we will find that the new page is directly switched to the middle position of the previous page, so it looks very inconsistent, we can add the following code to the index.js under the router file to solve the problem

ScrollBehavior (to, form, savedPosition) {return {x: 0, y: 0}}Copy the code

4.19 Dragging city List Page Dragging problem

The original code is touchstart.prevent, which will prevent the default drag-and-drop effect of the page and cause a bug, so we need to remove prevent to solve the problem

4.20 Mobile Phone Test Blank Screen Bug

Some mobile phones do not support Promise, which will lead to the white screen bug in the LAN test. Therefore, in order to solve this problem, we can install the following package to solve itnpm install babel-polyfill --saveAfter installation can be introduced





Write this, even if finished, this project took about a week to finish, for a beginner is still very friendly, can understand a simple project development process. The above is the summary in my notebook, and some other details can be referred to the articles I mentioned at the beginning. If you think my writing is ok, please give a thumbs-up. If there are any bad points, please point out them so that I can correct them.



The home pageCity list pageCity Details Page