One of the problems encountered in the project, difficulties and solutions
1px border issues 1. Move the end of development, due to the different devices on the screen, the actual display may not make 1px 1px, how to solve the mobile end?
2. Move the end click click event, will delay 300ms, how to solve?
Resolution: introducing Fastclick plug, the mobile terminal resolve delays 300ms;
NPM Fastclick --save the install;
the router file folder main.js write the following code
Import from FastClick 'Fastclick'
fastClick.attach (the document.body)
3. scoped under vue limit css file is used only in the file .vue;
4. iconfont font icon of the application:
Step: 4.1 iconfont registered account, create a project, and then the desired icon is added to this project, the project is downloaded to the local computer folder src-> assets-> iconfont in.
4.2 modify the fonts in the url iconfont.css in the local path, in main.js directly introduced into the file import "./assets/iconfont.css".
4.3 <span class = "iconfont" > & # xe624; </ span> font to display the icon.
5. stylus style applications:
Step: 5.1 Installation: npm install --save stylus; sometimes needed to download the install --save Stylus-Loader NPM;
5.2 Use: <style lang = "stylus" scoped />.
5.3 varibles.stylus the folder to store the stylus variables,
In <style lang = "stylus" scoped /> tag introduced into @import "../../assets/varibles.stylus", then
background: @bgColor to use the variable.
@ 6. In the middle is the src directory path, i.e., @ / assets / css / reset.css, note that the introduction of other css css style directory, you need to write ~@/assets/css/reset.css.
7. simplified path, the alias is used to simplify the path, such as @ / assets / css / simplified as csss /:
Step: 7.1 in the build file webpack.base.conf.js
Resolve: {
Extensions: [ '.js', '.vue', '.json'],
Alias: {
'VUE $': 'VUE / dist / vue.esm.js',
'@': Resolve ( 'src'), which is // @ src directory alias
'csss': resolve ( 'src / css') // this is the src / css alias for the alternative with CSSS src / css path to simplify effect
}
}
7.2 restart project vue, vue RUN dev;
8. the vue-Awesome widget application -swiper rotation:
the steps of: introducing a plug-in global main.js in:
NPM the install --save [email protected]
Import from VueAwesomeSwiper 'VUE-Awesome-Swiper'
import "swiper/dist/css/swiper.css"
Vue.use(VueAwesomeSwiper)
2.
<swiper :options="swiperOption" >
<!-- slides -->
<swiper-slide>
<img class="swiper-img" src="http://img1.qunarzz.com/piao/fusion/1807/a1/41a802abfc4f0202.jpg_750x200_9f0cf69c.jpg" alt="去哪网"/>
</swiper-slide>
<swiper-slide>
<img class="swiper-img" src="http://img1.qunarzz.com/piao/fusion/1806/de/df09fa61aed2d502.jpg_750x200_67472739.jpg" alt="去哪网" />
</swiper-slide>
<!-- Optional controls -->
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
9. carousel appears jitter
Solution: a fixed value setting element aspect ratio:
.wrapper
overflow: hidden
width: 100%
height: 0
padding-bottom: 31.25% // always high width i.e. 31.25%
extension: parent element display: flex layout, child elements flex: 1; min-width: 0, denotes the width of the remaining adaptive parent element, and does not exceed the width of the parent element.
10. axios: implement cross-platform request
step: 10.1 npm install axios --save // or <Script the src = "https://unpkg.com/axios/dist/axios.min.js"> </ Script>
10.2 Axios from Import "Axios"
10.3 Methods: .json {// file through the rear end of the analog data received, the file in static index.json inside
getHomeInfo () {
axios.get ( "./ static / the mock / index.json ") .then (this.getHomeInfoSucc)
},
the console.log (RES)
}
}
10.4 in config> index.js which do set as follows, can be achieved by the call api / index.json interface automatically to the local static / mock / index.json file
proxyTable: {
"/ API ": {
target:" HTTP: // LOCATION: on 8098 ",
pathRewrite: {
" ^ / API ":" / static / the mock "
}
}
}
11. The Better Scroll-use:
1. Download NPM better-scroll: Better Scroll --save the install-NPM;
2. Scroll-introducing Better: Import Bscroll from "Better-Scroll";
3. custom label dom: <div ref="div"></div>
4. Examples of bscroll: this.scroll = new Bscroll (. This $ refs.div) can;
Note: Bscroll provide scrolling to the specified position DOM API, this.scroll.scrollToElement (dom);
12. The circulation generated by this. $ Refs is an array
13. The definition of the amount of a change, pass through this $ emit value e.target.innerText, to the parent component city.vue.
Parent element by <v-alpha: letters = " letterCities" @ change = "letterChange"> </ v- alpha> traditional values accepted subassembly
parent component subassembly to pass the values in the process lists.vue Crossing value
transfer assembly i.e. indirectly brothers
14. achieved through the throttle-time timer function, i.e., 16ms is not executed once, so that the frequency of execution is not so fast sliding, thereby achieving code optimization
15. vuex use: If you do not plan to develop large-scale single-page application, can be cumbersome to use Vuex redundant. It is indeed the case - if your application is simple enough,
you do not use Vuex. A simple global event bus you need is enough of. However, if you need to build in a large single-page application, you are likely to consider how to better manage the state in external components,
Vuex will be the natural choice;
Step: 15.1 install vuex: npm install vuex --save;
15.2 src folder, create a folder used to store processing vuex;
15.3 index.js created in the store folder;
15.4 in index.js to write:
Import Vue from "VUE"
Import vuex from "vuex"
Vue.use (vuex ); // vue which use plug-ins (such as vuex) are by Vue.use (plug-in name)
to create a new Vuex.Store warehouse export default new Vuex.Store ({//, and export export
State: {// store global public data
city: "Chongqing", the head of the city Home // show default Chongqing
},
actions: {// changeCity = item receiving data transmitted over $ store.dispatch module by this, ctx.commit represents the name and the data values passed to mutations.
changeCity (CTX, Item) {
ctx.commit ( "changeCity", Item)
}
},
// NOTE: If it is passed through this $ store.commit data, does not require direct actions, thereby modifying the value of the processing state directly through mutations
mutations: {// accept the actions transmitted by ctx.commit and data processing, i.e., allowed to modify the state inside the city equal Item
changeCity (state, Item) {
state.city Item =;
}
}
})
15.5 in the main.js:
Import from Store "./store"
new new Vue ({
EL: '#app',
Router,
store,
Components: the App {},
Template: '<the App />'
})
15.6 in the module {. {this $ store.state.city}} can be used;
15.7 store modified . of data: this $ store.dispatch ( "changeCity" , item); to the actions store warehouse vuex of distributing a name for changeCity, the value of the data item passed to the store
if it is this $ store.commit ( "changeCity. ", item) directly to the store warehouse need not vuex actions, thereby modifying the value of the process state directly through mutations
16.localStorage local storage:
the let defaultCity = 'Chongqing';
the try {// disabled users to avoid localStorage, being given
IF (localStorage.city) {
defaultCity = localStorage.city
}
} the catch (E) {}
Export Vuex new new default. Store ({
State: defaultCity, head home // display the city, or the default is localStorage.city Chongqing
})
17. keep-alive optimized code, ajax avoid sending duplicate data acquisition, keep-alive duplicate cache data:
<= the exclude Keep-Alive "name Component name"> // exclude = "name Component name" means that the component does not require cache, i.e., each jump to the page reloading mounted lifecycle
<router-view />
</ keep-alive>
wrapped one keep-alive tag <router-view /> external tab to cache, i.e. vue added to the activated life-cycle (when the mount is completed in page initialization mounted, or jump back to the current page, do the life-cycle function),
activated () {// because keep-alive and more out of the life cycle, namely page when the initial load and mounted as execution, and each time the page jump to return the current page will still be executed, but mounted as in keep-alive will not be executed
if (this.lastCity! == this.city) { / / will jump back to the current page, if the selected city changes, ajax occurs again, otherwise it will not happen ajax
this.lastCity = this.city;
this.getHomeInfo ();
}
}
18. <router-link tag = " li": to = " '/ default /' + list.id"> </ router-link> The wording avoids a label li represents the changed color of the text inside, rather in <li> </ li> and comes with feature to jump to the page.
".": <router-link tag = "div" "." to => </ router-link> Back represents where to =
19. The routing parameters by value:
{
path: '/ Detail /: ID ',
the Component: the Detail
}
20. the scroll event vue page: window.addEventListener ( "scroll", this.headerScroll , true) add true sometimes scroll to trigger events, page scrolling distance is always 0,
probably because the body, html there overflow: hidden property, delete it.
activated () {// page displays the current time component of the life cycle is triggered, since window is global, other pages will be triggered when scrolling, so you need to hide the current page is replaced or when another page, remove the scroll event
window .addEventListener ( "Scroll", this.headerScroll, to true)
},
}
21. A VUE recursion components: i.e. which component calls the component itself;
by name: "detailComponent" name, to call the <detail-component: list = "parameter"> </ Component Detail->
22. A component name VUE action names:
(1) a recursive components, a tag name <compontent-name> </ compontent-name>
(2) the assembly need not be needed when the cache <keep-alive exclude = "name component name"> <Router-View /> </ Keep-Alive>
23. a avoid rolling in the end portion of the current page, jump to a different page is also the bottom:
in router- vue item> index.js in:
Export new new default Router ({
routes : [
{
path: '/',
Component: Home
}, {
path: '/ City',
Component: City
}, {
path: '/ Detail /: ID',
component: Detail,
},
{
Path: '/ pics',
Component: Pics
}],
when scrollBehavior (to, from, savedPosition) {// scrolling behavior vue-router, to avoid rolling in the end portion of the current page, jump to other pages are bottom
return {x : 0, Y: 0}
}
})
24. vue animation program components:
(1) create a new animation elements anim.vue: <Transition> <slot> </ slot> </ Transition>
(2.) then defines the style .v-enter inside, .v -leave-to, .v-enter- active, style .v-leave-active animation of all time.
(3) with the other components of assembly is introduced into the animation, and then wrapping the label will need to perform the animation effect to the animation element tag.
Interface FBI 25. vue item: soon json data into analog data acquired from the server:
Procedure: Under config-> The index.js:
dev: {
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
"/ api": {
target: "HTTP: // localhost: 80", // to this service address, i.e. transmission / api ajax retrieves the data from that address
}
},
26. vue packaged on-line project: the project into the command line, enter npm run build, will generate dist file, then the file content on the service, such as on the xampp-> htdocs folder under the root directory of
the original link: https://blog.csdn.net/qq_42231156/article/details/82949939