简单练习vue+webpack实现单页应用

1.在vue官网上下载wepback模板，此处给出链接 https://github.com/vuejs-templates/webpack-simple

2.使用模板自定义配置 

　　   vue init <template-name> <project-name>

在dos下执行后，在当前目录下生成一个 <project-name>的目录。然后把模板目录下的template目录下的所有代码放到这个生成的目录下。

　　　1.自定义github模板。我们可以搞自己的模板放到github上面 .

　　　　vue init username/repo my-project

　　　2.我们也可以使用本地pc上的模板。

　　　　vue init <pc上的文件路径> <project-name>

3.生成的目录文件

　　 1、src文件夹 
　　用于存放我们写的源代码 
　　2、.gitignore 
　　用于git上传时，指定忽略一些文件，比如build文件夹以及node_modules 
　　3、index.html 
　　就是浏览器打开看到的页面 
　　4、package.json 
　　这个是一些npm的一些配置文件

　　5、readme 
　　6、webpack.config.js 
　　其实自动化工具，我们需要给一些命令，执行需要的操作。 
       这里在官方指导里面看一下webpack的配置文件，很好理解。https://vuejs-templates.github.io/webpack/structure.html

4.现在简单看一下App.vue文件，这是我的目录

 

   App.vue是我的主页，src里面的components中存放的是我的小模块。main,js用来启动路由和配置路由路径 ，walle里面存放里面的小插件，

   （1）App.vue里面没有什么内容，就是用vue-router划分三个不同的模块，在这里首先安装vue-router 

<template>
  <div id="app" class="banner">
    <div class="headContainer">
        <div class="headCont">
          <div class="headLogo">Beauty World</div>
          <!--使用指令v-link进行导航-->
          <div class="headBanner">
            <li v-for="item in banners" v-on:click="selected(item.name)">
              <router-link class="listItem"  :class="{active:curBanner == item.name}"  :to="{name: item.name}" exact>{{item.title}}</router-link>
            </li>
          </div>
        </div>
      </div>
      <div class="bodyContainer">
        <div class="bodyCont">
            <!--用于渲染匹配的组件-->
          <transition name="fade">
            <router-view></router-view>
          </transition>
        </div>
      </div>
  </div>
</template>
<script>
  import Router from "../static/component/router"
  export default{
    components:{
      Router
    },
    name:'app',
    data:function(){
      return{
        banners:[{
          id:"Home",
          name:"Home",
          title:"首页"
        },{
          id:"List",
          name:"List",
          title:"世界"
        },{
          id:"About",
          name:"About",
          title:"关于"
        }],
        curBanner:"Home"
      }
    },
    methods:{
      selected:function(seclctedName){
        this.curBanner= seclctedName;
      }
    }
  }
</script>

<style scoped>
  .banner{
    height:100%;
    display: block;
  }
  .headContainer{
    height: 50px;
    background-color:#333;
  }
  .headCont{
    height: 50px;
  }
  .headContainer .headLogo{
    width: calc(100% - 280px);
    height: 50px;
    /*float: left;*/
    display: inline-block;
    font-size: 34px;
    padding-left: 20px;
    text-align: center;
    vertical-align: top;
    color: #fff;
    text-shadow: 4px 3px 3px #fa0;
    line-height: 50px;
    font-family: "Lucida Calligraphy";
  }
  .headBanner li{
    float: left;
    display: table;
  }

  .headContainer .headBanner{
    width: 240px;
    /*float: left;*/
    display: inline-block;
    text-align: right;
    height: 50px;
    line-height: 50px;
  }
  a{
    text-decoration: none;
  }
  .listItem{
    font-size: 14px;
    color: #fff;
    height: 30px;
    line-height: 30px;
    padding: 4px 10px;
    margin: 0 6px;
    cursor: pointer;
  }
  .listItem:hover{
    font-size: 16px;
  }
  .headBanner li a:hover{
    font-size: 16px;
    /*background:#00aaff;*/
  }
  .headBanner li a:active{
    background:#00aaff;
  }

  .active{
    /*background:#00aaff;*/
    color: #fa0;
  }

  .bodyContainer{
    height: calc(100% - 50px);
  }

  .bodyCont{
    background: #fff;
    height: 100%;
  }
  /*.router-link-active{*/
    /*!*background:#00aaff;*!*/
    /*color: #fa0;*/
  /*}*/
  .fade-enter-active, .fade-leave-active {
    transition: all 0.3s ease
  }

  .fade-enter, .fade-leave-active {
    opacity: 0
  }
</style>

　　（2.）那么对应main.js的写法是这样的

import Vue from 'vue';
import VueRouter from 'vue-router'
import App from './App.vue'
import List from './components/Detail/List.vue'
import Travel from './components/Detail/Travel.vue'
import Read from './components/Detail/Read.vue'
import Photo from './components/Detail/Photo.vue'
import About from './components/About.vue'
import Home from './components/Banner/Home.vue'

Vue.use(VueRouter);

const routes = [
  {
    path:'/',
    redirect:'/Home'
  },
  {
    path: '/Home',
    component: Home,
    name: 'Home'
  },
  {
    path: '/List',
    component: List,
    name: 'List',
    children:[{
      name:"Travel",
      path:"Travel",
      component: Travel,
    },{
      name:"Read",
      path:"Read",
      component: Read,
    },{
      name:"Photo",
      path:"Photo",
      component: Photo,
    }]
  }, {
    path: '/About',
    component: About,
    name: 'About'
  }];

const router = new VueRouter({
  routes // （缩写）相当于 routes: routes
});
new Vue({
  el: '#app',
  router,
  render: h => h(App)
});

　　里面配置我划分的三个模块，以及各自的子模块。最后就是填充每个模块的内容，这样就简单搭建了一个单页应用。

 4.简单展示一下界面效果