簡單練習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.簡單展示一下界面效果