vue create cli3
先下载vue cli3
这个就不要选择了,这个是严格控制格式的 多加一个空格都不行,不要选这个
创建好后把 holle word 还有默认样式删掉
home.vue
<template>
<div id="father">
<h1>夕阳无限好,只是近黄昏</h1>
</div>
</template>
<script>
// @ is an alias to /src
export default {
name: 'Home',
}
</script>
<style scoped>
#father{
margin-left:-13% ;
}
</style>
about.vue
<template>
<div id="father">
<h1>现实是此岸,理想是彼岸</h1>
</div>
</template>
<style >
#father{
margin-left:-13% ;
}
</style>
app.vue
<template>
<div id="nav">
<router-link to="/home">Home</router-link> |
<router-link to="/About">About</router-link>
<router-view/>
</div>
</template>
<style >
#nav{
margin-left: 45%;
margin-top:100px;
}
</style>
main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
createApp(App).use(store).use(router).mount('#app')
index.js
import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '../views/Home.vue'
const routes = [
{
path: '/home',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router
这个一定要有,刚创建的时候可能会报错是因为这个加在了div的后面
要加在div的里面
这几个是一一对应的