vue2搭建簡易spa

使用vue-cli來配置webpack,webpack是一個打包工具，使程序模塊化

全局安裝vue-cli:

npm install -g vue-cli

安裝好後，使用vue-cli腳手架配置webpack:

vue init webpack lanspa

lanspa 爲項目名稱，ESLint是一個QA工具，用來避免低級錯誤和統一代碼的風格,我選了no. 安裝vue-router 容許咱們在 頁面/路由 之間進行切換，而不會 刷新/從新 加載頁面

而後

  cd spa
  npm install
// 運行開發服務
  npm run dev

便可看到頁面。修改頁面默認的功能：

打開src裏的main.js,能夠看到爲：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

替換爲：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
//import the vue instance
import Vue from 'vue'
//import the App component
import App from './App'
//import the vue router
import VueRouter from 'vue-router'
//tell vue to use the router
Vue.use(VueRouter)
/* eslint-disable no-new */
//import the hello component
import Hello from './components/Hello'
//import the about component
import About from './components/About'
//define your routes
const routes = [
    //route for the home route of the webpage
    { path: '/', component: Hello },
    //route for the about route of the webpage
    { path: '/about', component: About }
]

// Create the router instance and pass the `routes` option
// You can pass in additional options here, but let's
// keep it simple for now.
const router = new VueRouter({//建立路由
  routes, // short for routes: routes
  mode: 'history'//以防止咱們的  中包含  標記
})
//instatinat the vue instance
new Vue({
    //define the selector for the root component
  el: '#app',
  //pass the template to the root component
  template: '<App/>',
  //declare components that the root component can access
  components: { App },
  //pass in the router to the vue instance
  router
}).$mount('#app')//mount the router on the appURL#

打開App.vue文件，看到

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style>
#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>

替換爲：

<template>
  <div id="app">
  <!-- the router outlet, where all matched components would ber viewed -->
  <router-link v-bind:to="'/'">Home</router-link>
<!-- 爲咱們建立兩個錨點標籤，並動態路由，使頁面不須要從新加載-->

<router-link v-bind:to="'/about'">About</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>
<!-- styling for the component -->
<style>
#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 router-view 標籤被放置在了 template 內，用於渲染視圖。

2 刪除 hello 組件的 import 語句。

3 在 script 標籤中刪除了組件代碼塊

此時從新加載可看到新頁面。

定義一個新路由的方法：

1 在 src/components 文件夾內建立一個名爲 About.vue 的文件，hello.vue文件也是同樣的：

<template>
  <div id="about">
  blabla bla bla hahahah
  </div>
</template>

<script>
export default {
  name: 'about'
}
</script>
<!-- styling for the component -->
<style>
#about {
  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>

要渲染about.vue,須要設置路由,即前文main.js中的

import Hello from './components/Hello'
//import the about component
import About from './components/About'
//define your routes
const routes = [
    //route for the home route of the webpage
    { path: '/', component: Hello },
    //route for the about route of the webpage
    { path: '/about', component: About }
]

而後在router-view以前設置router-link使點擊頁面不會從新加載。

spa可經過設置更多的路由和傳遞路徑參數得到更加複雜頁面。

參考https://scotch.io/tutorials/how-to-build-a-simple-single-page-application-using-vue-2-part-1