vue-cli项目，将css和js单独抽离出来。

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>

 

 

标签：vue,cli,isBack,抽离,js,css,页面
来源： https://www.cnblogs.com/hs610/p/12100822.html