关闭

vue新建项目(三)构建单页应用(SPA)

标签: SPA
1600人阅读 评论(0) 收藏 举报
分类:

在前面的两篇《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.jswebpack.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>
  1. 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,步骤同上。

0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

vue中的路由编写方法

配置路由
  • A_bet_of_three_years
  • A_bet_of_three_years
  • 2017-10-17 11:00
  • 174

vue2.0环境搭建(含router路由)

vue2.0环境搭建(含router路由)
  • lemon_zhao
  • lemon_zhao
  • 2017-02-17 15:01
  • 9995

使用Vue-Router 2实现路由功能

注意:vue-router 2只适用于Vue2.x版本,下面我们是基于vue2.0讲的如何使用vue-router 2实现路由功能。 推荐使用npm安装。 npm install vue-rout...
  • sinat_17775997
  • sinat_17775997
  • 2017-01-24 21:10
  • 68990

Vue2.0 新手完全填坑攻略—从环境搭建到发布——DT

Jinkey原创 感谢 showonne、yubang 技术指导 Demo 地址: http://demo.jinkey.io/vue2 源码: https://github.com/Jinkeyco...
  • sinat_17775997
  • sinat_17775997
  • 2016-10-11 16:05
  • 31296

Vue异步组件Demo

Vue异步组件Demo 在大型应用中,我们可能需要将应用拆分为多个小模块,按需从服务器下载。为了进一步简化,Vue.js 允许将组件定义为一个工厂函数,异步地解析组件的定义。Vue.js 只在组件...
  • akeleton
  • akeleton
  • 2017-12-24 19:49
  • 48

vue框架知识积累

1.在实际项目中,经常会用到多种模板结合在一起使用,比如thinkphp,artemplate,vue模块,很多模板都会使用这种“{{}}“转义符号去解析,在vue中为了避免这种冲突,可以使用如下接口...
  • u014029186
  • u014029186
  • 2016-08-16 14:27
  • 3183

vue项目实战语法

一、安装配置依赖 1) vue init webpack-simple 项目名称    2) cnpm install 3 )  npm run dev 4 )  cnpm insta...
  • servers_zhangyu
  • servers_zhangyu
  • 2017-05-12 22:15
  • 992

Vue2.0 Component的详解(重点)

Vue2.0
  • BorderBox
  • BorderBox
  • 2017-08-03 17:17
  • 6920

试着用React写项目-利用styled-components解决样式问题

转载请注明出处:王亟亟的大牛之路啰嗦之前先案例,会渐渐丰富前端的知识点 https://github.com/ddwhan0123/Useful-Open-Source-Android昨天用webpa...
  • ddwhan0123
  • ddwhan0123
  • 2017-02-15 17:42
  • 4392

Vue 学习笔记

From: https://vuejs.bootcss.com/v2/guide/#声明式渲染 Vue.js 是什么 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 ...
  • henrypt
  • henrypt
  • 2017-03-09 14:16
  • 1064
    个人资料
    • 访问:487362次
    • 积分:6741
    • 等级:
    • 排名:第4068名
    • 原创:188篇
    • 转载:0篇
    • 译文:0篇
    • 评论:165条
    博客专栏
    最新评论