iscroll

iscroll.js

iscroll.js 標準版
iscroll-lite.js 精簡版 不支持快速、滾動條、鼠標滾輪滾動
iscroll-probe.js 當前滾動位置
iscroll-zoom.js 縮放
iscroll-infinite.js 無限和緩存滾動

不支持 box-shadow opacity text-shadow alpha

-------------

vue2.4.4

npm install -g vue-cli 
vue init webpack demo -y // 公司須要FQ
npm install // 不須要FQ

shasum check failed .. 從新安裝 npm instal

【1】check-versions.js 
檢測系統的npm node版本是否符合vue的需求，vue指定的版本寫在 package.json中
詳情：http://www.cnblogs.com/ye-hcj/p/7074363.html

【2】dev-server.js 
默認 process.env.NODE_ENV 值爲 undefined ， process.env.PORT 也爲 undefined

先看項目結構分析
build中 webpack.base.conf.js 引入 vue-loader.conf.js

npm run dev
dev-server.js 中 使用 opn模塊，自動打開瀏覽器
dev-server.js 引入 webpack.dev.conf.js
webpack.dev.conf.js 引入 webpack.base.conf.js alias 簡寫在這裏

---------------------------

直接修改package.json npm install 
node_modules 包文件更新了，項目本地環境會報錯

package.json 
"dependencies"{
"vue": "^2.1.10", ->2.4.2
"vue-router": "^2.1.1" ->2.7.0
vux-> mint ui 2.2.9
vue-loader ： ^10.3.0 從8.3.0（提示只適合vue1.0）升級到10.3.0，會報錯
vuex-> vuex 2.3.1 
{

入口文件要引入
import Vue from 'vue'

路由要從新寫

ready 變成 mounted

1.識別不了template 
You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

webpack配置文件添加 
alias:{
'vue': 'vue/dist/vue.js' // 這個
}

vue-router要修改

頁面跳轉 this.$router.push('/friendLoan')

【1】路由代碼 main.js App.vue index.hbs webpack.config.js
main.js

import Vue from 'vue'
import Router from 'vue-router'
import App from '../components/App'
Vue.use(Router)

const Foo = {template: '<div>foo</div>'}
const Bar = {template: '<div>bar</div>'}

const routes = [
{path: '/foo', component: Foo},
{path: '/bar', component: Bar},

{
path: '*',
redirect: {name: 'user'}
}
]

const router = new Router({
routes // （縮寫）至關於 routes: routes
})

new Vue({
router,
render: h => h(App)
}).$mount('#app')

App.vue
<template>
<div class="app">
this is app
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
<router-view></router-view>
</div>
</template>

index.hbs
<div id="app"></div>

webpack.config.js
alias:{
'vue':'vue/dis/vue.js'
}

【2】vue-loader 從8.3.0(適合vue1.0)升級到10.3.0 頁面報錯 ,頁面只有一個根元素，不能使用兩個 :disabled , 不能使用關鍵字做爲變量
【3】樣式在 style.less 中 @import "mintui.css"; 先把css集中在一個文件
【4】vuex
核心 store (倉庫) 包含 state (狀態)
vue組件讀取state，當state變化，組件會響應式更新
必變state的途徑 【顯式提交commit mutations 】

main.js

import Vuex from 'Vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
getters: { // getters
getState: state => {
return state.count + 10
},
actions: { // action 提交mutation
increment ({commit}, val) {
commit(Mutation.INCREMENT, val) 
}
}
}
})

store.commit('increment') // 最初提交mutation
console.log(store.state.count) // 1

new Vue({
router,
store, // 把store加進來
render: h => h(App)
}).$mount('#app')

{{test}} 
頁面調用，經過計算屬性 
computed: {
test () {
return this.$store.state.count 
}
},
頁面調用 getters

mounted:{
console.log(this.$store.getters.getState)
}

// 使用 mapGetters輔助函數，控制檯會有警告

頁面保存數據 
this.$store.commit(Mutation.INCREMENT, {val: 150}) // 跟最初的提交mutation同樣
頁面保存數據 action 
this.$store.dispatch('increment', 111) // action 經過 dispatch 觸發

mutation 是同步函數 能夠實現action的功能， 
action提交的是 mutation,能夠異步操做 
mutation直接變狀態

action 不支持傳入對象

 

main.js 入口文件添加 new Vuex.Store({ state ,mutation,getters,actions });
最終整理

把 Vuex.Store獨立成文件 
state,mutation 放到 modules/xx.js 
getters 獨立出來
actions 獨立出來 
把mutatioin的常量獨立出來 mutation-types.js

 -------------------------

app.vue 保存this 到window,供其餘頁面使用
window.xxx=function(){
return this;
}


<style lang="less" rel="stylesheet/less" scoped>


<li :class="{chosen:ischosen==($index)}" @click="select($index)">
.chosen{
color:red;
}
function select(index){
this.$data.ischosen = index
}
自定義打勾圖片則每一個li都要添加該圖片

<tab page="home"></tab>
<a href="xx" :class="{active:page=='home'}"
<i class='icon' :class="page=='home'?'tab-active':'tab'></i>
</a>
props:['page']

<img v-if="item.img" @error="item=false">
<img v-if="!item.img" class="img-error">

<div @click.stop>

<img v-lazy="xx.img"/>
img[lazy=loading]{
background: url() no-repeat center center;
}
img[lazy=error]{
background:url()
}

document.title=xxx

 

-----------------

sourceTree 1.9.6.2

佔位圖,先顯示佔位圖，當輪播時，替換成真正的圖片 swiper的自動輪播方法是 OnAutoplay

var path = require('path')
var jsonServer = require('json-server')
var server = jsonServer.create()
var userRouter = jsonServer.router(path.resolve(__dirname,'xx.json'))
var middlewares = jsonServer.defaults()

server.use(middlewares)

server.get('/xx', function (req, res) {
res.jsonp(userRouter.db.get('getxx'))
})

server.listen(3000, function () {
console.log('JSON-Server is Running')
})

 

 

傳：encodeURIComponent(JSON.stringfy(xxx));
收：JSON.parse(decodeURIComponent(xxx))

addScript (src, success, error) {
let script = document.createElement('script')
script.src = src
document.body.appendChild(script)
script.onload = function () {
success()
}
script.onerror = function () {
error()
}
},

var count=0;
function startLoad(){
_this.addScript('xxx.js', function () {
_this.xxxx();
}, function () {
count++
if (count < 4) startLoad() // 失敗再調用
})
}
startLoad();

 

 

 

var Demo = function(callback){
this.callback=callback
}
Demo.prototype={
xxx:function(){
if (typeof _this.callback == 'function') {
_this.callback(xxx);
}
}
}

 

var xx = new Demo(function(data){
alert(data);
}}

 

 

<style>
  /*1.樣式 :not*/
  li:not(:last-child) { /* 最後一項li不該用樣式*/
    list-style: none;
    border-bottom: 1px solid #0000ff;
  }
</style>

json-server --watch a.json -r ./routes.json

routes.json{ "/abc/company":"/company"}