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,步骤同上。