console
1. 目录
src文件夹
main文件夹
account.vue
goodslist.vue
subCom文件侠
login.vue
register.vue
安装两个扩展包
Vetur 0.10.1
Vue 2 Snippets 0.1.5
main文件:
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import app from './app.vue'
import account from './main/account.vue'
import goodsList from './main/goodsList.vue'
import login from './subCom/login.vue'
import register from './subCom/register.vue'
var router = new VueRouter({
routes:[
{path:'/account', component:account,
children:[
{path:'login',component:login},
{path:'register',component:register}
]
},
{path:'/goodsList', component:goodsList}
]
})
var vm = new Vue({
el:'#app',
data:{
msg:111
},
render: c => c(app),
router
})
account文件:
<template>
<div>
<h1>这是account组件</h1>
<router-link to = '/account/login'>这是account下面的登陆组件</router-link>
<router-link to = '/account/register'>这是account下面的注册组件</router-link>
<router-view></router-view>
</div>
</template>
<script>
</script>
<style>
</style>
app文件:
<template>
<div>
<h1>这是app组件</h1>
<router-link to='/account'>account</router-link>
<router-link to='/goodsList'>goodsList</router-link>
<router-view></router-view>
</div>
</template>
<script>
</script>
<style>
</style>
<style>
div{
color:red;
}
</style>
--这时会把整个页面都标红,需要加scoped
<style scoped>
</style>
<style lang="scss" scoped>
普通的style标签只支持普通的样式,如果想要启用scss或
less,需要为style元素,设置lang属性
body{
div{
font-style:italic;
}
}
</style>