vue-cli项目，将css和js单独抽离出来可使页面整洁可维护。都写在页面里多了看起来就会很乱。
1.抽离js，在没每个页面文件下单独新建一个.js文件，一个.js对应一个页面。
在js文件中写法和在页面上完全一样，也可以直接复制过去。
然后在页面中引入，需要注意引入方式
<script> export { default } from ‘./js/index‘; </script>
这样就可以在js文件中写逻辑代码了，效果和直接写在页面上是一样的，这样就页面上就整洁多了。
2.抽离css，新建一个公共的css文件，直接在app.vue里引入就可以了，大家都知道，vue-cli是单页面引入，所有页面其实都在APP.vue里面。
我这里用的是less,用法和css是一样的。在APP.vue引入，我用的less语法，所有引入的时候lang="less"。
====另外附上一个移动端切换页面的过渡效，开发移动的时候，像要页面切换平滑效果可以使用这个，这是vue内置的过渡效果。
// app.vue <template> <div id="app"> <transition :name="transitionName"> <router-view class="child-view"></router-view> </transition> </div> </template> <script> export default { data () { return { transitionName: ‘slide-left‘ } }, beforeRouteUpdate (to, from, next) { let isBack = this.$router.isBack if (isBack) { this.transitionName = ‘slide-right‘ } else { this.transitionName = ‘slide-left‘ } this.$router.isBack = false next() } } </script>
原文：https://www.cnblogs.com/hs610/p/12100822.html