搭建

vue init webpack-simple weback-demo

让.vue文件中解析lang="less"

cnpm install less less-loader -d

 {

    test: /\.less$/,
    loader: "style-loader!css-loader!less-loader",

}

使用vue-router

cnpm install vue-router

//main.js
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import routerConfig from './router.config.js'

Vue.use(VueRouter)

const router = new VueRouter(routerConfig);

new Vue({
    el: '#app',
    render: h => h(App),
    router
})

// router.config.js
import Home from './components/Home.vue'
import News from './components/News.vue'

export default {
    routes : [
        {path: '/home', component: Home},
        {path: '/news', component: News}
    ]
}

结合animate.css 做动画

//App.vue
<template>
    <div>
        {{msg}}
        <ul>
            <li>
                <router-link to="/home">主页</router-link>
                
            </li>
            <li>
                <router-link to="/news">新闻</router-link>
            </li>
        </ul>
        <transition enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutRight">
            <router-view></router-view>
        </transition>
    </div>
</template>
<script>
export default {
    data() {
        return {
            msg: 'Welcome to Your Vue.js App'
        }
    }
}
</script>
<style >

@import '../node_modules/animate.css/animate.css';

引入第三方css 使用@import