vue新建專案(三)構建單頁應用(SPA)
在前面的兩篇《vue新建專案(一)vue-cli新建模板專案》 和 《vue新建專案(二)安裝element-ui》 中,我們已經新建一個vue專案且安裝了一套UI,但是這個只是一個頁面,那麼怎麼新建一個單頁應用(SPA)呢。
這裡我們需要做一點改造。
步驟:
1.在src/components
下面新建一個目錄common
,並且在這個目錄裡面新建一個.vue檔案:Home.vue
2.在src/components/common
新建一個.vue檔案:Sidebar.vue
3.在Home.vue
裡面增加如下程式碼:
<template>
<div class ="wrapper">
<v-sidebar></v-sidebar>
<div class="content">
<transition name="move" mode="out-in"><router-view></router-view></transition>
</div>
</div>
</template>
<script>
import vSidebar from './Sidebar.vue' ;
export default {
data() {
return {
}
},
components:{
vSidebar
}
}
</script>
4.在Sidebar.vue
裡面增加如下程式碼:
<template>
<div>
<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
<el-submenu index="1">
<template slot="title"><i class="el-icon-message"></i>導航一</template>
<el-menu-item-group>
<template slot="title">分組一</template>
<el-menu-item index="1-1">選項1</el-menu-item>
<el-menu-item index="1-2">選項2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分組2">
<el-menu-item index="1-3">選項3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">選項4</template>
<el-menu-item index="1-4-1">選項1</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2"><i class="el-icon-menu"></i>導航二</el-menu-item>
<el-menu-item index="3"><i class="el-icon-setting"></i>導航三</el-menu-item>
</el-menu>
</div>
</template>
<script>
export default {
data() {
return {
}
},
computed:{
onRoutes(){
return this.$route.path.replace('/','');
}
},
}
</script>
<style scoped></style>
5.修改src/router/index.js
檔案,這個index.js
檔案是路由配置檔案;修改後:
export default new Router({
routes: [
{
path: '/home',
component: resolve => require(['../components/common/Home.vue'], resolve),
}
]
})
接著我們執行npm run dev
但是專案會報錯且不能正確執行,這是因為在《vue新建專案(一)vue-cli新建模板專案》 我們使用ESLint
這個程式碼檢查工具,這裡我們需要關閉它。找到build/webpack.base.conf.js
在webpack.base.conf.js
找到:
{
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [resolve('src'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter')
}
},
然後註釋掉他們就OK了。
專案儲存後,我們在瀏覽器位址列輸入:http://localhost:8080/#/home
就可以看見效果了。
前提是修改了App.vue
這個檔案,修改後:
<template>
<div id="app">
<!--<img src="./assets/logo.png">-->
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
<style>
* {
margin: 0px;
padding: 0px;
}
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
/*margin-top: 60px;*/
}
</style>
- 在
src/components/common/Sidebar.vue
這個Sidebar.vue
最外面的一個div
標籤裡增加一個class="sidebar"
的類;然後增加樣式:
<style scoped>
.sidebar{
width: 180px;
float: left;
}
</style>
7.在src/components/common/Home.vue
這個Home.vue
這裡有一個content
的類,這裡我們增加如下樣式:
<style scoped>
.content{
width: calc(100% - 180px);
float: left;
position: relative;
}
</style>
8.增加一個子頁面
新建一個目錄src/components/pages
,在這個目錄裡面增加一個.vue檔案page1.vue
;
在這個vue檔案裡面加上演示程式碼
<template>
<div>
<h1>我是第一個頁面</h1>
</div>
</template>
<script></script>
<style></style>
9.增加路由,在src/router/index.js
這個index.js
檔案裡面修改為:
export default new Router({
routes: [
{
path: '/home',
component: resolve => require(['../components/common/Home.vue'], resolve),
children:[
{
path: '/page1', // 第一個頁面
component: resolve => require(['../components/pages/page1.vue'], resolve)
},
]
}
]
})
然後在瀏覽器中輸入http://localhost:8080/#/page1
我們就可以看見效果了:
10.增加第二個頁面page2,步驟同上。