搭建
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
