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
- Get the local IP via the ipconfig command (my is 192.168.1.105:8080)
- 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