css js写在一起 vue_vue-cli项目，将css和js单独抽离出来。

vue-cli项目，将css和js单独抽离出来可使页面整洁可维护。都写在页面里多了看起来就会很乱。

1.抽离js，在没每个页面文件下单独新建一个.js文件，一个.js对应一个页面。

在js文件中写法和在页面上完全一样，也可以直接复制过去。

然后在页面中引入，需要注意引入方式

export { default } from './js/index';

这样就可以在js文件中写逻辑代码了，效果和直接写在页面上是一样的，这样就页面上就整洁多了。

2.抽离css，新建一个公共的css文件，直接在app.vue里引入就可以了，大家都知道，vue-cli是单页面引入，所有页面其实都在APP.vue里面。

我这里用的是less,用法和css是一样的。在APP.vue引入，我用的less语法，所有引入的时候lang="less"。

====另外附上一个移动端切换页面的过渡效，开发移动的时候，像要页面切换平滑效果可以使用这个，这是vue内置的过渡效果。

// app.vue

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()

}

}

标签：vue,cli,isBack,抽离,js,css,页面

来源： https://www.cnblogs.com/hs610/p/12100822.html