VUE框架建立SPA單頁面應用

Vue (讀音 /vjuː/，相似於 view) 是一套用於構建用戶界面的漸進式框架。與其它大型框架不一樣的是，Vue 被設計爲能夠自底向上逐層應用。Vue 的核心庫只關注視圖層，不只易於上手，還便於與第三方庫或既有項目整合。另外一方面，當與現代化的工具鏈以及各類支持類庫結合使用時，Vue 也徹底可以爲複雜的單頁應用提供驅動。

1、 項目使用技術、框架簡單介紹

咱們使用vue-cli來搭建整個項目，vue-cli就是一個腳手架，步驟很簡單，輸入幾個命令以後就會生成整個項目，裏面包括了webpack、ESLint、babel不少配置等等，省了不少事。根據小高以前給的要求以及結合DSS項目中的經驗，咱們今天搭建的項目結構組成爲：

Vue+ ESLint + webpack + iview+ES6

Vue: 主要框架

ESLint: 幫助咱們檢查Javascript編程時的語法錯誤，這樣在一個項目中多人開發，能達到一致的語法

Webpack: 設置代理、插件和loader處理各類文件和相關功能、打包等功能。整個項目中核心配置

iview: 是基於vue的一套樣式框架，裏面有不少封裝好的組件樣式

ES6: 緊跟時代潮流，使用ES6語法，利用babel處理。

二，安裝　　

　　安裝npm：npm install vue

　　安裝vue-cli：npm install --global vue-cli

三，建立項目

　　建立：vue init webpack test

　　建立一個基於webpack的項目，名爲「test」，根據提示輸入相關描述

　　安裝依賴：npm install 

　　安裝依賴完成後會有node_modules文件夾

四，開始運行

　　運行：npm run dev

五，項目結構

　　主要代碼集中在src文件夾中

　　　　　　　　　　　　　　　　　　　　　　  　　　　　　　　　　

 

六，建立單頁面

使用<router-link to="/index">首頁</router-link>，與<router-view/>完成點擊時切換不一樣的頁面

<template>
  <!--template中只能存在一個div-->
  <div id="app">
    
    <router-link to="/index">首頁</router-link>
    <router-link to="/courses">課程中心</router-link>
    <router-link to="/micro">學習中心</router-link>
    <router-link to="/study">學習中心</router-link>

    <router-view/>
  </div>
</template>

<script>
   export default {
    name: 'App',
    data() {
      return {
        msg: "首頁"
      }
    },
    methods: {
    },
  }
</script>

<style scoped>

</style>

App.vue

<template>
  <div id="Index">{{msg}}
    </div>
</template>

<script>
  export default {
    name: "Index",
    data() {
      return {
        msg：'首頁'
      }
    }
  }
</script>

<style scoped>

</style>

Index.vue

<template>
  <div id="Course">{{msg}}
    </div>
</template>

<script>
  export default {
    name: "Course",
    data() {
      return {
        msg：'課程中心'
      }
    }
  }
</script>

<style scoped>

</style>

Course.vue