SOURCE

console 命令行工具 X clear

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



//注意  在login.vue 里面写上
<style>
    div{
        color:red;
    }
</style>
--这时会把整个页面都标红,需要加scoped
<style scoped>

</style>

//account.vue
<style lang="scss" scoped>
    普通的style标签只支持普通的样式,如果想要启用scss或
    less,需要为style元素,设置lang属性
    body{
        div{
            font-style:italic;
        }
    }
</style>