Go to travel app practice notes

First, the development of the homepage header 1.stylus use

• Design diagram of the Iphone6 px, is a twice times the design of the draft
• Using stylus is convenient for us to write CSS code quickly, stylus is a kind of CSS preprocessing language
• NPM Install Stylus--save
• NPM Install Stylus-loader--save (Stylus-loader can convert stylus language to native CSS)
• New Header.vue Settings

  default {name: ' Home ')

• Introduced in the Home.vue

• Import Homeheader from './components/header '

  And declare the local component

• Component: {Homeheader}

  About styles: Using the stylus language, only valid for the current component

• <lang= "Stylus"  scpoed>

  Iconfont Introduction icon

• Simplified file path via Webpack, enter Build=>webpack.base.conf.js, abbreviated path: Add ' Styles ' in Reslove.alias: Resolve (' src/assets/styles ') ,

Problems encountered:

The next time you run the project, you will encounter stylus error.

Reason, Package.json missing dependency, cannot parse stylus

Workaround: Perform npm install Stylus-loader css-loader style-loader--save

Second, home Carousel Figure 1. Create a branch and merge it into the Master Master branch when the branch development is complete

• Git pull (pulls the online branch to local)
• git checkout index-swiper (modifies the local branch to the newly created branch)
• Git status (view local branch)

2. Carousel Diagram Plugin Plugin Vue-awesome-swiper

• NPM Install Vue-awesome-swiper--save (default latest Version)

• NPM install [email protected]--save (Stable version installed)

• Introduced in the Main.js

• Import vue from ' Vue' vue-awesome-swiper '//  require stylesimport ' swiper/dist/css/ Swiper.css '/**/)

Three, the icon area page layout

Write style, this stage is no difficulty

Four, the icon area logic implementation 1. Icon Category Carousel Effect

• Open Swiper.vue
• Package for the component to be scrolled <swiper:options= "swiperoption" > With <swiper-slide> tab, one <swiper-slide> for one page
• To enable the upper and lower areas to slide, you need to set the width height of the. Swiper-container to and. Icons, you can modify styles that do not belong to the page's components by using the style Pierce character "<<<"
• Turn off automatic scrolling parameters: swiperoption: {autoplay:false},

2. Merging on-line branches

// synchronizing a branch of an on-line warehouse  -m ' Add icons 'git push// switch to Master branch git checkout master//  Merge git merge origin/index-iconsgit push

V. Recommended areas

Write style, this stage is no difficulty

Vi. Ajax Get Home data

Recommended Vue-axios

The entire home page sends an AJAX request

• Introduced: Import Axios from ' Axios '

• Methods: {          gethomeinfo:function() {            axios.get ('/api/index.json ')              . Then (this. GETHOMEINFOSUCC)          },          gethomeinfosucc:function() {            console.log (res)          }        },mounted () { This          . Gethomeinfo ()}    

• Only the contents of the static directory in the entire project can be accessed externally to
• Enter Config/index.js add proxytable for API replacement, you can do the online local API automatically switch

  Proxytable: {      '/api ': {        target: ' http://localhost:8080 ',        pathrewrite: {          ' ^/api ': '/ Static/mock '        }      }  

VII. City Selection Page routing configuration

Better-scroll use

<div class= "wrapper" >  <ul class= "Content" >    <li>...</li>    <li>...</li > ...   </ul>  <!--can put some other DOMs here, it won 't affect the scrolling--></div>

// Initialize mounted () {      this-new bscroll(this. $refs. Warpper)}

problems encountered , cannot be scrolled after loading, scrollable after refresh

Situation One:

Cause: When the data is rendered dynamically, the Scollbox is treated as a height of 0 when not rendered, so perform the Better-scroll refresh operation after rendering is complete. Because the height of the new data changes, you need to reset the Better-scroll

// mounted function    this. $nextTick (() ={                  if (!  this. Scroll) {                    thisnew bscroll (this. $refs. Rongqi, {                       true                     });                   Else {                    this. Scroll.refresh ();                  };            });

Situation Two:

To open the page in PC mode, press F12 to toggle the mobile end to not scroll.

Workaround: After switching the mobile side, press F5 to reload in Mobile terminal mode.

Eight, brother linkage between components

Father, father, form of brother

Ix. using Vuex for data sharing

problems encountered: The module is inexplicably lost

The workaround now is to manually delete the Node_modules folder and then reinstall the NPM install

Use of Vuex

X. Preservation of the City

Localstorge Local Storage

State: {city:localStorage.city | | ' Shanghai '},mutations: {    = City }

Optimize Web page performance with Keep-alive

Problems encountered:

Every time you switch routes, Ajax sends requests

WORKAROUND: Wrap a layer of <keep-alive> outside the <router-view> tag of the App.vue file, and the stored content will be removed from memory on the next request, essentially no longer performing the mounted periodic function

XI. Details page dynamic Routing and Banner layout

12. Public picture gallery component split

The problems encountered,

Page dragging affects each other to resolve scrolling behavior

Https://router.vuejs.org/zh/guide/advanced/scroll-behavior.html

In the Router/index.js file, add the following routes

Scrollbehavior (To, from, savedposition) {  return {x:0, y:0 }}

Role: Every time you do a page switch, starters enters the page x axis is 0 y axis is also 0, (always back to the top)

13. Real Machine Test

1. Get the local IP via the ipconfig command (my is 192.168.1.105:8080)
2. Enter Package.json to add "--host 0.0.0.0" to the "dev" to access it in the Internet using your phone

Resolves a problem where the phone's low version browser white screen does not support promise

• NPM Install Babel-polyfill--save
• Introduction of "Import ' Babel-polyfill" in Main.js

14, packaging on-line

Front and back end of the joint tune:

Modify the proxytable under Config/index.js

proxytable: {      '/api ': {        ' http://localhost:8080 '///front-end analog data form        pathrewrite : {          ' ^/api ': '/static/mock '}}    ,

Modified to:

proxytable: {      '/api ': {        ///backend returns data from Port 80 }     },

Problems encountered:

Vue Package Run index.html Web page blank

Workaround: Modify the Index.js under Config folder

Set Assetspublicpath: './'

Go to travel app practice notes