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"}