示例 http://47.94.90.89/dist
1 安装vue-cli
（1） 下载安装node.js
（1） npm install -g cnpm --registry=https://registry.npm.taobao.org 换源
（1） cnpm install -g vue-cli 全局安装vue-cli 已安装则不用
（1） vue init webpack Vue-Project 初始化vue项目 使用webpack模板，项目名称（自带webpack）
（1） cnpm install 初始化 生成node_modules
（1） npm run dev
需要上线打包为 npm run build
2 配置路由 （router 目录>index.js）
import ccc from '@/components/ccc'
Router.prototype.go = function (a) { sessionStorage.isBack = true if(a){ window.history.go(a) }else{ window.history.go(-1) }}window.addEventListener("popstate", function(e) { sessionStorage.isBack = true}, false);Vue.use(Router)
3 app.vue中
（1）```
<transition :name="transitionName" >
<router-view class="child-view" ></router-view>
</transition>
</div>
（2）<script>export default { name: 'App', data () { return { transitionName:'slide-left' } }, watch: { '$route' (to, from) { let isBack = eval(sessionStorage.isBack) if (isBack) { this.transitionName = 'slide-right' } else { this.transitionName = ' slide-left' } console.log(sessionStorage.isBack); sessionStorage.isBack = false } },}</script><style> *{ margin: 0 ; padding: 0; } body,html{ width: 100%; height: 100%; }#app { font-family: 'Avenir', Helvetica, Arial, sans-serif; width: 100%; height: 100%; text-align: center; max-width: 750px; margin: 0 auto; overflow-x: hidden; position: relative;} .child-view { transition:all .3s ease; position: absolute; width: 100%; } .slide-left-enter,.slide-right-leave-active { opacity:0; -webkit-transform:translate(100%,0); transform:translate(100%,0); } .slide-left-leave-active,.slide-right-enter { opacity:0; -webkit-transform:translate(-100%,0); transform:translate(-100%,0); }</style>
随时随地看视频
